浏览器网络协议
1. HTTP 缓存机制
题目：谈谈 HTTP 缓存机制，强缓存和协商缓存的区别
难度： ★★
考点： 网络协议
答案要点：
HTTP 缓存通过减少重复请求来提升性能，分为浏览器本地判断的强缓存和需服务器确认的协商缓存。
- 强缓存： 使用
Cache-Control(max-age) 或Expires，命中时不发送请求 - 协商缓存： 使用
ETag/If-None-Match或Last-Modified/If-Modified-Since（优先级更高） - 优先级： Cache-Control 优先级高于 Expires，ETag 优先级高于 Last-Modified
- 状态码： 强缓存返回 200 (from cache)，协商缓存命中返回 304
常见坑：
- 认为 304 也会传输完整的响应体
- 忽略了 Ctrl+F5 强制刷新对缓存的影响
追问：
- 为什么 ETag 比 Last-Modified 更可靠？
题目：谈谈你对 HTTP 缓存机制的理解
难度： ★
考点： 网络协议、性能优化
答案要点：
HTTP 缓存是通过在客户端存储资源副本，减少重复请求，从而提升页面加载速度的一种机制。
- 强缓存： 利用 Expires（绝对时间）或 Cache-Control（相对时间，优先级更高）判断资源是否过期，命中则直接从本地读取
- 协商缓存： 当强缓存失效，通过
Last-Modified/If-Modified-Since或ETag/If-None-Match（优先级更高）向服务器验证资源是否有更新 - 状态码： 强缓存命中返回 200 (from disk/memory cache)，协商缓存命中且资源未变返回 304
- 存储位置： 浏览器会根据资源大小和频率决定存入 memory cache（内存）或 disk cache（硬盘）
常见坑：
- 误以为 304 也是强缓存
- 忽略了
Cache-Control: no-cache（进入协商缓存）与no-store（彻底不缓存）的区别
追问：
- 为什么 ETag 的优先级比 Last-Modified 高？
- 在大流量场景下，如何利用缓存策略减少服务器压力？
2. HTTP 状态码
题目：常见的 HTTP 状态码有哪些？301 和 302 有什么区别？
难度： ★
考点： 网络协议基础
答案要点：
HTTP 状态码用于表示服务器对请求的处理结果，分为五类（1xx 到 5xx）。
| 分类 | 状态码 | 含义 |
|---|---|---|
| 2xx 成功 | 200 | 请求成功 |
| 204 | No Content | |
| 3xx 重定向 | 301 | 永久重定向（浏览器会缓存） |
| 302 | 临时重定向 | |
| 304 | Not Modified（协商缓存） | |
| 4xx 客户端错误 | 400 | Bad Request |
| 401 | Unauthorized | |
| 403 | Forbidden | |
| 404 | Not Found | |
| 5xx 服务端错误 | 500 | Internal Server Error |
| 502 | Bad Gateway | |
| 503 | Service Unavailable |
301 vs 302：
- 301：永久重定向，浏览器会缓存，下次直接访问新地址
- 302：临时重定向，浏览器不会缓存，下次仍访问原地址
3. HTTPS 握手过程
题目：请解释一下 HTTPS 的握手过程
难度： ★★★
考点： 网络安全
答案要点：
HTTPS 在 HTTP 基础上加入了 SSL/TLS 加密，握手过程用于协商加密算法和交换密钥。
TLS 1.2 握手流程：
- Client Hello： 客户端发送支持的 TLS 版本、加密套件列表、随机数
- Server Hello： 服务端选择 TLS 版本和加密套件，发送随机数
- Certificate： 服务端发送证书（包含公钥）
- Server Key Exchange： （可选）交换密钥参数
- Server Hello Done： 服务端问候结束
- Client Key Exchange： 客户端生成预主密钥，用服务端公钥加密发送
- Change Cipher Spec： 双方通知切换到加密通信
- Finished： 握手完成，开始加密通信
TLS 1.3 优化：
- 握手次数从 2-RTT 减少到 1-RTT
- 删除了不安全的加密算法
- 支持 0-RTT 会话恢复
4. 跨域解决方案
题目：什么是跨域？常见的解决方案有哪些？
难度： ★★
考点： 浏览器安全
答案要点：
跨域是浏览器的同源策略限制，协议、域名、端口任一不同即构成跨域。
| 方案 | 原理 | 适用场景 |
|---|---|---|
| CORS | 服务端设置 Access-Control-Allow-Origin | 标准方案 |
| JSONP | 利用 script 标签不受同源限制 | 仅 GET 请求 |
| 代理服务器 | 同源服务器转发请求 | 开发环境 |
| Nginx 反向代理 | 服务器端转发 | 生产环境 |
| postMessage | 跨窗口通信 | 页面间通信 |
| WebSocket | 不受同源策略限制 | 实时通信 |
CORS 简单请求条件：
- 方法：GET、HEAD、POST
- 头部：Accept、Accept-Language、Content-Language、Content-Type（仅限 application/x-www-form-urlencoded、multipart/form-data、text/plain）
5. TCP 与 UDP
题目：TCP 和 UDP 的区别是什么？
难度： ★★
考点： 传输层协议
答案要点：
| 特性 | TCP | UDP |
|---|---|---|
| 连接 | 面向连接 | 无连接 |
| 可靠性 | 可靠传输 | 不可靠 |
| 顺序 | 保证数据顺序 | 不保证 |
| 流量控制 | 有 | 无 |
| 拥塞控制 | 有 | 无 |
| 头部开销 | 20 字节 | 8 字节 |
| 适用场景 | HTTP、FTP | DNS、视频流、游戏 |
TCP 三次握手：
- SYN：客户端发送同步序列号
- SYN+ACK：服务端确认并发送自己的序列号
- ACK：客户端确认
TCP 四次挥手：
- FIN：主动方发送结束请求
- ACK：被动方确认
- FIN：被动方发送结束请求
- ACK：主动方确认
6. HTTP 版本演进
题目：HTTP/1.0、HTTP/1.1、HTTP/2、HTTP/3 有什么区别？
难度： ★★★
考点： HTTP 协议
答案要点：
| 版本 | 主要特性 |
|---|---|
| HTTP/1.0 | 短连接，每次请求新建 TCP 连接 |
| HTTP/1.1 | 持久连接（Keep-Alive）、管道化（理论上）、分块传输 |
| HTTP/2 | 二进制分帧、多路复用、头部压缩（HPACK）、服务器推送 |
| HTTP/3 | 基于 QUIC（UDP）、0-RTT 握手、连接迁移 |
HTTP/2 多路复用：
- 单个 TCP 连接可并发多个请求
- 解决 HTTP/1.1 的队头阻塞问题
- 但 TCP 层的队头阻塞仍存在
HTTP/3 QUIC：
- 基于 UDP，在应用层实现可靠传输
- 彻底解决队头阻塞
- 连接迁移（IP 变化仍可保持连接）
7. SSE 与 WebSocket
题目：SSE（Server-Sent Events）和 WebSocket 有什么区别？为什么 AI 对话场景多用 SSE？
难度： ★★
考点： 网络协议、AI 交互基础
答案要点：
SSE 是一种基于 HTTP 的单向推送协议，相比 WebSocket 更加轻量且原生支持断线重连。
| 特性 | SSE | WebSocket |
|---|---|---|
| 方向 | 单向（服务端到客户端） | 全双工双向通信 |
| 协议 | 基于标准 HTTP | 需要独立握手 |
| 重连 | 原生支持自动重连 | 需手动实现心跳 |
| 数据格式 | 文本 | 文本和二进制 |
| 代理友好 | 是 | 可能受防火墙限制 |
AI 场景选择 SSE 的原因：
- 大模型生成是单向流式输出，不需要客户端频繁反馈
- SSE 协议开销更小，实现更简单
- 基于 HTTP，对代理服务器和防火墙更友好
代码示例：
javascript
// SSE 客户端
const eventSource = new EventSource('/api/stream');
eventSource.onmessage = (event) => {
console.log(event.data);
};
eventSource.onerror = (error) => {
console.error('SSE error:', error);
};
// 关闭连接
eventSource.close();常见坑：
- SSE 在 HTTP/1.1 下有浏览器连接数限制（通常为 6 个）
- 认为 SSE 可以发送二进制数据（原生仅支持文本）
追问：
- 如何在前端处理 SSE 的数据流解析？
- 如果需要用户在生成过程中实时中断，SSE 应该怎么做？
8. DNS 解析
题目：DNS 解析的过程是怎样的？
难度： ★★
考点： 网络基础
答案要点：
DNS 解析是将域名转换为 IP 地址的过程。
解析流程：
- 浏览器缓存 -> 2. 操作系统缓存 -> 3. 本地 DNS 服务器 -> 4. 根域名服务器 -> 5. 顶级域名服务器 -> 6. 权威域名服务器
DNS 记录类型：
- A：IPv4 地址
- AAAA：IPv6 地址
- CNAME：别名记录
- MX：邮件交换记录
- TXT：文本记录
- NS：域名服务器记录
DNS 优化：
- DNS 预解析：
<link rel="dns-prefetch" href="//example.com"> - 减少 DNS 查询：域名收敛
- 使用 CDN
9. 输入 URL 到页面显示
题目：从输入 URL 到页面显示，发生了什么？
难度： ★★★
考点： 浏览器整体流程
答案要点：
- URL 解析： 协议、域名、路径、参数解析
- DNS 解析： 域名转换为 IP 地址
- 建立连接： TCP 三次握手（HTTPS 还需 TLS 握手）
- 发送 HTTP 请求： 构建请求报文发送
- 服务器处理： 服务端处理请求
- 接收响应： 接收 HTTP 响应
- 解析 HTML： 构建 DOM 树
- 解析 CSS： 构建 CSSOM 树
- 合并渲染树： DOM + CSSOM = Render Tree
- 布局（Layout）： 计算元素位置和大小
- 绘制（Paint）： 绘制页面到屏幕
- 合成（Composite）： 图层合成
优化点：
- DNS 预解析
- 预连接：
<link rel="preconnect"> - 预加载：
<link rel="preload"> - 预渲染：
<link rel="prerender">