网络通信与前端性能优化
1. 前端常用网络通信方式对比
| 方式 | 场景说明 | 特点 |
|---|---|---|
XMLHttpRequest |
老式 AJAX 通信 | 回调繁琐，兼容性好 |
fetch API |
现代标准，逐步取代 XHR | Promise 基础，更简洁 |
axios |
基于 xhr 的封装库 |
拦截器、默认配置、适配性强 |
| WebSocket | 实时通信，如聊天室、推送 | 长连接，双向通信 |
| SSE | 服务端单向推送（Server-Sent） | 比 WebSocket 简单，单向 |
2. fetch API 核心特性
js
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 + 压缩」是黄金组合；
✅ 总结
网络优化与性能调优，是高阶前端不可回避的责任。不仅影响用户体验，也关乎产品核心数据指标（如转化率、留存率）。理解浏览器通信机制、缓存策略、性能评估工具，让你在面试与实战中脱颖而出。