深入明白 Web 性能优化：从关键渲染路径到前端最佳实践 ...

深入明白 Web 性能优化：从关键渲染路径到前端最佳实践

媒介

Web 性能优化不停是前端开发者关注的紧张话题。一个加载缓慢的网站不仅影响用户体验，还可能降低 SEO 排名，影响业务转化率。
本文将从关键渲染路径（Critical Rendering Path） 出发，深入探究前端性能优化的焦点原理，并提供实战技巧，帮助你提升网站速度，实现流畅的用户体验。

---

一、关键渲染路径（Critical Rendering Path）

1. 什么是关键渲染路径？

关键渲染路径（CRP）指的是欣赏器从吸收到 HTML 到最终完成页面渲染的完备流程。这个过程涉及多个阶段：

• 解析 HTML → 构建 DOM 树（Document Object Model）。
  
• 解析 CSS → 构建 CSSOM（CSS Object Model）。
  
• 合并 DOM 和 CSSOM → 生成 Render Tree（渲染树）。
  
• 盘算布局（Layout） → 确定元素的大小和位置。
  
• 绘制（Painting） → 将像素渲染到屏幕上。
  

优化关键渲染路径的焦点目标：

• 减少关键资源的数量（减少 CSS、JS 体积）。
  
• 缩短关键资源的加载时间（使用 CDN、Gzip 压缩）。
  
• 提高初次内容绘制（FCP）和交互就绪时间（TTI）。
  

---

二、前端性能优化策略

1. 优化资源加载

（1）减少 HTTP 哀求

• 合并 CSS 和 JS 文件：制止多个小文件，减少网络哀求数。
  
• 使用 CSS Sprites（雪碧图）：将多个小图标合并为一个大图，减少哀求数。
  
• Lazy Load（懒加载）：图片、组件按需加载，制止首屏加载过多资源。
  

（2）使用 HTTP/2

HTTP/2 支持多路复用（Multiplexing），可同时加载多个资源：

1. server {
2.   listen 443 ssl http2;
3.   ssl_certificate cert.pem;
4.   ssl_certificate_key key.pem;
5. }

复制代码

优化效果：

• HTTP/2：多个资源并行下载。
  
• HTTP/1.1：需要多个 TCP 连接，每次只能下载一个资源。
  

---

2. 代码优化

（1）JS 和 CSS 代码压缩

使用 Webpack 或 Vite 举行代码压缩：

1. npm install terser-webpack-plugin css-minimizer-webpack-plugin --save-dev

复制代码

Webpack 配置代码压缩：

1. const TerserPlugin = require("terser-webpack-plugin");
2. module.exports = {
3.   optimization: {
4.     minimize: true,
5.     minimizer: [new TerserPlugin(), new CssMinimizerPlugin()]
6.   }
7. };

复制代码

CSS 代码压缩：

1. /* 原始 CSS */
2. h1 {
3.   font-size: 24px;
4.   margin: 10px 0 10px 0;
5. }
7. /* 压缩后 */
8. h1 {font-size:24px;margin:10px 0;}

复制代码

（2）移除未使用的 CSS

使用 PurgeCSS 删除无用 CSS：

1. npm install purgecss-webpack-plugin --save-dev

复制代码

1. const PurgeCSSPlugin = require('purgecss-webpack-plugin');
2. module.exports = {
3.   plugins: [
4.     new PurgeCSSPlugin({
5.       paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
6.     })
7.   ]
8. };

复制代码

---

3. 资源缓存

（1）利用欣赏器缓存

在服务器配置 Cache-Control：

1. location /static/ {
2.   expires 1y;
3.   cache-control: public, max-age=31536000, immutable;
4. }

复制代码

• 强缓存（max-age, immutable）：缓存不会变的资源，如 logo、字体。
  
• 协商缓存（ETag）：让服务器验证资源是否更新。
  

（2）Service Worker 离线缓存

使用 Service Worker 缓存 API 哀求，提高 PWA 性能：

1. self.addEventListener("install", event => {
2.   event.waitUntil(
3.     caches.open("my-cache").then(cache => {
4.       return cache.addAll(["/index.html", "/styles.css", "/script.js"]);
5.     })
6.   );
7. });

复制代码

---

4. 优化图片和视频

（1）使用当代图片格式

• WebP 比 PNG/JPEG 体积小 25-34%，提升加载速度：
  

1. <picture>
2.   <source srcset="image.webp" type="image/webp">
3.   <img src="image.jpg" alt="优化图片">
4. </picture>

复制代码

• SVG 适用于矢量图（如图标），比 PNG 更小。
  

（2）图片懒加载

1. <img src="placeholder.jpg" data-src="real-image.jpg" class="lazyload">

复制代码

使用 IntersectionObserver 监听懒加载：

1. const images = document.querySelectorAll("img.lazyload");
2. const observer = new IntersectionObserver(entries => {
3.   entries.forEach(entry => {
4.     if (entry.isIntersecting) {
5.       entry.target.src = entry.target.dataset.src;
6.       observer.unobserve(entry.target);
7.     }
8.   });
9. });
10. images.forEach(img => observer.observe(img));

复制代码

---

5. 前端渲染优化

（1）减少重排与重绘

• 制止频繁操作 DOM：
  

1. // 不推荐：多次修改 DOM
2. for (let i = 0; i < 100; i++) {
3.   document.body.appendChild(document.createElement("div"));
4. }
6. // 推荐：使用 DocumentFragment
7. const fragment = document.createDocumentFragment();
8. for (let i = 0; i < 100; i++) {
9.   fragment.appendChild(document.createElement("div"));
10. }
11. document.body.appendChild(fragment);

复制代码

• 使用 transform 取代 top/left 修改位置
  

1. /* 低效：导致重排 */
2. .element { position: absolute; top: 50px; }
4. /* 高效：仅触发合成 */
5. .element { transform: translateY(50px); }

复制代码

（2）使用 requestAnimationFrame 举行流畅动画

1. let lastTime = 0;
2. function updateAnimation() {
3.   requestAnimationFrame(updateAnimation);
4.   const now = Date.now();
5.   if (now - lastTime > 16) {
6.     // 执行动画
7.     lastTime = now;
8.   }
9. }
10. requestAnimationFrame(updateAnimation);

复制代码

这样可以包管动画在屏幕刷新率同步时运行，提高流畅度。

---

6. 前端性能监控

（1）使用 Chrome DevTools

• Performance 面板：分析 Main Thread 壅闭情况。
  
• Network 面板：检测资源加载时间、缓存命中率。
  

（2）前端错误监控

使用 Sentry 举行日志监控：

1. npm install @sentry/browser

复制代码

1. import * as Sentry from "@sentry/browser";
2. Sentry.init({ dsn: "your-sentry-dsn-url" });

复制代码

（3）Lighthouse 分析

使用 Google Lighthouse 举行 Web 性能分析：

1. npx lighthouse https://yourwebsite.com

复制代码

---

七、总结

优化方向优化策略资源加载合并 CSS/JS，使用 HTTP/2代码优化代码压缩、Tree Shaking缓存优化欣赏器缓存、Service Worker图片优化WebP 格式、懒加载渲染优化制止重排重绘、使用 requestAnimationFrame监控Chrome DevTools、Lighthouse Web 性能优化是一个持续优化的过程，盼望本文能帮助你在实际项目中提升网站速度，打造流畅的用户体验！