前端性能优化

前端性能优化涉及多个层面，旨在提升页面加载速度、交互流畅度和用户体验。以下是核心优化策略分类及具体实践：

---

一、网络传输优化（减少请求量与体积）

1. 资源压缩

   • 代码压缩：JS/CSS 使用 UglifyJS/Terser、CSSNano
   • 图片压缩：WebP格式、TinyPNG工具、响应式图片（srcset）
   • Gzip/Brotli 压缩：服务器开启压缩（Nginx配置）

   gzip on;  
   gzip_types text/css application/javascript;
   

2. 减少HTTP请求

   • 合并文件：打包工具（Webpack/Rollup）合并JS/CSS
   • 雪碧图（CSS Sprites）：合并小图标
   • 内联关键资源：首屏CSS内联到HTML

3. HTTP/2优化

   • 多路复用：提升并发请求效率
   • 服务器推送：主动推送关键资源（如Link头部）

4. CDN加速

   • 静态资源部署到CDN，减少网络延迟

---

二、资源加载优化（加速关键渲染路径）

1. 懒加载（Lazy Load）

   • 图片/组件：<img loading="lazy">、Vue的<Suspense>、React的lazy()
   • 路由懒加载：动态import()

   const Home = () => import('./Home.vue'); // Vue
   

2. 预加载关键资源

   • 使用<link rel="preload">预加载字体、关键CSS
   • 预连接：<link rel="preconnect" href="https://cdn.example.com">

3. 异步/延迟加载非关键JS

   • 添加async或defer属性

   <script src="non-critical.js" defer></script>
   

---

三、渲染性能优化（提升交互流畅度）

1. 减少重排（Reflow）与重绘（Repaint）

   • 使用transform和opacity做动画（触发GPU加速）
   • 避免频繁修改DOM样式，批量读写（如requestAnimationFrame）

   // 批量修改
   requestAnimationFrame(() => {
     element.style.width = '100px';
     element.style.height = '200px';
   });
   

2. 虚拟滚动（Virtual Scrolling）

   • 长列表使用react-window或vue-virtual-scroller

3. 防抖（Debounce）与节流（Throttle）

   • 优化resize、scroll等高频事件

   window.addEventListener('scroll', throttle(handleScroll, 200));
   

---

四、缓存策略（减少重复加载）

1. 强缓存
   • Cache-Control: max-age=31536000（1年缓存）
2. 协商缓存
   • ETag/Last-Modified验证资源是否变更
3. Service Worker
   • 实现离线缓存（PWA技术）
4. 本地存储
   • 使用localStorage缓存API响应（配合ETag更新）

---

五、代码级优化

1. 减少DOM操作
   • 使用文档片段（DocumentFragment）
2. 事件委托
   • 利用事件冒泡，减少事件监听器数量

   document.getElementById('parent').addEventListener('click', (e) => {
     if (e.target.matches('.child')) { /* ... */ }
   });
   

3. Web Workers
   • 将复杂计算移入Worker线程

---

六、构建优化

1. Tree Shaking
   • 移除未使用代码（ES Module语法）
2. 代码分割（Code Splitting）
   • 按路由/组件拆分代码块
3. 优化Source Map
   • 生产环境使用cheap-module-source-map

---

七、监控与指标

1. 性能指标追踪
   • LCP（最大内容渲染时间）
   • FID（首次输入延迟）
   • CLS（累积布局偏移）
2. 性能分析工具
   • Lighthouse、WebPageTest
   • Chrome DevTools的Performance面板

---

八、进阶优化

1. 服务端渲染（SSR）
   • Nuxt.js（Vue）、Next.js（React）提升首屏速度
2. 边缘计算
   • 使用Cloudflare Workers等边缘节点运行逻辑

---

优化效果示例对比

优化前	优化后
加载时间：4.2s	→ 1.1s
JS体积：2MB	→ 450KB
FPS波动：20-60	→ 稳定60

核心原则：优先优化关键渲染路径（Critical Rendering Path），遵循 Loading → Rendering → Interaction 的优化顺序，持续监控真实用户性能（RUM）。