如何提高前端应用的性能？ - Riesenzahn - 沸点 - 掘金

6月前

如何提高前端应用的性能？
### **前端性能优化核心方案**

#### **1. 减少资源体积**
- **代码压缩**：使用 `Terser` 压缩 JS，`CSSNano` 压缩 CSS，`HTMLMinifier` 压缩 HTML。
- **图片优化**：使用 `WebP` 格式，`ImageOptim` 压缩，`srcset` 适配不同分辨率。
- **Tree Shaking**：移除未使用的 JS/CSS（Webpack/Rollup 支持）。

#### **2. 减少 HTTP 请求**
- **合并文件**：合并小文件（如多个 CSS/JS 合并）。
- **使用雪碧图（CSS Sprites）**：减少小图标请求。
- **内联关键 CSS/JS**：首屏关键代码内联，减少阻塞渲染。

#### **3. 缓存优化**
- **强缓存（Cache-Control）**：`max-age=31536000` 长期缓存静态资源。
- **协商缓存（ETag/Last-Modified）**：减少重复下载。
- **Service Worker**：离线缓存（PWA 方案）。

#### **4. 代码执行优化**
- **防抖/节流**：减少高频事件（如 `scroll`、`resize`）触发次数。
- **虚拟列表（Virtual Scrolling）**：大数据列表只渲染可见区域（React `react-window`）。
- **Web Workers**：复杂计算移出主线程。

#### **5. 渲染优化**
- **减少重排/重绘**：使用 `transform` 替代 `top/left` 动画。
- **GPU 加速**：`will-change` 或 `transform: translateZ(0)` 提升动画性能。
- **懒加载（Lazy Load）**：图片/组件按需加载（`IntersectionObserver`）。

#### **6. 现代前端优化**
- **代码拆分（Code Splitting）**：动态加载路由组件（React `React.lazy`）。
- **预加载（Preload/Prefetch）*

展开

今天学到了

赞过