深入明白 Web 性能优化：从关键渲染路径到前端最佳实践
深入明白 Web 性能优化：从关键渲染路径到前端最佳实践https://i-blog.csdnimg.cn/direct/d5b022dc08d14cabb9b72548876dbe48.png
媒介
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），可同时加载多个资源：
server {
listen 443 ssl http2;
ssl_certificate cert.pem;
ssl_certificate_key key.pem;
}
优化效果：
[*]HTTP/2：多个资源并行下载。
[*]HTTP/1.1：需要多个 TCP 连接，每次只能下载一个资源。
2. 代码优化
（1）JS 和 CSS 代码压缩
使用 Webpack 或 Vite 举行代码压缩：
npm install terser-webpack-plugin css-minimizer-webpack-plugin --save-dev
Webpack 配置代码压缩：
const TerserPlugin = require("terser-webpack-plugin");
module.exports = {
optimization: {
minimize: true,
minimizer:
}
};
CSS 代码压缩：
/* 原始 CSS */
h1 {
font-size: 24px;
margin: 10px 0 10px 0;
}
/* 压缩后 */
h1 {font-size:24px;margin:10px 0;}
（2）移除未使用的 CSS
使用 PurgeCSS 删除无用 CSS：
npm install purgecss-webpack-plugin --save-dev
const PurgeCSSPlugin = require('purgecss-webpack-plugin');
module.exports = {
plugins: [
new PurgeCSSPlugin({
paths: glob.sync(`${PATHS.src}/**/*`, { nodir: true })
})
]
};
3. 资源缓存
（1）利用欣赏器缓存
在服务器配置 Cache-Control：
location /static/ {
expires 1y;
cache-control: public, max-age=31536000, immutable;
}
[*]强缓存（max-age, immutable）：缓存不会变的资源，如 logo、字体。
[*]协商缓存（ETag）：让服务器验证资源是否更新。
（2）Service Worker 离线缓存
使用 Service Worker 缓存 API 哀求，提高 PWA 性能：
self.addEventListener("install", event => {
event.waitUntil(
caches.open("my-cache").then(cache => {
return cache.addAll(["/index.html", "/styles.css", "/script.js"]);
})
);
});
4. 优化图片和视频
（1）使用当代图片格式
[*]WebP 比 PNG/JPEG 体积小 25-34%，提升加载速度：
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="优化图片">
</picture>
[*]SVG 适用于矢量图（如图标），比 PNG 更小。
（2）图片懒加载
<img src="placeholder.jpg" data-src="real-image.jpg" class="lazyload">
使用 IntersectionObserver 监听懒加载：
const images = document.querySelectorAll("img.lazyload");
const observer = new IntersectionObserver(entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
entry.target.src = entry.target.dataset.src;
observer.unobserve(entry.target);
}
});
});
images.forEach(img => observer.observe(img));
5. 前端渲染优化
（1）减少重排与重绘
[*]制止频繁操作 DOM：
// 不推荐：多次修改 DOM
for (let i = 0; i < 100; i++) {
document.body.appendChild(document.createElement("div"));
}
// 推荐：使用 DocumentFragment
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
fragment.appendChild(document.createElement("div"));
}
document.body.appendChild(fragment);
[*]使用 transform 取代 top/left 修改位置
/* 低效：导致重排 */
.element { position: absolute; top: 50px; }
/* 高效：仅触发合成 */
.element { transform: translateY(50px); }
（2）使用 requestAnimationFrame 举行流畅动画
let lastTime = 0;
function updateAnimation() {
requestAnimationFrame(updateAnimation);
const now = Date.now();
if (now - lastTime > 16) {
// 执行动画
lastTime = now;
}
}
requestAnimationFrame(updateAnimation);
这样可以包管动画在屏幕刷新率同步时运行，提高流畅度。
6. 前端性能监控
（1）使用 Chrome DevTools
[*]Performance 面板：分析 Main Thread 壅闭情况。
[*]Network 面板：检测资源加载时间、缓存命中率。
（2）前端错误监控
使用 Sentry 举行日志监控：
npm install @sentry/browser
import * as Sentry from "@sentry/browser";
Sentry.init({ dsn: "your-sentry-dsn-url" });
（3）Lighthouse 分析
使用 Google Lighthouse 举行 Web 性能分析：
npx lighthouse https://yourwebsite.com
七、总结
优化方向优化策略资源加载合并 CSS/JS，使用 HTTP/2代码优化代码压缩、Tree Shaking缓存优化欣赏器缓存、Service Worker图片优化WebP 格式、懒加载渲染优化制止重排重绘、使用 requestAnimationFrame监控Chrome DevTools、Lighthouse Web 性能优化是一个持续优化的过程，盼望本文能帮助你在实际项目中提升网站速度，打造流畅的用户体验！
页:
[1]