前端面试题 - 计算机网络篇

本文档整理了前端面试中高频出现的计算机网络相关面试题，涵盖HTTP/HTTPS、TCP/IP、DNS、缓存、跨域、WebSocket、网络安全等核心知识点。

简介

计算机网络是前端面试中的核心考察领域，无论是日常开发还是面试准备，掌握网络协议原理都至关重要。前端工程师需要理解浏览器与服务器之间的通信机制，以便更好地进行性能优化、安全防护和故障排查。

题目统计

难度说明

• ⭐ 基础：必会知识点，面试高频出现
• ⭐⭐ 中级：深入理解原理，体现技术深度
• ⭐⭐⭐ 高级：进阶内容，大厂面试常考

目录

• HTTP协议
• HTTPS和TLS/SSL
• TCP/IP协议
• 三次握手和四次挥手
• DNS解析
• CDN原理
• 缓存机制
• 跨域解决方案
• WebSocket
• RESTful API设计
• 网络安全
• 性能优化

HTTP协议

1. HTTP/1.0、HTTP/1.1、HTTP/2.0、HTTP/3.0有什么区别？

难度：⭐⭐（中级） 标签：#HTTP #协议版本

问题描述： 请对比HTTP各主要版本的核心特性和区别。

参考答案要点：

• HTTP/1.0：无连接复用，每次请求需新建TCP连接
• HTTP/1.1：引入持久连接(keep-alive)、管道化、缓存控制增强
• HTTP/2.0：二进制分帧、多路复用、头部压缩(HPACK)、服务器推送
• HTTP/3.0：基于QUIC协议(UDP)、0-RTT握手、彻底解决队头阻塞

2. HTTP/2的多路复用解决了什么问题？

难度：⭐⭐（中级） 标签：#HTTP/2 #多路复用

问题描述： HTTP/2的多路复用机制解决了什么核心问题？

参考答案要点：

• 解决了HTTP/1.1的队头阻塞问题
• 允许在单个TCP连接上并行传输多个请求和响应
• 通过流(Stream)标识区分不同请求的数据帧
• 注意：HTTP/2只解决了应用层队头阻塞，TCP层队头阻塞仍存在

3. HTTP/2的头部压缩是如何实现的？

难度：⭐⭐⭐（高级） 标签：#HTTP/2 #HPACK #压缩

问题描述： 请说明HTTP/2头部压缩的原理和实现方式。

参考答案要点：

• 使用HPACK算法进行头部压缩
• 静态表：预定义常用头部字段
• 动态表：维护会话期间出现的头部字段
• 哈夫曼编码：对字符串进行压缩
• 减少重复头部传输，节省带宽

4. HTTP/3相比HTTP/2有哪些核心改进？

难度：⭐⭐⭐（高级） 标签：#HTTP/3 #QUIC

问题描述： HTTP/3相比HTTP/2有哪些重要的改进？

参考答案要点：

• 传输层变更：基于QUIC(UDP)而非TCP
• 0-RTT/1-RTT握手：首次连接1-RTT，后续0-RTT恢复
• 无队头阻塞：QUIC的流独立传输，单流丢包不影响其他流
• 连接迁移：使用连接ID标识会话，网络切换保持连接
• 内置加密：QUIC集成TLS 1.3

5. HTTP/1.1的keep-alive和HTTP/2的多路复用有什么区别？

难度：⭐⭐（中级） 标签：#HTTP #连接复用

问题描述： keep-alive和多路复用都是连接复用技术，它们有什么区别？

参考答案要点：

• keep-alive：复用TCP连接，但请求仍需串行处理，存在队头阻塞
• 多路复用：请求可并行处理，通过流ID区分不同请求的数据
• HTTP/2的二进制分帧层是实现多路复用的基础

6. GET和POST方法有什么区别？

难度：⭐（基础） 标签：#HTTP #请求方法

问题描述： 请对比GET和POST两种HTTP请求方法的区别。

参考答案要点：

7. PUT和PATCH方法有什么区别？

难度：⭐⭐（中级） 标签：#HTTP #REST

问题描述： PUT和PATCH都是更新资源的方法，它们有什么区别？

参考答案要点：

• PUT：全量更新资源，替换整个资源对象
• PATCH：部分更新资源，只修改指定字段
• 两者都是幂等的，但PATCH更灵活，节省带宽

8. 常见的HTTP状态码有哪些？分别代表什么含义？

难度：⭐（基础） 标签：#HTTP #状态码

问题描述： 请列举常见的HTTP状态码及其含义。

参考答案要点：

9. 301和302重定向有什么区别？

难度：⭐⭐（中级） 标签：#HTTP #重定向

问题描述： 301和302都是重定向状态码，它们的区别是什么？

参考答案要点：

• 301(永久重定向)：搜索引擎会更新URL索引，权重转移到新URL
• 302(临时重定向)：搜索引擎保留原URL索引，权重不转移
• 307与302类似，但要求保持请求方法不变

10. HTTP请求方法中哪些是幂等的？

难度：⭐⭐（中级） 标签：#HTTP #幂等性

问题描述： 什么是幂等性？哪些HTTP方法是幂等的？

参考答案要点：

• 幂等方法：GET、HEAD、PUT、DELETE、OPTIONS
• 非幂等方法：POST、PATCH(视实现而定)
• 幂等性指多次执行结果相同，不会导致副作用累积

11. 什么是HTTP的长连接和短连接？

难度：⭐（基础） 标签：#HTTP #连接管理

问题描述： 请解释HTTP的长连接和短连接概念。

参考答案要点：

• 短连接：每个HTTP请求/响应后关闭TCP连接(Connection: close)
• 长连接：多个请求复用同一TCP连接(Connection: keep-alive)
• HTTP/1.1默认启用长连接
• 长连接减少TCP握手开销，但需管理连接超时

12. HTTP是无状态协议，如何保持用户登录状态？

难度：⭐⭐（中级） 标签：#HTTP #状态管理 #Cookie

问题描述： HTTP是无状态协议，如何实现用户登录状态的保持？

参考答案要点：

• Cookie/Session：服务器创建Session，通过Cookie传递Session ID
• Token(JWT)：服务器签发Token，客户端存储并在请求中携带
• LocalStorage/SessionStorage：前端存储Token等凭证
• 注意安全性：使用HttpOnly、Secure、SameSite属性

代码示例：

// Cookie设置（服务端）
Set-Cookie: sessionId=xxx; HttpOnly; Secure; SameSite=Strict; Max-Age=3600

// JWT存储（客户端）
localStorage.setItem('token', jwtToken);
// 请求时携带
fetch('/api/user', {
  headers: { 'Authorization': `Bearer ${token}` }
});

HTTPS和TLS/SSL

1. HTTP和HTTPS有什么区别？

难度：⭐（基础） 标签：#HTTPS #安全

问题描述： 请对比HTTP和HTTPS的主要区别。

参考答案要点：

2. 请详细描述HTTPS的握手过程(TLS 1.2)

难度：⭐⭐⭐（高级）⭐重点题目 标签：#HTTPS #TLS #握手过程

问题描述： 请详细说明HTTPS/TLS 1.2的完整握手过程。

参考答案要点：

1. Client Hello：客户端发送支持的TLS版本、加密套件列表、随机数(Random_C)
2. Server Hello：服务器返回确认的TLS版本、加密套件、证书、随机数(Random_S)
3. 验证证书：客户端验证证书合法性(CA签名、有效期、域名匹配)
4. 生成Pre-Master Secret：客户端生成第三个随机数，用服务器公钥加密后发送
5. 生成会话密钥：双方用三个随机数计算对称密钥(Session Key)
6. Finished：后续通信使用Session Key对称加密

客户端                              服务端
   |----- Client Hello ------------>|
   |<---- Server Hello + 证书 -------|
   |----- Pre-Master Secret ------->|
   |<---- Finished -----------------|
   |----- Finished ---------------->|
   |        加密通信开始              |

3. TLS 1.3相比TLS 1.2有哪些改进？

难度：⭐⭐⭐（高级） 标签：#TLS #TLS1.3

问题描述： TLS 1.3相比TLS 1.2有哪些重要改进？

参考答案要点：

• 握手更快：1-RTT完成握手(TLS 1.2需要2-RTT)，支持0-RTT恢复
• 更安全：废弃不安全的加密算法(RC4、MD5、SHA-1)
• 简化握手：将Server Hello和加密合并，减少往返次数
• 前向安全：强制使用ECDHE，保证会话密钥泄露不影响历史数据

4. 为什么HTTPS要使用非对称加密协商对称密钥？

难度：⭐⭐（中级） 标签：#HTTPS #加密

问题描述： HTTPS为什么采用非对称加密+对称加密的混合加密方案？

参考答案要点：

• 非对称加密(RSA/ECDHE)：安全性高，适合密钥交换，但速度慢(比对称加密慢100-1000倍)
• 对称加密(AES)：速度快，适合大量数据传输，但密钥分发困难
• 混合加密：用非对称加密安全地交换对称密钥，后续用对称加密传输数据
• 结合两者优点：安全性+性能

5. 数字证书是如何验证的？

难度：⭐⭐（中级） 标签：#HTTPS #证书 #CA

问题描述： 浏览器如何验证HTTPS服务器的数字证书？

参考答案要点：

• 浏览器内置受信任的CA(Certificate Authority)公钥
• 用CA公钥验证证书的数字签名
• 检查证书有效期、域名匹配、证书链完整性
• 验证证书是否被吊销(CRL/OCSP)

6. 什么是中间人攻击(MITM)？HTTPS如何防御？

难度：⭐⭐（中级） 标签：#HTTPS #安全 #MITM

问题描述： 什么是中间人攻击？HTTPS如何防御这种攻击？

参考答案要点：

• 中间人攻击：攻击者拦截并可能篡改通信双方的数据
• 防御机制：
  • 数字证书验证服务器身份
  • TLS加密防止数据被窃听
  • 证书固定(Certificate Pinning)防止伪造证书

7. HTTPS一定安全吗？有哪些潜在风险？

难度：⭐⭐⭐（高级） 标签：#HTTPS #安全

问题描述： HTTPS通信是否绝对安全？存在哪些潜在风险？

参考答案要点：

• 不完全安全，存在以下风险：
  • 伪造/劫持CA签发证书
  • 客户端信任恶意根证书
  • SSL剥离攻击(强制降级到HTTP)
  • 证书固定绕过
  • 本地代理工具(如Fiddler)可解密HTTPS

TCP/IP协议

1. OSI七层模型和TCP/IP四层模型分别是什么？

难度：⭐（基础） 标签：#TCP/IP #OSI #网络模型

问题描述： 请说明OSI七层模型和TCP/IP四层模型的层次结构。

参考答案要点：

OSI七层模型：

TCP/IP四层模型：

2. TCP和UDP有什么区别？

难度：⭐（基础）⭐重点题目 标签：#TCP #UDP #传输层

问题描述： 请对比TCP和UDP协议的主要区别。

参考答案要点：

3. TCP如何保证可靠传输？

难度：⭐⭐（中级） 标签：#TCP #可靠传输

问题描述： TCP协议通过哪些机制保证数据的可靠传输？

参考答案要点：

• 序列号与确认应答(ACK)：确保数据有序到达
• 超时重传：未收到ACK则重传
• 滑动窗口：实现流量控制
• 拥塞控制：慢启动、拥塞避免、快重传、快恢复
• 三次握手/四次挥手：确保连接可靠建立和关闭

4. 什么是TCP的滑动窗口？

难度：⭐⭐⭐（高级） 标签：#TCP #滑动窗口 #流量控制

问题描述： 请解释TCP滑动窗口的工作原理。

参考答案要点：

• 用于实现流量控制，协调发送方和接收方的数据传输速率
• 发送窗口：已发送但未确认的数据量
• 接收窗口：接收方缓冲区剩余空间
• 窗口大小动态调整，防止接收方被淹没

三次握手和四次挥手

1. 请描述TCP三次握手的过程

难度：⭐（基础）⭐重点题目⭐高频必考 标签：#TCP #三次握手

问题描述： 请详细描述TCP三次握手的完整过程。

参考答案要点：

客户端                    服务端
   |----- SYN(seq=x) ----->|
   |<-- SYN(seq=y) ACK(ack=x+1) --|
   |----- ACK(ack=y+1) ---->|
   |                        |
   |      连接建立成功       |

1. 第一次握手：客户端发送SYN包(seq=x)，进入SYN_SENT状态
2. 第二次握手：服务端回复SYN+ACK(seq=y, ack=x+1)，进入SYN_RCVD状态
3. 第三次握手：客户端发送ACK(ack=y+1)，双方进入ESTABLISHED状态

2. 为什么TCP握手需要三次？两次可以吗？

难度：⭐⭐（中级）⭐重点题目⭐高频必考 标签：#TCP #三次握手

问题描述： TCP握手为什么是三次？两次握手可以吗？

参考答案要点：

• 三次握手的目的是确认双方的发送和接收能力都正常
• 两次握手的问题：
  • 无法确认客户端的接收能力
  • 可能产生历史连接的初始化，造成资源浪费
  • 服务端无法确定客户端是否收到自己的SYN
• 三次是最小必要次数，四次不必要

3. 请描述TCP四次挥手的过程

难度：⭐（基础）⭐重点题目 标签：#TCP #四次挥手

问题描述： 请详细描述TCP四次挥手的完整过程。

参考答案要点：

客户端                    服务端
   |----- FIN(seq=u) ----->|
   |<----- ACK(ack=u+1) ----|
   |   (服务端继续发送数据)  |
   |<----- FIN(seq=w) -----|
   |----- ACK(ack=w+1) ---->|
   |    (等待2MSL后关闭)    |

1. 第一次挥手：客户端发送FIN，进入FIN_WAIT_1状态
2. 第二次挥手：服务端回复ACK，进入CLOSE_WAIT状态
3. 第三次挥手：服务端发送FIN，进入LAST_ACK状态
4. 第四次挥手：客户端回复ACK，进入TIME_WAIT状态

4. 为什么TCP挥手需要四次？三次可以吗？

难度：⭐⭐（中级）⭐重点题目 标签：#TCP #四次挥手

问题描述： TCP挥手为什么是四次？三次可以吗？

参考答案要点：

• TCP是全双工通信，双方需独立关闭发送通道
• 四次的原因：
  • 服务端收到FIN后可能还有数据要发送
  • 服务端需先回复ACK确认收到FIN
  • 等服务端数据发送完再发FIN
  • 客户端最后回复ACK
• 三次不可行：ACK和FIN不能合并发送，因为服务端可能还有数据未发送完

5. 什么是TIME_WAIT状态？为什么要等待2MSL？

难度：⭐⭐（中级） 标签：#TCP #TIME_WAIT

问题描述： 请解释TIME_WAIT状态及其等待2MSL的原因。

参考答案要点：

• TIME_WAIT：客户端发送最后一个ACK后进入的状态
• 等待2MSL的原因：
  • 确保最后一个ACK能被服务端收到(如果丢失可重传)
  • 防止已失效的连接请求报文出现在新连接中
  • MSL(Maximum Segment Lifetime)是报文最大生存时间
• 2MSL通常为1-4分钟

6. 三次握手过程中可以携带数据吗？

难度：⭐⭐（中级） 标签：#TCP #三次握手

问题描述： TCP三次握手过程中是否可以携带应用层数据？

参考答案要点：

• 第一次、第二次握手不能携带数据：防止SYN攻击
• 第三次握手可以携带数据：此时客户端已确认连接建立
• 如果第一次握手能携带数据，攻击者可发送大量数据造成服务器资源耗尽

7. SYN攻击是什么？如何防范？

难度：⭐⭐⭐（高级） 标签：#TCP #SYN攻击 #安全

问题描述： 什么是SYN攻击？如何防范？

参考答案要点：

• SYN攻击：攻击者发送大量伪造IP的SYN包，不回复ACK，导致服务端半连接队列满
• 防范措施：
  • SYN Cookies：不分配资源，用加密方式验证
  • 缩短SYN超时时间
  • 增大半连接队列
  • 防火墙过滤

DNS解析

1. DNS解析的过程是怎样的？

难度：⭐⭐（中级） 标签：#DNS #域名解析

问题描述： 请描述从输入域名到获取IP的完整DNS解析过程。

参考答案要点：

1. 浏览器缓存：检查是否缓存该域名IP
2. 系统缓存：查询操作系统DNS缓存和hosts文件
3. 路由器缓存：查询本地路由器
4. ISP DNS服务器：向运营商DNS服务器查询
5. 根域名服务器：返回顶级域名服务器地址
6. 顶级域名服务器：返回权威域名服务器地址
7. 权威域名服务器：返回最终的IP地址
8. 缓存结果：将IP缓存到各级缓存

2. DNS解析的优化方法有哪些？

难度：⭐⭐（中级） 标签：#DNS #性能优化

问题描述： 如何优化DNS解析性能？

参考答案要点：

• DNS预解析：<link rel="dns-prefetch" href="//example.com">
• 减少DNS查询：合并域名、使用CDN
• DNS缓存：合理设置TTL值
• HTTPDNS：绕过运营商DNS，直接通过HTTP获取IP
• TCP连接复用：减少重复DNS查询

3. 什么是DNS预解析(dns-prefetch)？

难度：⭐（基础） 标签：#DNS #预解析 #性能优化

问题描述： 什么是DNS预解析？如何使用？

参考答案要点：

• 提前解析页面中可能用到的域名
• 将解析结果缓存到系统缓存中
• 缩短后续请求的DNS解析时间
• 使用方式：<link rel="dns-prefetch" href="//example.com">
• 在HTTPS页面中需手动开启：<meta http-equiv="x-dns-prefetch-control" content="on">

代码示例：

<!-- 开启DNS预解析 -->
<meta http-equiv="x-dns-prefetch-control" content="on" />

<!-- 预解析特定域名 -->
<link rel="dns-prefetch" href="//cdn.example.com" />
<link rel="dns-prefetch" href="//api.example.com" />

4. DNS使用TCP还是UDP？

难度：⭐⭐（中级） 标签：#DNS #TCP #UDP

问题描述： DNS协议使用TCP还是UDP？什么情况下使用TCP？

参考答案要点：

• 主要使用UDP(53端口)：查询响应快，开销小
• 使用TCP的场景：
  • 响应数据超过512字节
  • 区域传输(主从DNS服务器同步)
  • DNSSEC安全扩展

CDN原理

1. CDN的工作原理是什么？

难度：⭐⭐（中级） 标签：#CDN #内容分发

问题描述： 请描述CDN的工作原理。

参考答案要点：

1. DNS解析：用户请求通过DNS解析到最近的CDN节点
2. 边缘节点响应：
   • 缓存命中(HIT)：直接返回缓存内容
   • 缓存未命中(MISS)：向源站请求并缓存内容
3. 多级缓存：Edge节点 → Mid层 → Origin Shield
4. 智能调度：根据用户地理位置、网络状况选择最优节点

2. CDN有哪些优化技巧？

难度：⭐⭐（中级） 标签：#CDN #性能优化

问题描述： 使用CDN时有哪些优化技巧？

参考答案要点：

• 多级缓存策略：Edge缓存热数据，Mid层缓存更大范围数据
• 智能内容刷新：合理设置Cache-Control的max-age
• 协议优化：启用HTTP/2或HTTP/3
• 压缩优化：Gzip/Brotli压缩
• 图片优化：WebP格式、自适应图片

3. CDN缓存和浏览器缓存有什么区别？

难度：⭐⭐（中级） 标签：#CDN #浏览器缓存

问题描述： CDN缓存和浏览器缓存有什么区别？

参考答案要点：

缓存机制

1. 浏览器的缓存机制是怎样的？

难度：⭐（基础）⭐重点题目 标签：#缓存 #浏览器缓存

问题描述： 请描述浏览器的缓存机制。

参考答案要点： 缓存检查顺序：Service Worker → Memory Cache → Disk Cache → Push Cache

缓存类型：

1. 强缓存：不发送请求，直接使用本地缓存

   • 响应码：200 (from memory cache / from disk cache)
   • 控制头：Cache-Control、Expires

2. 协商缓存：发送请求验证资源是否更新

   • 响应码：304 Not Modified
   • 控制头：Last-Modified/If-Modified-Since、ETag/If-None-Match

2. 强缓存和协商缓存有什么区别？

难度：⭐（基础）⭐重点题目 标签：#缓存 #强缓存 #协商缓存

问题描述： 强缓存和协商缓存有什么区别？

参考答案要点：

3. Cache-Control有哪些常用指令？

难度：⭐⭐（中级） 标签：#缓存 #Cache-Control

问题描述： 请列举Cache-Control的常用指令及其含义。

参考答案要点：

4. ETag和Last-Modified有什么区别？

难度：⭐⭐（中级） 标签：#缓存 #ETag #Last-Modified

问题描述： ETag和Last-Modified有什么区别？

参考答案要点：

5. 缓存优先级是怎样的？

难度：⭐⭐（中级） 标签：#缓存

问题描述： 浏览器缓存的优先级顺序是怎样的？

参考答案要点：

1. Pragma(HTTP/1.0)
2. Cache-Control(HTTP/1.1)
3. Expires
4. 强缓存失效后进入协商缓存
5. ETag优先级高于Last-Modified

跨域解决方案

1. 什么是跨域？为什么会发生跨域？

难度：⭐（基础）⭐重点题目 标签：#跨域 #同源策略

问题描述： 什么是跨域？为什么会发生跨域？

参考答案要点：

• 同源策略：协议、域名、端口三者都相同才是同源
• 跨域原因：浏览器安全策略限制不同源之间的资源访问
• 限制范围：
  • Cookie、LocalStorage、IndexedDB无法读取
  • DOM无法获取
  • AJAX请求无法发送

2. 解决跨域的方法有哪些？

难度：⭐（基础）⭐重点题目 标签：#跨域 #CORS

问题描述： 请列举解决跨域问题的方法。

参考答案要点：

1. CORS(跨域资源共享)：服务端设置Access-Control-Allow-Origin等响应头
2. JSONP：利用script标签不受同源策略限制
3. 代理服务器：开发环境配置devServer.proxy
4. Nginx反向代理：生产环境配置proxy_pass
5. postMessage：iframe跨页面通信
6. WebSocket：不受同源策略限制
7. document.domain：子域间跨域(已逐渐废弃)

3. CORS的预检请求(Preflight)是什么？

难度：⭐⭐（中级）⭐重点题目 标签：#跨域 #CORS #预检请求

问题描述： 什么是CORS预检请求？什么情况下会触发？

参考答案要点：

• 触发条件：非简单请求(非GET/HEAD/POST，或包含自定义头、Content-Type非标准值)
• 流程：先发送OPTIONS预检请求，确认允许后再发送实际请求
• 预检请求头：Origin、Access-Control-Request-Method、Access-Control-Request-Headers
• 优化：设置Access-Control-Max-Age缓存预检结果

代码示例：

// 服务端CORS配置（Express示例）
app.use((req, res, next) => {
  res.header("Access-Control-Allow-Origin", "*")
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE")
  res.header("Access-Control-Allow-Headers", "Content-Type, Authorization")
  res.header("Access-Control-Max-Age", "86400") // 缓存预检结果24小时
  next()
})

4. JSONP的原理是什么？有什么优缺点？

难度：⭐⭐（中级） 标签：#跨域 #JSONP

问题描述： 请说明JSONP的原理及其优缺点。

参考答案要点：

• 原理：利用script标签的src属性不受同源策略限制
• 实现：
  • 客户端定义回调函数
  • 动态创建script标签，URL携带callback参数
  • 服务端返回回调函数调用，数据作为参数
• 优点：兼容性好(支持老旧浏览器)
• 缺点：仅支持GET请求、存在XSS风险、无法处理错误

代码示例：

// JSONP实现
function jsonp(url, callbackName) {
  return new Promise((resolve, reject) => {
    const script = document.createElement("script")
    window[callbackName] = (data) => {
      resolve(data)
      document.body.removeChild(script)
      delete window[callbackName]
    }
    script.src = `${url}?callback=${callbackName}`
    document.body.appendChild(script)
  })
}

// 使用
jsonp("https://api.example.com/data", "handleData").then((data) =>
  console.log(data)
)

5. 简单请求和非简单请求有什么区别？

难度：⭐⭐（中级） 标签：#跨域 #CORS

问题描述： 什么是简单请求？简单请求和非简单请求有什么区别？

参考答案要点： 简单请求条件(同时满足)：

• 方法为GET、HEAD、POST
• Content-Type为application/x-www-form-urlencoded、multipart/form-data、text/plain
• 无自定义请求头

区别：

• 简单请求：直接发送，不触发预检
• 非简单请求：先发送OPTIONS预检请求

WebSocket

1. WebSocket是什么？与HTTP有什么区别？

难度：⭐（基础） 标签：#WebSocket #实时通信

问题描述： 什么是WebSocket？与HTTP有什么区别？

参考答案要点：

2. WebSocket的握手过程是怎样的？

难度：⭐⭐（中级） 标签：#WebSocket #握手

问题描述： 请描述WebSocket的握手过程。

参考答案要点：

1. 客户端发送HTTP Upgrade请求
   Plain Text

   GET /chat HTTP/1.1
   Host: server.example.com
   Upgrade: websocket
   Connection: Upgrade
   Sec-WebSocket-Key: dGhlIHNhbXBsZSBub25jZQ==

2. 服务端返回101 Switching Protocols
   Plain Text

   HTTP/1.1 101 Switching Protocols
   Upgrade: websocket
   Connection: Upgrade
   Sec-WebSocket-Accept: s3pPLMBiTxaQ9kYGzzhZRbK+xOo=

3. 连接建立，后续使用WebSocket协议通信

3. WebSocket心跳机制如何设计？

难度：⭐⭐（中级） 标签：#WebSocket #心跳机制

问题描述： WebSocket心跳机制如何设计？

参考答案要点：

• 目的：检测连接活性、防止NAT超时、及时释放僵尸连接
• 实现方案：
  • 客户端定时(如30秒)发送ping消息
  • 服务端回复pong消息
  • 超时未收到pong则判定连接断开，触发重连
• 心跳间隔：一般20-60秒，需小于NAT超时时间
• 重连策略：指数退避(1s, 2s, 4s, 8s...)

代码示例：

class WebSocketClient {
  constructor(url) {
    this.url = url
    this.ws = null
    this.heartbeatInterval = null
    this.reconnectDelay = 1000
  }

  connect() {
    this.ws = new WebSocket(this.url)

    this.ws.onopen = () => {
      this.startHeartbeat()
      this.reconnectDelay = 1000 // 重置重连延迟
    }

    this.ws.onclose = () => {
      this.stopHeartbeat()
      this.reconnect()
    }
  }

  startHeartbeat() {
    this.heartbeatInterval = setInterval(() => {
      if (this.ws.readyState === WebSocket.OPEN) {
        this.ws.send(JSON.stringify({ type: "ping" }))
      }
    }, 30000) // 30秒心跳
  }

  stopHeartbeat() {
    clearInterval(this.heartbeatInterval)
  }

  reconnect() {
    setTimeout(() => {
      this.connect()
      this.reconnectDelay = Math.min(this.reconnectDelay * 2, 30000)
    }, this.reconnectDelay)
  }
}

4. WebSocket、SSE、长轮询有什么区别？

难度：⭐⭐（中级） 标签：#WebSocket #SSE #长轮询

问题描述： WebSocket、SSE、长轮询有什么区别？

参考答案要点：

RESTful API设计

1. 什么是RESTful API？

难度：⭐（基础） 标签：#RESTful #API设计

问题描述： 什么是RESTful API？

参考答案要点：

• REST：Representational State Transfer，表现层状态转移
• 核心原则：
  • 资源URI标识：/users/123
  • HTTP方法表示操作：GET(查)、POST(增)、PUT(改)、DELETE(删)
  • 无状态：每个请求包含完整信息
  • 统一接口：一致的URL设计和响应格式

2. RESTful API的设计规范有哪些？

难度：⭐⭐（中级） 标签：#RESTful #API设计

问题描述： RESTful API有哪些设计规范？

参考答案要点：

• URL设计：
  • 使用名词复数：/users而非/user
  • 避免动词：用HTTP方法表示操作
  • 层级关系：/users/123/orders
• 状态码：正确使用HTTP状态码
• 版本控制：/v1/users或Header: Accept-Version: v1
• 过滤排序：/users?age=18&sort=name

3. RESTful API版本控制有哪些方式？

难度：⭐⭐（中级） 标签：#RESTful #版本控制

问题描述： RESTful API版本控制有哪些方式？

参考答案要点：

1. URL路径：/v1/users、/v2/users
2. 查询参数：/users?version=1
3. 请求头：Accept: application/vnd.api.v1+json
4. 自定义头：API-Version: 1

网络安全

1. XSS攻击是什么？有哪些类型？如何防范？

难度：⭐⭐（中级）⭐重点题目 标签：#安全 #XSS

问题描述： 什么是XSS攻击？有哪些类型？如何防范？

参考答案要点：

• XSS(Cross-Site Scripting)：跨站脚本攻击，攻击者注入恶意脚本
• 类型：
  • 存储型：恶意脚本存储在服务器(如评论区)
  • 反射型：恶意脚本在URL中，需诱导用户点击
  • DOM型：前端JS操作DOM时触发
• 防范：
  • 输入过滤和输出转义
  • 使用CSP(Content Security Policy)
  • HttpOnly Cookie
  • 现代框架自动转义

2. CSRF攻击是什么？如何防范？

难度：⭐⭐（中级）⭐重点题目 标签：#安全 #CSRF

问题描述： 什么是CSRF攻击？如何防范？

参考答案要点：

• CSRF(Cross-Site Request Forgery)：跨站请求伪造，诱导用户执行非预期操作
• 原理：利用用户已登录状态，在第三方网站发起请求
• 防范：
  • CSRF Token验证
  • SameSite Cookie属性
  • Referer/Origin校验
  • 二次确认(验证码、密码确认)

代码示例：

// CSRF Token实现
// 服务端：生成Token并嵌入页面
app.get("/form", (req, res) => {
  const csrfToken = generateToken()
  req.session.csrfToken = csrfToken
  res.render("form", { csrfToken })
})

// 客户端：提交时携带Token
fetch("/api/submit", {
  method: "POST",
  headers: {
    "X-CSRF-Token": csrfToken,
  },
  body: JSON.stringify(data),
})

// 服务端：验证Token
app.post("/api/submit", (req, res) => {
  if (req.headers["x-csrf-token"] !== req.session.csrfToken) {
    return res.status(403).send("CSRF验证失败")
  }
  // 处理请求
})

3. CSP是什么？如何配置？

难度：⭐⭐⭐（高级） 标签：#安全 #CSP

问题描述： 什么是CSP？如何配置？

参考答案要点：

• CSP(Content Security Policy)：内容安全策略，限制资源加载
• 配置方式：
  • HTTP响应头：Content-Security-Policy
  • meta标签：<meta http-equiv="Content-Security-Policy" content="...">
• 常用指令：
  • default-src：默认资源策略
  • script-src：脚本来源
  • style-src：样式来源
  • img-src：图片来源
  • frame-ancestors：防止点击劫持

代码示例：

<!-- CSP配置示例 -->
<meta
  http-equiv="Content-Security-Policy"
  content="default-src 'self'; 
               script-src 'self' 'unsafe-inline' https://cdn.example.com; 
               style-src 'self' 'unsafe-inline'; 
               img-src 'self' data: https:;
               frame-ancestors 'none';"
/>

4. 点击劫持(Clickjacking)是什么？如何防范？

难度：⭐⭐（中级） 标签：#安全 #点击劫持

问题描述： 什么是点击劫持？如何防范？

参考答案要点：

• 点击劫持：攻击者将目标网站嵌入透明iframe，诱导用户点击
• 防范：
  • X-Frame-Options响应头：DENY、SAMEORIGIN
  • CSP的frame-ancestors指令
  • JavaScript检测：window.self !== window.top时跳转

5. 什么是中间人攻击(MITM)？如何防范？

难度：⭐⭐（中级） 标签：#安全 #MITM

问题描述： 什么是中间人攻击？如何防范？

参考答案要点：

• 中间人攻击：攻击者拦截并可能篡改通信数据
• 防范措施：
  • 使用HTTPS加密通信
  • 证书固定(Certificate Pinning)
  • 不连接不可信WiFi
  • HSTS(HTTP Strict Transport Security)

6. localStorage和sessionStorage存储敏感信息有什么风险？

难度：⭐⭐（中级） 标签：#安全 #存储

问题描述： 使用localStorage和sessionStorage存储敏感信息有什么风险？

参考答案要点：

• 风险：XSS攻击可读取存储的数据
• 不应存储：JWT Token、密码、身份证号、银行卡号
• 安全存储建议：
  • 使用HttpOnly Cookie存储敏感凭证
  • 敏感数据加密存储
  • 设置过期时间
  • 使用sessionStorage比localStorage更安全(标签页关闭即清除)

性能优化

1. 从输入URL到页面渲染的完整流程中，有哪些关键性能节点？

难度：⭐⭐（中级） 标签：#性能优化 #页面加载

问题描述： 从输入URL到页面渲染的完整流程中，有哪些关键性能节点可以优化？

参考答案要点： 流程：DNS解析 → TCP连接 → TLS握手 → HTTP请求 → 资源下载 → 解析HTML → 构建DOM/CSSOM → 渲染树 → 布局 → 绘制 → 合成

优化点：

• DNS预解析
• TCP连接复用(keep-alive)
• 启用HTTP/2或HTTP/3
• 资源压缩(Gzip/Brotli)
• 代码分割和懒加载
• 使用CDN

2. 如何优化首屏加载速度？

难度：⭐⭐（中级）⭐重点题目 标签：#性能优化 #首屏加载

问题描述： 如何优化首屏加载速度？

参考答案要点：

• 资源优化：
  • 图片优化(WebP、懒加载)
  • 代码分割、Tree Shaking
  • Gzip/Brotli压缩
• 渲染优化：
  • SSR/SSG
  • 关键CSS内联
  • 异步加载非关键JS
• 网络优化：
  • CDN加速
  • HTTP缓存
  • HTTP/2或HTTP/3

3. HTTP/2和HTTP/3对性能优化有什么帮助？

难度：⭐⭐（中级） 标签：#HTTP/2 #HTTP/3 #性能优化

问题描述： HTTP/2和HTTP/3对性能优化有什么帮助？

参考答案要点： HTTP/2：

• 多路复用：减少TCP连接数
• 头部压缩：减少传输数据量
• 服务器推送：预推送关键资源

HTTP/3：

• 0-RTT握手：减少连接建立时间
• 无队头阻塞：丢包不影响其他流
• 连接迁移：网络切换保持连接

4. 什么是DNS预解析、预连接、预加载、预渲染？

难度：⭐⭐（中级） 标签：#性能优化 #预加载

问题描述： 请解释DNS预解析、预连接、预加载、预渲染的区别。

参考答案要点：

代码示例：

<!-- DNS预解析 -->
<link rel="dns-prefetch" href="//cdn.example.com" />

<!-- 预连接 -->
<link rel="preconnect" href="https://api.example.com" />

<!-- 预加载关键资源 -->
<link
  rel="preload"
  href="/fonts/main.woff2"
  as="font"
  type="font/woff2"
  crossorigin
/>
<link rel="preload" href="/css/critical.css" as="style" />

<!-- 预渲染下一页 -->
<link rel="prerender" href="/next-page.html" />

5. 懒加载和预加载有什么区别？

难度：⭐（基础） 标签：#性能优化 #懒加载 #预加载

问题描述： 懒加载和预加载有什么区别？

参考答案要点：

代码示例：

// 图片懒加载
const lazyImages = document.querySelectorAll("img[data-src]")

const imageObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      const img = entry.target
      img.src = img.dataset.src
      img.removeAttribute("data-src")
      observer.unobserve(img)
    }
  })
})

lazyImages.forEach((img) => imageObserver.observe(img))

复习建议与重点题目

复习建议

1. 循序渐进：先掌握基础题，再深入中级和高级题目
2. 理解原理：不仅要记住答案，更要理解背后的原理
3. 动手实践：通过抓包工具(如Wireshark)观察实际通信过程
4. 结合项目：将知识点与实际项目经验结合，面试时更有说服力

重点题目推荐（⭐高频必考）