前端网络优化：别再让你的用户等得花儿都谢了
前端网络优化：别再让你的用户等得花儿都谢了
各位前端同行，咱们今天聊聊前端网络优化。别告诉我你还在让用户等得花儿都谢了，那感觉就像在等蜗牛爬——慢得让人崩溃。
为什么你需要网络优化
最近看到一个项目，网络请求做得一塌糊涂，每次页面加载都要发送20多个请求，我差点当场去世。我就想问：你是在开发应用还是在测试服务器的承受能力？网络优化可以显著减少请求时间，提高用户体验。
反面教材
// 反面教材：糟糕的网络请求 async function fetchData() { // 串行请求 const users = await fetch('https://api.example.com/users').then(res => res.json()); const posts = await fetch('https://api.example.com/posts').then(res => res.json()); const comments = await fetch('https://api.example.com/comments').then(res => res.json()); const tags = await fetch('https://api.example.com/tags').then(res => res.json()); const categories = await fetch('https://api.example.com/categories').then(res => res.json()); return { users, posts, comments, tags, categories }; }毒舌点评：这代码，我看了都替你的用户着急。串行请求，你是想让用户等到天荒地老吗？一个请求完成后才开始下一个请求，这得多慢啊？
前端网络优化的正确姿势
1. 并行请求
使用 Promise.all 并行发送请求，减少总请求时间。
// 正确姿势：并行请求 async function fetchData() { // 并行请求 const [users, posts, comments, tags, categories] = await Promise.all([ fetch('https://api.example.com/users').then(res => res.json()), fetch('https://api.example.com/posts').then(res => res.json()), fetch('https://api.example.com/comments').then(res => res.json()), fetch('https://api.example.com/tags').then(res => res.json()), fetch('https://api.example.com/categories').then(res => res.json()) ]); return { users, posts, comments, tags, categories }; }毒舌点评：早这么做，你的请求时间早减半了。并行发送请求，同时处理多个请求，这多快啊？
2. 缓存请求结果
缓存请求结果，避免重复请求，减少网络流量。
// 正确姿势：缓存请求结果 const cache = new Map(); async function fetchWithCache(url) { if (cache.has(url)) { return cache.get(url); } const response = await fetch(url); const data = await response.json(); cache.set(url, data); return data; } // 使用缓存 async function fetchData() { const users = await fetchWithCache('https://api.example.com/users'); const posts = await fetchWithCache('https://api.example.com/posts'); const comments = await fetchWithCache('https://api.example.com/comments'); return { users, posts, comments }; }毒舌点评：早这么做，你的重复请求早减少了。缓存请求结果，避免重复请求，这多高效啊？
3. 减少请求次数
使用批量接口，减少请求次数，提高效率。
// 正确姿势：减少请求次数 // 后端提供批量接口 async function fetchData() { const response = await fetch('https://api.example.com/batch', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ endpoints: ['/users', '/posts', '/comments', '/tags', '/categories'] }) }); const data = await response.json(); return data; }毒舌点评：早这么做，你的请求次数早减少了。使用批量接口，一次请求获取所有数据，这多高效啊？
4. 使用 CDN
使用 CDN 加速静态资源加载，减少请求时间。
<!-- 正确姿势：使用 CDN --> <script src="https://cdn.example.com/app.js"></script> <link rel="stylesheet" href="https://cdn.example.com/styles.css">毒舌点评：早这么做，你的静态资源早加载快了。CDN 可以将资源缓存到离用户最近的节点，这多快啊？
5. 启用压缩
启用 gzip 或 brotli 压缩，减少数据传输大小。
# 正确姿势：启用压缩 gzip on; gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript; gzip_min_length 1024; gzip_comp_level 6; gzip_buffers 16 8k; gzip_http_version 1.1; gzip_vary on;毒舌点评：早这么做，你的数据传输大小早减少了。启用压缩，减少数据传输时间，这多快啊？
6. 使用 HTTP/2 或 HTTP/3
使用 HTTP/2 或 HTTP/3，支持多路复用，减少请求时间。
# 正确姿势：使用 HTTP/2 listen 443 ssl http2;毒舌点评：早这么做，你的请求时间早减少了。HTTP/2 支持多路复用，同时处理多个请求，这多快啊？
实战技巧：前端网络优化指南
- 并行请求：使用 Promise.all 并行发送请求，减少总请求时间
- 缓存请求结果：避免重复请求，减少网络流量
- 减少请求次数：使用批量接口，一次请求获取所有数据
- 使用 CDN：加速静态资源加载，减少请求时间
- 启用压缩：减少数据传输大小，提高传输速度
- 使用 HTTP/2 或 HTTP/3：支持多路复用，减少请求时间
- 预加载：预加载关键资源，提高首屏加载速度
- 懒加载：按需加载资源，减少初始加载时间
- 使用 WebSocket：实时通信，减少 HTTP 请求
- 监控网络性能：使用浏览器开发工具监控网络性能，识别问题
前端网络优化不是可选的，是必须的。别再让你的用户等得花儿都谢了——优化一下，你的应用会更流畅，用户体验会更好。