前端网络通信实战指南
🎯 设计理念: 以前端开发者视角出发，从"能用"到"会调"到"深度理解"，每篇都有真实案例和可运行代码。
┌────────────────────────────────────────────────────────────────────────┐
│ 前端网络知识体系 │
├────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────┐ ┌─────────────┐ ┌─────────────┐ │
│ │ 基础篇 │ │ 实践篇 │ │ 进阶篇 │ │
│ │ (协议原理) │───▶│ (开发场景) │───▶│ (优化调试) │ │
│ └─────────────┘ └─────────────┘ └─────────────┘ │
│ │ │ │ │
│ ▼ ▼ ▼ │
│ HTTP/HTTPS/TCP 请求封装/代理 性能优化/安全 │
│ 协议演变/DNS 流式通信/文件 抓包调试/监控 │
│ │
└────────────────────────────────────────────────────────────────────────┘📚 目录结构
一、基础篇：协议与原理
| 文件 | 主题 | 核心内容 | 真实案例 |
|---|---|---|---|
| 01-core-http-evolution.md | HTTP 协议演变 | HTTP/1.1 → HTTP/2 → HTTP/3 差异 | Chrome DevTools 对比分析 |
| 02-core-https-tls.md | HTTPS 与 TLS | 握手流程、证书链、加密原理 | Let's Encrypt 证书配置 |
| 03-core-tcp-dns.md | TCP/DNS 基础 | 三次握手、DNS 解析优化 | dns-prefetch 实战 |
二、实践篇：前端开发场景
| 文件 | 主题 | 核心内容 | 真实案例 |
|---|---|---|---|
| 04-practice-request-layer.md 🔥 | 请求层封装 | Axios 封装、拦截器、错误处理 | 企业级请求库设计 |
| 05-practice-proxy-cors.md 🔥 | 代理与跨域 | 开发代理、生产反向代理、CORS | Vite/Nginx 代理配置 |
| 06-practice-streaming.md ⭐ | 流式通信 | SSE/WebSocket/Fetch Streaming | LLM 打字机效果实现 |
| 07-practice-file-transfer.md | 文件传输 | 上传下载、断点续传、大文件分片 | OSS 直传方案 |
三、安全篇：攻防与防护
| 文件 | 主题 | 核心内容 | 真实案例 |
|---|---|---|---|
| 09-security-xss-csrf.md 🔥 | XSS/CSRF 防护 | 攻击原理、防御方案、框架处理 | Vue/React 安全实践 |
| 10-security-mitm.md ⭐ | 中间人攻击 | 攻击原理、证书劫持、防护策略 | Charles 抓包原理分析 |
| 11-security-api.md | API 安全 | 认证鉴权、签名验证、防重放 | JWT/OAuth 2.0 实战 |
四、优化篇：性能与调试
| 文件 | 主题 | 核心内容 | 真实案例 |
|---|---|---|---|
| 12-optimize-cache.md 🔥 | 缓存策略 | 强缓存、协商缓存、Service Worker | SPA 缓存最佳实践 |
| 14-debug-network.md ⭐ | 网络调试 | DevTools/Charles/Wireshark | 线上问题排查指南 |
五、深入篇：协议底层
| 文件 | 主题 | 核心内容 | 真实案例 |
|---|---|---|---|
| 16-deep-http2.md | HTTP/2 深度 | 二进制帧、多路复用、Server Push | Nginx HTTP/2 配置 |
| 17-deep-http3-quic.md | HTTP/3 与 QUIC | 0-RTT、连接迁移、无队头阻塞 | Cloudflare QUIC 实践 |
| 18-deep-websocket.md | WebSocket 深度 | 握手协议、帧格式、心跳保活 | 自定义协议设计 |
| 19-practice-graphql.md | GraphQL | 查询与变更、Apollo Client | 缓存策略 |
🗺️ 学习路线图
学习路径建议
│
┌───────────────────────────┼───────────────────────────┐
│ │ │
▼ ▼ ▼
┌───────────┐ ┌───────────┐ ┌───────────┐
│ 初级前端 │ │ 中级前端 │ │ 高级前端 │
│ 0-1 年经验 │ │ 1-3 年经验 │ │ 3+ 年经验 │
└─────┬─────┘ └─────┬─────┘ └─────┬─────┘
│ │ │
▼ ▼ ▼
01 → 04 → 05 04 → 05 → 06 10 → 16 → 17
HTTP基础 请求封装 安全攻防
请求封装 代理配置 协议深度
代理配置 流式通信 性能调优
│ │ │
▼ ▼ ▼
09 → 12 07 → 09 → 12 14 → 15 → 18
安全基础 文件传输 网络调试
缓存入门 安全防护 监控上报
缓存策略 协议设计💡 核心亮点
1. 代理配置全景图 (05-practice-proxy-cors.md)
┌─────────────────────────────────────────────────────────────────────────┐
│ 前端代理全景图 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 开发环境 生产环境 │
│ ──────── ──────── │
│ │
│ ┌─────────┐ proxy ┌─────────┐ ┌─────────┐ reverse ┌─────────┐ │
│ │ Browser │ ───────▶ │ Vite │ │ Browser │ ──────▶ │ Nginx │ │
│ │ :5173 │ │ DevSrv │ │ │ proxy │ │ │
│ └─────────┘ └────┬────┘ └─────────┘ └────┬────┘ │
│ │ │ │
│ ▼ ▼ │
│ ┌─────────┐ ┌─────────┐ │
│ │ Backend │ │ Backend │ │
│ │ :3000 │ │ Cluster │ │
│ └─────────┘ └─────────┘ │
│ │
│ 配置: vite.config.ts 配置: nginx.conf │
│ ──────────────────── ──────────────── │
│ server: { location /api/ { │
│ proxy: { proxy_pass http://backend; │
│ '/api': { proxy_set_header Host $host; │
│ target: 'http://localhost:3000' } │
│ } } │
│ } │
│ } │
│ │
└─────────────────────────────────────────────────────────────────────────┘2. 中间人攻击原理 (10-security-mitm.md)
┌─────────────────────────────────────────────────────────────────────────┐
│ MITM 中间人攻击原理 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 正常 HTTPS 连接: │
│ ─────────────── │
│ │
│ ┌────────┐ TLS 加密隧道 ┌────────┐ │
│ │ Client │ ◀══════════════════════════▶ │ Server │ │
│ └────────┘ └────────┘ │
│ │
│ 中间人攻击: │
│ ────────── │
│ │
│ ┌────────┐ 伪造证书 ┌────────┐ 真实证书 ┌────────┐ │
│ │ Client │ ◀──────────▶ │ MITM │ ◀──────────▶ │ Server │ │
│ └────────┘ │ (攻击者)│ └────────┘ │
│ │ └────────┘ │ │
│ │ │ │ │
│ │ 1. 截获请求 │ 3. 转发请求 │ │
│ │ 2. 解密数据 │ 4. 返回响应 │ │
│ │ 5. 重新加密返回 │ │ │
│ │
│ 为什么 Charles 能抓 HTTPS? │
│ ───────────────────────── │
│ 1. 用户手动安装并信任 Charles 根证书 │
│ 2. Charles 为每个域名动态生成伪证书 │
│ 3. 浏览器信任该伪证书，建立 TLS 连接 │
│ 4. Charles 解密数据后，用真实证书连接目标服务器 │
│ │
└─────────────────────────────────────────────────────────────────────────┘3. LLM 流式响应架构 (06-practice-streaming.md)
┌─────────────────────────────────────────────────────────────────────────┐
│ LLM 流式响应完整架构 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────┐ POST /chat ┌──────────────┐ │
│ │ React UI │ ──────────────────▶ │ BFF/Edge │ │
│ │ │ │ Function │ │
│ │ ┌────────┐ │ └──────┬───────┘ │
│ │ │useSWR │ │ │ │
│ │ │Mutation│ │ │ stream: true │
│ │ └────────┘ │ ▼ │
│ │ │ │ ┌──────────────┐ │
│ │ │ │ ◀──────────────── │ OpenAI API │ │
│ │ ▼ │ SSE: data: {...} │ GPT-4 │ │
│ │ ┌────────┐ │ data: {...} └──────────────┘ │
│ │ │Markdown│ │ data: [DONE] │
│ │ │Renderer│ │ │
│ │ └────────┘ │ │
│ └──────────────┘ │
│ │
│ 数据流: │
│ ────── │
│ fetch() → response.body (ReadableStream) │
│ → reader.read() (Uint8Array chunks) │
│ → TextDecoder.decode() (string) │
│ → 解析 SSE "data: {...}" │
│ → JSON.parse() → delta.content │
│ → setState() → UI 更新 │
│ │
└─────────────────────────────────────────────────────────────────────────┘4. 缓存决策流程 (12-optimize-cache.md)
┌─────────────────────────────────────────────────────────────────────────┐
│ 浏览器缓存决策流程 │
├─────────────────────────────────────────────────────────────────────────┤
│ │
│ 请求资源 │
│ │ │
│ ▼ │
│ ┌───────────────┐ │
│ │ 有本地缓存？ │ │
│ └───────┬───────┘ │
│ Yes │ │ No │
│ ┌────────────┘ └────────────┐ │
│ ▼ ▼ │
│ ┌───────────────┐ ┌───────────────┐ │
│ │ Cache-Control │ │ 发起请求 │ │
│ │ 是否过期？ │ │ 200 OK │ │
│ └───────┬───────┘ └───────────────┘ │
│ Yes │ │ No │
│ ┌────────┘ └────────┐ │
│ ▼ ▼ │
│ 协商缓存 强缓存命中 │
│ ┌───────────────┐ ┌───────────────┐ │
│ │ If-None-Match │ │ 200 (from │ │
│ │ If-Modified- │ │ memory/disk │ │
│ │ Since │ │ cache) │ │
│ └───────┬───────┘ └───────────────┘ │
│ │ │
│ ▼ │
│ ┌───────────────┐ │
│ │ 资源变化？ │ │
│ └───────┬───────┘ │
│ Yes │ │ No │
│ ┌────┘ └────┐ │
│ ▼ ▼ │
│ 200 OK 304 Not Modified │
│ 新资源 使用本地缓存 │
│ │
└─────────────────────────────────────────────────────────────────────────┘📁 代码示例
examples/
├── request-layer/
│ └── axios-wrapper.ts # 企业级 Axios 封装 (Token刷新/重试/取消)
│
├── streaming/
│ └── llm-typewriter.ts # LLM 打字机效果 (React Hook)
│
├── security/
│ └── api-signature.ts # API 签名验证 (防篡改/防重放)
│
└── sse-typewriter.js # SSE 基础示例🔥 面试高频专题
请求与通信
- [ ] Axios 拦截器实现原理？如何实现请求重试？
- [ ] 开发环境代理和生产环境代理有什么区别？
- [ ] WebSocket 和 SSE 的使用场景？如何选择？
- [ ] 如何实现大文件分片上传和断点续传？
安全防护
- [ ] XSS 和 CSRF 的区别？Vue/React 如何防护？
- [ ] 什么是中间人攻击？为什么 Charles 能抓 HTTPS？
- [ ] CORS 的完整流程？预检请求何时触发？
- [ ] JWT 和 Session 的区别？各自的安全风险？
性能优化
- [ ] 强缓存和协商缓存的区别？如何配置？
- [ ] HTTP/2 相比 HTTP/1.1 有哪些优化？
- [ ] 如何分析和优化首屏网络请求？
- [ ] CDN 的工作原理？如何处理缓存刷新？
协议深度
- [ ] HTTPS 握手的完整过程？
- [ ] HTTP/2 的多路复用如何解决队头阻塞？
- [ ] HTTP/3 为什么使用 UDP？
- [ ] WebSocket 的握手协议和帧格式？
📖 推荐阅读顺序
日常开发必读 (按重要性排序):
- 🔥 04-practice-request-layer.md - 请求封装
- 🔥 05-practice-proxy-cors.md - 代理与跨域
- 🔥 09-security-xss-csrf.md - 安全防护
- 🔥 12-optimize-cache.md - 缓存策略
LLM 应用开发:
- ⭐ 06-practice-streaming.md - 流式通信
面试深度准备:
- ⭐ 10-security-mitm.md - 中间人攻击
- ⭐ 14-debug-network.md - 网络调试
- 16-deep-http2.md - HTTP/2 深度
- 17-deep-http3-quic.md - HTTP/3 与 QUIC