网络通信与前端性能优化
1. 前端常用网络通信方式对比
| 方式 |
场景说明 |
特点 |
XMLHttpRequest |
老式 AJAX 通信 |
回调繁琐，兼容性好 |
fetch API |
现代标准，逐步取代 XHR |
Promise 基础，更简洁 |
axios |
基于 xhr 的封装库 |
拦截器、默认配置、适配性强 |
| WebSocket |
实时通信，如聊天室、推送 |
长连接，双向通信 |
| SSE |
服务端单向推送（Server-Sent） |
比 WebSocket 简单，单向 |
2. fetch API 核心特性
fetch('/api/data')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));
特点：
- 默认不带 Cookie（需设置
credentials: 'include'）；
- 响应状态码错误不会触发 catch（要手动判断
res.ok）；
- 不支持请求/响应拦截（需封装）；
3. 网络请求优化策略
| 技术 |
说明 |
| 请求合并 |
GraphQL、批量接口 |
| 懒加载 / 预加载 |
图片懒加载（loading="lazy"）、prefetch 标签 |
| CDN 加速 |
静态资源分发，地理就近请求 |
| 本地缓存 |
localStorage / sessionStorage / indexedDB |
| 强缓存 / 协商缓存 |
HTTP 头部配置：Cache-Control、ETag |
| 请求去重与节流 |
对并发相同请求进行防抖、去重 |
4. 性能优化核心指标（Web Vitals）
| 指标 |
说明 |
| FCP (First Contentful Paint) |
首次内容绘制时间 |
| LCP (Largest Contentful Paint) |
最大内容绘制时间（首屏加载关键） |
| TTI (Time to Interactive) |
用户可交互的时间点 |
| CLS (Cumulative Layout Shift) |
页面布局稳定性 |
| TBT (Total Blocking Time) |
阻塞主线程时间 |
📌 Chrome DevTools / Lighthouse 可直接检测这些指标
5. 首屏加载优化策略（面试重点）
✅ 减少首屏资源体积
- Tree Shaking / SplitChunks
- 图片压缩（webp / AVIF）
- CDN 加载第三方库（如 Vue/React）
✅ 减少请求数
- 合并 CSS/JS 文件
- 使用 SVG Sprite 代替多张图标
- Base64 小图内联
✅ 异步加载不影响首屏资源
- 动态 import 非首屏组件
- 使用
async / defer 加载脚本
- 路由懒加载 + Skeleton 骨架屏
6. 浏览器缓存机制
| 类型 |
说明 |
| 强缓存 |
状态码 200，读取本地缓存（Cache-Control: max-age） |
| 协商缓存 |
状态码 304，请求服务器判断是否变更（ETag） |
| Cookie |
小数据，自动携带，适合登录态 |
| localStorage |
大容量（5MB），持久保存 |
| sessionStorage |
生命周期短，刷新页面清除 |
| indexedDB |
结构化数据缓存，适合离线应用 |
7. 面试高频问题精讲
📌 Q1：浏览器如何实现缓存优化？
答：
- 利用 HTTP 的
Cache-Control / ETag 实现静态资源缓存；
- 对于版本化资源，可设置长时间强缓存（
max-age=31536000）；
- 使用内容哈希（如
main.abc123.js）实现更新检测；
- 脚本/样式外链并合理使用
async / defer；
📌 Q2：首屏加载太慢怎么办？
- 优化图片和资源大小；
- 使用 SSR 或 CSR + Skeleton 加速渲染；
- 优化依赖树，减少初始打包；
- 使用
link rel="preload" 预加载关键资源；
- 开启 gzip / brotli 传输压缩。
📌 Q3：fetch 和 axios 的区别？
| 特性 |
fetch |
axios |
| 基础实现 |
原生 API |
封装于 XMLHttpRequest |
| 默认行为 |
不自动处理状态码 |
错误自动抛出异常 |
| 拦截器 |
无 |
支持请求与响应拦截 |
| 请求取消 |
AbortController |
CancelToken (v1) / AbortSignal (v2) |
📌 Q4：你如何理解懒加载和预加载？
- 懒加载（Lazy Load）：按需加载，延迟加载不在视口的资源；
- 预加载（Preload / Prefetch）：提前加载未来可能需要的资源；
- 配合
IntersectionObserver 实现图片/组件懒加载更高效。
8. 实战建议总结
- 请求层建议封装（axios + 拦截器 + 类型定义）；
- 使用
useSWR / react-query 等状态缓存方案提升体验；
- 开发中应随时分析
network、资源 waterfall；
- 性能优化是过程，不是一次性的「打鸡血式」修复；
- 「按需加载 + 缓存 + CDN + 压缩」是黄金组合；
✅ 总结
网络优化与性能调优，是高阶前端不可回避的责任。不仅影响用户体验，也关乎产品核心数据指标（如转化率、留存率）。理解浏览器通信机制、缓存策略、性能评估工具，让你在面试与实战中脱颖而出。
题外话
