2025最新面筋 | 408篇

说实话，面试被拷打，真的很难过。特别是，那些有点影响的八股或408基础。因为没答出来吃挂面，确实可惜。走过的路，写点面筋总结，也算帮指个方向。

文章不长，可以 reading all

我是ys 指风不买醉 ，关注我------学技术不迷路 😊

常见的 `Content-Type` 类型及其用途

Content-Type 是 HTTP 请求或响应头部中用于指示正文媒体类型的重要字段。常见的 Content-Type 类型可以分为以下几类：

1. 文本类

text/plain：纯文本内容，例如日志文件。
text/html：HTML 文档，用于网页内容。
text/css：CSS 样式表。
application/javascript 或 text/javascript：JavaScript 文件。

2. 表单数据

application/x-www-form-urlencoded：传统的表单提交格式，键值对通过 & 分隔。
multipart/form-data：用于文件上传或包含文件的表单数据。
application/json：JSON 格式的数据，是现代 API 开发中最常用的格式。

3. 文件和媒体

application/octet-stream：二进制文件流，用于通用文件下载。
application/pdf：PDF 文件。
image/jpeg 和 image/png：分别用于 JPEG 和 PNG 图像文件。
audio/mpeg 和 video/mp4：分别用于 MP3 音频和 MP4 视频文件。

4. 其他

application/xml 或 text/xml：XML 格式的数据，例如 SOAP API。
application/graphql：GraphQL 查询。
text/csv：CSV 文件。

这些 Content-Type 类型在不同的场景中被广泛使用，确保客户端和服务器能够正确解析和处理请求或响应的内容。

HTTP 相关知识

1. HTTP 请求中如何设置 `Content-Type`

在 HTTP 请求中，可以通过设置请求头部来指定 Content-Type，例如在 JavaScript 中使用 fetch 或 axios 进行设置：

css 复制代码

fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ key: 'value' })
});

2. `application/json` 和 `application/x-www-form-urlencoded` 的区别

application/json 适用于前后端分离的场景，数据以 JSON 结构传输。
application/x-www-form-urlencoded 适用于传统的表单提交，数据以 key=value&key2=value2 形式组织。

3. 为什么 `multipart/form-data` 适合文件上传？

multipart/form-data 允许将文件和其他表单数据一起发送，而不会对文件内容进行编码，因此适合文件上传。
它支持原生二进制传输，避免 application/x-www-form-urlencoded 的 URL 编码导致的文件损坏。

Web 相关技术面题

1. Web Worker

Web Worker 允许主线程创建一个独立的 Worker 线程，实现并行处理计算密集型任务，防止主线程阻塞。

通过 postMessage 和 onmessage 实现通信。
适用于 IO 密集型或计算密集型任务。

2. WebSocket

WebSocket 是一种全双工通信协议，适用于实时交互应用，如聊天。

监听 onopen、onmessage、onclose、onerror 事件。
监听 readyState 确保连接状态。
通过心跳包（ping）检测连接是否存活。

3. SSE（Server-Sent Events）

SSE 是基于 HTTP 的单向通信技术，适用于实时数据推送。

服务器使用 text/event-stream 作为 Content-Type。
客户端通过 EventSource 监听 open、message、error 事件。

特性	WebSocket	SSE
连接方式	基于 TCP，双向通信	基于 HTTP，单向通信
适用场景	实时聊天、游戏	新闻推送、数据监控
传输格式	二进制帧	事件流

CSR 与 SSR

CSR（Client-Side Rendering） ：用户请求后，浏览器加载基础HTML（通常包含一个容器（如 <div id="app">）和一些 JavaScript 文件），前端向后端API请求数据（通常是JSON格式），后端再根据获取的数据动态生成HTML并更新dom
SSR（Server-Side Rendering） ：输入URL或点击链接后，服务器接收请求执行逻辑，使用SSR框架（如vue SSR或nextjs）或模版引擎将从数据库或调用其他服务拿到的数据与模板进行合并输出完整HTML，将完整HTML返回给浏览器进行响应。浏览器接收到HTML后，将静态HTML转为动态dom。
ISR（Incremental Static Regeneration） ：结合 SSR 和 SSG（Static Site Generation），适用于部分静态部分动态的页面。在构建阶段，nextjs 预先生成静态HTML 文件，类似SSG（静态站点生成）。当数据变化时，nextjs 在后台动态重新生成静态HTML，不用重构整个应用。ISR 支持 revalide 时间，控制静态缓存时间。缓存过期，nextjs 自动重新生成页面。

计算机基础

1. 进程Process VS 线程 Thread

进程是操作系统资源调度的基本单位。是独立的，崩溃不会影响其他进程。因为分配和回收资源导致开销比较大。操作系统为每个进程分配独立的内存空间、文件描述符、环境变量等资源。
进程通信：
- 管道（pipe）：父子或兄弟进程通信
- 消息队列（message queue）：多进程通信
- 共享内存（shared memory）：多进程共享同一个内容区域
- PV 信号（signal）：进程之间通知机制
- postMessage：在web 开发，用于跨窗口或跨桢进程通信
线程是 CPU 调度的基本单位,进程执行的最小单元。一个进程可以有多个线程，这些线程进行共享进程资源。
- 并发性高，切换开销小（资源一般不用被回收）
- 线程之间通信：共享内存、锁（防止数据竞争造成"饿死"等现象）、条件变量（用于同步）、信号量（控制对共享资源的访问）

下面线程内容只做操作系统日常学习：

1，线程的同步与并发

同步（Synchronization） ：多个线程在访问共享资源时，需要通过锁或其他同步机制来确保数据一致性。
并发（Concurrency） ：多个线程同时运行，提高程序的执行效率。但需要合理管理线程的创建和销毁，避免过多线程导致系统资源耗尽

2，线程的优化

线程池（Thread Pool） ：预先创建一组线程，复用线程资源，减少线程创建和销毁的开销。
工作窃取（Work Stealing） ：线程池中的线程可以窃取其他线程的任务，提高线程的利用率。
锁优化：使用无锁编程（Lock-Free Programming）或减少锁的粒度，提高并发性能

3，线程的并发模型

生产者-消费者模型（Producer-Consumer Model） ：生产者线程生成数据，消费者线程消费数据，通过队列进行同步。
读者-写者模型（Reader-Writer Model） ：允许多个读者线程同时读取，但写入时需要互斥。
主从模型（Master-Slave Model） ：主线程分配任务，从线程执行任务，通过消息队列进行通信。

2. 计算机网络 7 层模型

层级	功能
物理层	传输比特流
数据链路层	介质访问控制（MAC）
网络层	IP 地址、路由
传输层	TCP/UDP 协议
会话层	连接管理
表示层	数据格式转换
应用层	HTTP、FTP、DNS

富文本编辑器

contenteditable=true：将 HTML 元素变为可编辑状态。
使用 iframe 并设置 designMode='on' 创建独立编辑环境。
现代富文本编辑器基于 document.execCommand 或更先进的 JavaScript 框架。

ECharts 数据可视化

通过 echarts.init() 实例化图表。
配置 option，包含 legend、series、xAxis 等参数。
适用于折线图、柱状图、饼图等数据可视化需求。
底层是ZRender： ECharts 根据解析后的数据，调用 ZRender 进行图形绘制
ECharts 的整体架构基于 MVC 模式：

视图层：负责图形的渲染，由 ZRender 的 Painter 模块实现。

控制层：负责用户输入的交互处理，由 ZRender 的 Handler 模块实现。

数据层：负责数据模型的编排与存储，由 ZRender 的 Storage 模块实现。
ECharts 有svg 和 canvas两种渲染
高效渲染：
- 响应式渲染：基于"dirty 标记"的机制，仅重新渲染发生变化的部分。
- 增量渲染：对于大数据集，支持增量渲染，避免一次性渲染过多数据