网络通信与前端性能优化
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 + 压缩」是黄金组合;
✅ 总结
网络优化与性能调优,是高阶前端不可回避的责任。不仅影响用户体验,也关乎产品核心数据指标(如转化率、留存率)。理解浏览器通信机制、缓存策略、性能评估工具,让你在面试与实战中脱颖而出。