前端面试网络问题汇总

以下为高频考点，覆盖 HTTP协议、浏览器机制、性能优化、安全、WebSocket 等核心方向，按优先级分类整理：

---

一、HTTP 协议与网络基础

1. HTTP/1.1 vs HTTP/2 vs HTTP/3
   • 核心差异：多路复用、头部压缩、协议层（TCP vs QUIC）、队头阻塞解决。
   • 性能优化点：HTTP/2 的 Server Push 适用场景？QUIC 如何解决弱网问题？

2. TCP 三次握手与四次挥手
   • 三次握手：解决双向通信能力验证和序列号同步。
   • 四次挥手：TIME_WAIT 的作用（防止旧包干扰新连接）。
   • 高频题：为什么握手是三次，挥手是四次？

3. HTTPS 工作原理
   • TLS 握手流程（RSA/ECDHE 密钥交换）。
   • 证书链验证：根证书、中间证书、站点证书。
   • 性能优化：Session Resumption、OCSP Stapling。

4. HTTP 状态码
   • 必考：200、301、302、304、400、401、403、404、500、502。
   • 缓存相关：304（协商缓存）、200（强缓存）。

5. DNS 解析过程
   • 递归查询 vs 迭代查询。
   • 优化：DNS 预解析（dns-prefetch）、减少 DNS 查询次数。

---

二、浏览器缓存机制

1. 强缓存 vs 协商缓存
   • 响应头：Cache-Control（max-age、no-cache）、Expires。
   • 验证头：ETag（优先级高）、Last-Modified。
   • 缓存位置：Memory Cache、Disk Cache。

2. 缓存策略设计
   • 静态资源：Cache-Control: max-age=31536000, immutable。
   • 动态接口：Cache-Control: no-store。

3. Service Worker 离线缓存
   • 核心能力：拦截请求、预缓存、离线可用性。
   • 生命周期：install、activate、fetch 事件。

---

三、跨域与安全

1. 跨域解决方案
   • 简单请求 vs 预检请求（OPTIONS）。
   • CORS：Access-Control-Allow-Origin、withCredentials。
   • 代理：Nginx 反向代理、Webpack DevServer Proxy。

2. XSS 与 CSRF 防御
   • XSS：输入过滤、CSP 内容安全策略、HttpOnly Cookie。
   • CSRF：Token 验证、SameSite Cookie、验证 Referer。

3. HTTPS 中间人攻击
   • 风险点：伪造证书、SSL Stripping。
   • 防御：HSTS 头（强制 HTTPS）、证书锁定（Certificate Pinning）。

---

四、性能优化

1. 关键指标
   • RAIL 模型：Response、Animation、Idle、Load。
   • Web Vitals：LCP（最大内容渲染）、FID（首次输入延迟）、CLS（布局偏移）。

2. 资源加载优化
   • 压缩：Brotli/Gzip、图片格式（WebP/AVIF）、代码 Tree-Shaking。
   • 预加载：<link rel="preload">、<link rel="preconnect">。
   • 懒加载：Intersection Observer API、动态导入（Dynamic Import）。

3. 渲染优化
   • 关键渲染路径：减少 CSSOM/JS 阻塞、异步加载非关键资源。
   • 合成层优化：will-change、GPU 加速（transform/opacity）。

4. CDN 与边缘计算
   • CDN 作用：静态资源分发、减少 RTT。
   • 边缘计算：Serverless Functions（如 Cloudflare Workers）。

---

五、WebSocket 与实时通信

1. WebSocket 握手流程
   • Upgrade 头：Connection: Upgrade、Upgrade: websocket。
   • 应用场景：聊天室、实时数据推送、在线游戏。

2. 长轮询 vs WebSocket
   • 长轮询缺点：高延迟、服务端资源消耗。
   • WebSocket 优势：全双工、低延迟、头部开销小。

3. 心跳机制
   • 作用：保活连接、检测断线。
   • 实现：定时发送 Ping/Pong 帧。

---

六、经典开放性问题

1. 从输入 URL 到页面展示发生了什么？
   • 分解步骤：DNS 解析 → TCP 握手 → HTTPS 握手 → HTTP 请求 → 响应解析 → 构建 DOM/CSSOM → 渲染树 → 布局 → 绘制。

2. 如何实现一个高性能的前端资源加载器？
   • 策略：优先级队列、并发控制、缓存复用、错误重试。

3. 前端如何监控网络性能？
   • API：Navigation Timing API、Resource Timing API。
   • 工具：Lighthouse、WebPageTest、自定义性能埋点。

---

七、高频代码题

1. 手写 AJAX（XMLHttpRequest / Fetch）
2. 实现 Promise 并发控制
3. 封装 WebSocket 客户端（重连机制）
4. 解析 URL 参数（正则/URLSearchParams）

---

总结

面试时需结合 具体场景 + 底层原理 + 实战经验：
• 举例说明：在项目中如何优化首屏加载速度？
• 深入追问：HTTP/2 多路复用如何解决队头阻塞？
• 扩展思考：QUIC 协议如何实现 0-RTT？

掌握以上内容，足以应对 90% 的前端网络面试题！