前端网络协议面试题及解析

---

一、HTTP/HTTPS

1. HTTP请求从输入URL到页面加载的全过程
   解析：DNS解析 → TCP握手 → HTTP请求 → 服务器响应 → 渲染引擎解析 → 加载资源（CSS/JS/图片）→ 页面渲染。前端优化点：DNS预取、CDN加速、资源压缩。

2. HTTP/1.1 的队头阻塞问题如何解决？
   解析：同一TCP连接只能处理一个请求。优化方案：

   • 域名分片（多个子域名）
   • HTTP/2多路复用（二进制帧并行传输）

3. HTTPS加密过程（TLS握手步骤）
   解析：

   1. 客户端发送随机数+加密套件
   2. 服务端返回随机数+证书+公钥
   3. 客户端验证证书，生成预主密钥（用公钥加密）
   4. 双方用3个随机数生成会话密钥
      前端关联：减少握手次数（Session复用）

---

二、TCP协议

4. TCP三次握手和四次挥手流程
   解析：

   • 握手：SYN → SYN-ACK → ACK（建立双向连接）
   • 挥手：FIN → ACK → FIN → ACK（双方独立关闭）
     优化：tcp_tw_reuse减少TIME_WAIT状态

5. TCP如何保证可靠传输？
   解析：

   • 数据分块编号（Seq序列号）
   • 确认应答（ACK）
   • 超时重传
   • 流量控制（滑动窗口）
   • 拥塞控制（慢启动/快恢复）

6. 为什么UDP比TCP快？前端哪些场景用UDP？
   解析：无连接、无重传、无流量控制。前端场景：QUIC协议（HTTP/3）、WebRTC视频通话、DNS查询。

---

三、HTTP进阶

7. HTTP/2 的核心改进
   解析：

   • 多路复用（一个TCP连接并行传输）
   • 头部压缩（HPACK算法）
   • 服务器推送（Server Push）
   • 二进制帧传输
     前端收益：减少TCP连接数，提升加载速度。

8. HTTP/3 为什么改用UDP？
   解析：解决TCP队头阻塞。QUIC协议在UDP上实现可靠传输+快速握手（0-RTT）。

9. 常见HTTP状态码及含义
   解析：

   • 200 OK（成功）
   • 301 Moved Permanently（永久重定向）
   • 304 Not Modified（缓存有效）
   • 400 Bad Request（客户端错误）
   • 502 Bad Gateway（上游服务器故障）

---

四、缓存策略

10. 强缓存 vs 协商缓存
    解析：

    • 强缓存：Cache-Control（max-age）、Expires（直接本地读）
    • 协商缓存：Last-Modified/If-Modified-Since、ETag/If-None-Match（请求服务器验证）
      最佳实践：静态资源强缓存，HTML文件协商缓存。

11. Cache-Control 的 no-cache 和 no-store 区别
    解析：

    • no-cache：可缓存但每次需验证
    • no-store：禁止任何缓存

---

五、安全协议

12. XSS攻击原理及防御
    解析：恶意脚本注入页面。防御：

    • 输入过滤（特殊字符转义）
    • CSP内容安全策略（Content-Security-Policy: script-src 'self'）
    • HttpOnly Cookie（防JS读取）

13. CSRF攻击原理及防御
    解析：诱导用户发起恶意请求。防御：

    • SameSite Cookie（SameSite=Lax）
    • 验证请求来源（Referer检查）
    • CSRF Token（服务端校验）

14. CORS跨域的实现机制
    解析：

    1. 简单请求：直接发送（GET/POST+标准头）
    2. 预检请求（OPTIONS）：检查Access-Control-Allow-Origin
       前端注意：带凭证请求需设置credentials: 'include'

---

六、WebSocket

15. WebSocket 如何建立连接？
    解析：HTTP Upgrade机制：

    GET /chat HTTP/1.1
    Upgrade: websocket
    Connection: Upgrade
    Sec-WebSocket-Key: xxxx
    

    服务端返回101 Switching Protocols

16. 相比HTTP轮询的优势
    解析：

    • 双向实时通信（服务器可主动推送）
    • 减少冗余头部（长连接）
    • 更低延迟（无重复TCP握手）

---

七、性能优化

17. CDN 加速原理
    解析：用户就近访问边缘节点缓存资源。前端配合：静态资源带哈希名（app.3a2b.js），配置长期缓存。

18. 资源预加载的4种方式
    解析：

    • <link rel="preload">（强制加载）
    • <link rel="prefetch">（空闲加载）
    • <link rel="dns-prefetch">（DNS预解析）
    • HTTP/2 Server Push（服务器推送）

19. 如何减少TCP握手时间？
    解析：

    • 开启Keep-Alive（复用连接）
    • 升级HTTP/2（多路复用）
    • 迁移HTTP/3（QUIC 0-RTT握手）

---

八、协议细节

20. Cookie 的 SameSite 属性
    解析：

    • Strict：完全禁止第三方Cookie
    • Lax：允许GET请求携带（默认）
    • None：允许所有（需配合Secure）

21. GET 和 POST 的本质区别
    解析：

    • 语义：GET获取数据，POST提交数据
    • 实际：GET参数在URL，POST在Body（但HTTP协议未强制）
    • 安全：敏感数据用POST避免URL暴露

22. HTTP 的 Keep-Alive 作用
    解析：复用TCP连接，避免频繁握手。前端自动生效（HTTP/1.1默认开启）。

---

九、新兴技术

23. WebTransport 解决了什么问题？
    解析：基于HTTP/3的多路传输协议，支持可靠数据流（如TCP）和不可靠数据报（如UDP），用于实时游戏/视频。

24. WebRTC 的 NAT 穿透原理
    解析：通过STUN服务器获取公网IP，若失败则用TURN服务器中转。前端API：RTCPeerConnection。

---

十、综合场景

25. 首屏加载慢如何从网络层优化？
    解析：

    • 资源压缩（Brotli/Gzip）
    • HTTP/2 + 域名分片
    • 关键资源预加载
    • CDN分发静态资源
    • 减少重定向（301→CDN配置）

26. 如何实现文件断点续传？
    解析：

    1. 前端切片文件（Blob.slice）
    2. 记录已上传分片索引
    3. 服务端合并分片
       协议支持：HTTP Range头（Content-Range: bytes 0-999/2000）

27. 大文件上传如何保证稳定性？
    解析：

    • 分片上传 + 并行传输
    • 失败分片重试
    • WebSocket实时进度反馈
    • 服务端校验MD5

---

十一、协议分析

28. Wireshark 抓包如何过滤HTTP请求？
    解析：过滤器输入 http.request.method == "GET"

29. Chrome DevTools 的瀑布流图分析要点
    解析：

    • 排队（Queuing）：TCP连接不足
    • TTFB（Time to First Byte）：服务器响应慢
    • 内容下载（Content Download）：资源体积过大

30. 设计微信小程序网络层架构（开放题）
    解析：

    • 协议层：HTTP/2 + QUIC（弱网优化）
    • 安全：双向证书 + 请求签名
    • 缓存：本地SQLite存储策略
    • 监控：SDK上报请求成功率/延迟
    • 容灾：域名动态切换

---

面试技巧：

• 基础题：必考HTTP状态码、缓存策略、TCP握手
• 进阶题：深入HTTP/2/3特性、WebSocket原理
• 安全题：XSS/CSRF/CORS防御方案（结合前端实践）
• 性能题：从协议角度解释优化手段（如Keep-Alive、CDN）
• 开放题：展示架构思维（协议选型+容错设计）

附：高频协议与前端关联表

协议	前端应用场景	优化方向
HTTP/2	静态资源加载	多路复用+头部压缩
QUIC	弱网环境（移动端）	0-RTT握手+无队头阻塞
WebSocket	实时消息/在线协作	替代长轮询
CORS	跨域API调用	预检请求优化
CSP	XSS防御	限制脚本来源

重点理解 “协议如何影响前端性能” 和 “前端如何利用协议特性优化” 的双向思维！