2025最新出炉--前端面试题十

1. axios 请求数据, POST 为什么会发送一个 OPTIONS

回答： OPTIONS 请求是 CORS 预检请求（Preflight），触发条件：

1. 非简单请求：如请求方法为 PUT/DELETE，或包含自定义头部（如 Authorization）。
2. 跨域请求：浏览器自动发送 OPTIONS 请求，验证服务端是否允许实际请求。

解决方案：

服务端响应 OPTIONS 时，返回允许的 Method 和 Headers：

Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization

2. websockets 有用过吗

回答： WebSocket 是双向通信协议，适用于实时应用（如聊天室、股票行情）：

基本用法：

const ws = new WebSocket('wss://api.example.com/socket');

// 连接建立
ws.onopen = () => {
  ws.send('连接成功！');
};

// 接收消息
ws.onmessage = (e) => {
  console.log('收到消息:', e.data);
};

// 关闭连接
ws.onclose = () => {
  console.log('连接关闭');
};

优势：

• 低延迟，服务端可主动推送数据。
• 相比 HTTP 轮询，减少冗余请求。

3. 能跟我讲讲你是怎么理解 ssr 的吗

回答： SSR（Server-Side Rendering）指在服务端生成完整 HTML 页面，核心优势：

1. SEO 友好：爬虫直接获取渲染后的内容。
2. 首屏加载快：用户无需等待客户端渲染。
3. 低端设备兼容性：减少客户端 JavaScript 执行负担。

实现流程：

1. 服务端接收请求，执行组件逻辑并渲染为 HTML。
2. 返回 HTML 给浏览器，同时注入初始状态（如 Vuex 数据）。
3. 客户端“激活”（Hydration）HTML，使其变为可交互的 SPA。

框架支持：

• Vue：Nuxt.js
• React：Next.js

4. uniapp 和 taro 有用过吗

回答：

适用场景：

• UniApp：适合 Vue 技术栈团队快速开发多端应用。
• Taro：适合 React 技术栈团队，或需深度定制化需求。

5. 浏览器的缓存规则详细说一下

回答： 浏览器缓存分为 强缓存 和 协商缓存，优先级顺序如下：

1. 强缓存：
   • Cache-Control: max-age=3600 > Expires。
   • 资源未过期时直接使用本地缓存（状态码 200）。
2. 协商缓存：
   • ETag（优先级高） > Last-Modified。
   • 资源过期后，携带 If-None-Match 或 If-Modified-Since 请求服务器。
   • 若资源未修改，返回 304，否则返回新资源（200）。

缓存流程图：

浏览器请求资源 → 检查强缓存是否有效 → 有效 → 200 (from cache)
               ↓ 无效
               → 发起请求 → 检查协商缓存 → 有效 → 304
                                     ↓ 无效 → 200 + 新资源

6. 浏览器的事件循环是怎样的

回答： 事件循环（Event Loop）是浏览器处理异步任务的机制，执行顺序如下：

1. 执行栈：同步代码按顺序执行。
2. 微任务队列：
   • 包含 Promise.then、MutationObserver、queueMicrotask。
   • 必须清空当前微任务队列后，才能执行下一个宏任务。
3. 宏任务队列：
   • 包含 setTimeout、setInterval、DOM 事件、I/O 操作。

示例：

console.log(1);
setTimeout(() => console.log(2), 0);
Promise.resolve().then(() => console.log(3));
console.log(4);
// 输出顺序：1 → 4 → 3 → 2

7. HTTP 状态码说一下

回答：

8. 前端性能优化都能做哪些

回答：

优化方向：

1. 资源加载优化：
   • 压缩代码（JS/CSS）、图片转 WebP。
   • 使用 CDN 加速静态资源。
   • 按需加载（路由懒加载、动态导入）。
2. 渲染优化：
   • 减少重排重绘（使用 transform 替代 top/left）。
   • 使用虚拟列表优化长列表渲染。
3. 缓存策略：
   • 强缓存与协商缓存合理配置。
4. 代码层面优化：
   • 避免内存泄漏（及时清除定时器、事件监听）。
   • 使用 Web Workers 处理复杂计算。

工具支持：

• Lighthouse：性能检测与评分。
• Webpack Bundle Analyzer：分析打包体积。

9. CDN 有了解过吗

回答： CDN（Content Delivery Network）通过分布式节点缓存资源，加速用户访问：

工作原理：

1. 用户请求资源时，CDN 分配最近的节点响应。
2. 若节点无缓存，回源站获取并缓存。

优势：

• 减少网络延迟，提升加载速度。
• 减轻源站服务器压力。

适用场景：

• 静态资源（图片、JS、CSS）分发。
• 大文件下载（视频、软件包）。