全面指南，了解并优化关键渲染路径，加快网站加载速度，改善用户体验。学习提高前端全球性能的实用技术。
JavaScript 性能优化：掌握关键渲染路径
在当今的 Web 中，性能至关重要。 网站加载缓慢可能导致用户沮丧、跳出率更高，最终导致收入损失。 优化您的 JavaScript 并了解浏览器如何渲染网页对于提供快速而引人入胜的用户体验至关重要。 在此领域最重要的概念之一是关键渲染路径 (CRP)。
什么是关键渲染路径？
关键渲染路径是浏览器将 HTML、CSS 和 JavaScript 转换为屏幕上渲染网页所采取的一系列步骤。 这是一个依赖链； 每个步骤都依赖于前一个步骤的输出。 了解和优化此路径对于减少用户看到您的网站并与之交互所需的时间至关重要。 可以将其视为精心编排的芭蕾舞，其中每个动作（每个渲染步骤）都需要完美的时间和执行才能使最终表演完美无瑕。 一步的延迟会影响所有后续步骤。
CRP 由以下关键步骤组成：
- DOM 构建： 解析 HTML 并构建文档对象模型 (DOM)。
- CSSOM 构建： 解析 CSS 并构建 CSS 对象模型 (CSSOM)。
- 渲染树构建： 结合 DOM 和 CSSOM 以创建渲染树。
- 布局： 计算渲染树中每个元素的位置和大小。
- 绘制： 将渲染树转换为屏幕上的实际像素。
让我们更详细地分解其中的每个步骤。
1. DOM 构建
当浏览器收到 HTML 文档时，它开始逐行解析代码。 在解析过程中，它会构建一个类似树的结构，称为文档对象模型 (DOM)。 DOM 代表 HTML 文档的结构，每个 HTML 元素都成为树中的一个节点。 考虑以下简单的 HTML：
<!DOCTYPE html>
<html>
<head>
<title>我的网站</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>你好，世界！</h1>
<p>这是我的第一个网站。</p>
</body>
</html>
浏览器将解析此内容为一个 DOM 树，其中每个标签 (<html>, <head>, <body> 等) 都成为一个节点。
关键阻塞资源： 当解析器遇到 <script> 标签时，它通常会阻止 DOM 的构建，直到脚本被下载、解析和执行。 这是因为 JavaScript 可以修改 DOM，因此浏览器需要确保脚本已完成执行才能继续构建 DOM。 类似地，加载 CSS 的 <link> 标签被认为是渲染阻塞，如下所述。
2. CSSOM 构建
正如浏览器解析 HTML 以创建 DOM 一样，它解析 CSS 以创建 CSS 对象模型 (CSSOM)。 CSSOM 代表应用于 HTML 元素的样式。 像 DOM 一样，CSSOM 也是一个类似树的结构。 CSSOM 至关重要，因为它决定了 DOM 元素的样式和显示方式。 考虑以下 CSS：
h1 {
color: blue;
font-size: 2em;
}
p {
color: gray;
}
浏览器解析此 CSS 并创建一个 CSSOM，将 CSS 规则映射到相应的 HTML 元素。 CSSOM 的构建直接影响页面的渲染； 不正确或低效的 CSS 可能会导致渲染延迟和较差的用户体验。 例如，CSS 选择器应尽可能具体和高效，以最大限度地减少浏览器的工作量。
关键阻塞资源： CSSOM 是一个渲染阻塞资源。 浏览器在 CSSOM 构建完成之前无法开始渲染页面。 这是因为 CSS 中定义的样式会影响 HTML 元素的显示方式。 因此，浏览器需要等待 CSSOM 完成才能继续进行渲染。 文档的 <head> 中的样式表（使用 <link rel="stylesheet">）通常会阻止渲染。
3. 渲染树构建
一旦 DOM 和 CSSOM 构建完成，浏览器会将它们组合起来以创建渲染树。 渲染树是 DOM 的一个可视化表示，仅包含实际显示在屏幕上的元素。 隐藏的元素（例如，使用 display: none;）不包含在渲染树中。 渲染树代表用户实际在屏幕上看到的内容； 它是 DOM 的一个修剪版本，仅包含可见和已设置样式的元素。
渲染树代表页面的最终视觉结构，结合了内容 (DOM) 和样式 (CSSOM)。 此步骤至关重要，因为它为实际的渲染过程奠定了基础。
4. 布局
布局阶段涉及计算渲染树中每个元素的精确位置和大小。 此过程也称为“回流”。 浏览器确定每个元素应放置在屏幕上的位置以及应占用多少空间。 布局阶段受到应用于元素的 CSS 样式的影响很大。 边距、填充、宽度、高度和定位等因素都影响布局计算。 这一阶段在计算上非常密集，尤其是对于复杂的布局。
布局是 CRP 中的一个关键步骤，因为它决定了页面上元素的空间排列。 高效的布局过程对于流畅和响应迅速的用户体验至关重要。 对 DOM 或 CSSOM 的更改可能会触发重新布局，这在性能方面可能非常昂贵。
5. 绘制
最后一步是绘制阶段，浏览器将渲染树转换为屏幕上的实际像素。 这涉及栅格化元素并应用指定的样式、颜色和纹理。 绘制过程最终使网页对用户可见。 绘制是另一个计算密集型过程，特别是对于复杂的图形和动画。
绘制阶段之后，用户会看到渲染的网页。 对 DOM 或 CSSOM 的任何后续更改都可能触发重绘，从而更新屏幕上的视觉表示。 尽量减少不必要的重绘对于维护流畅和响应迅速的用户界面至关重要。
优化关键渲染路径
现在我们了解了关键渲染路径，让我们探讨一些优化它的技术。
1. 尽量减少关键资源数量
浏览器必须下载和解析的关键资源（CSS 和 JavaScript 文件）越少，页面渲染速度就越快。 减少关键资源的方法如下：
- 推迟非关键 JavaScript： 在
<script>标签上使用defer或async属性，以防止它们阻止 DOM 构建。 - 内联关键 CSS： 确定对于渲染首屏内容至关重要的 CSS 规则，并将它们直接内联到 HTML 文档的
<head>中。 这消除了浏览器为初始渲染下载外部 CSS 文件的需要。 - 最小化 CSS 和 JavaScript： 通过删除不必要的字符（空格、注释等）来减小您的 CSS 和 JavaScript 文件的大小。
- 合并 CSS 和 JavaScript 文件： 通过将多个 CSS 和 JavaScript 文件合并到单个文件中来减少 HTTP 请求的数量。 但是，使用 HTTP/2，由于改进的多路复用功能，捆绑的好处不太明显。
- 删除未使用的 CSS： 存在用于分析您的 CSS 并识别从未使用的规则的工具。 删除这些规则会减小 CSSOM 的大小。
示例（推迟 JavaScript）：
<script src="script.js" defer></script>
defer 属性告诉浏览器下载脚本，而不会阻止 DOM 构建。 该脚本将在 DOM 完全解析后执行。
示例（内联关键 CSS）：
<head>
<style>
/* 首屏内容的 Critical CSS */
body { font-family: sans-serif; }
h1 { color: black; }
</style>
<link rel="stylesheet" href="style.css">
</head>
在此示例中，body 和 h1 元素的 CSS 规则在 <head> 中内联。 这可确保浏览器可以快速渲染首屏内容，甚至在下载外部样式表 (style.css) 之前。
2. 优化 CSS 交付
您交付 CSS 的方式会显着影响 CRP。 考虑以下优化技术：
- 媒体查询： 使用媒体查询仅将 CSS 应用于特定设备或屏幕尺寸。 这可以防止浏览器下载不必要的 CSS。
- 打印样式表： 将您的打印样式分离到单独的样式表中，并使用媒体查询仅在打印时应用它。 这可以防止打印样式阻止在屏幕上进行渲染。
- 条件加载： 根据浏览器功能或用户偏好条件加载 CSS 文件。 这可以使用 JavaScript 或服务器端逻辑来实现。
示例（媒体查询）：
<link rel="stylesheet" href="style.css" media="screen">
<link rel="stylesheet" href="print.css" media="print">
在此示例中，style.css 仅应用于屏幕，而 print.css 仅在打印时应用。
3. 优化 JavaScript 执行
JavaScript 会对 CRP 产生重大影响，特别是如果它修改 DOM 或 CSSOM。 优化 JavaScript 执行的方法如下：
- 推迟或异步 JavaScript： 如前所述，使用
defer或async属性来防止 JavaScript 阻止 DOM 构建。 - 优化 JavaScript 代码： 编写高效的 JavaScript 代码，最大限度地减少 DOM 操作和计算。
- 延迟加载 JavaScript： 仅在需要时加载 JavaScript。 例如，您可以延迟加载折叠以下的元素的 JavaScript。
- Web Workers： 将计算量大的 JavaScript 任务移动到 Web Workers，以防止它们阻塞主线程。
示例（异步 JavaScript）：
<script src="analytics.js" async></script>
async 属性告诉浏览器异步下载脚本并在可用时立即执行它，而不会阻止 DOM 构建。 与 defer 不同的是，使用 async 加载的脚本的执行顺序可能与它们在 HTML 中出现的顺序不同。
4. 优化 DOM
大型且复杂的 DOM 会减慢渲染过程。 优化 DOM 的方法如下：
- 减小 DOM 大小： 通过删除不必要的元素和属性来保持 DOM 尽可能小。
- 避免深度 DOM 树： 避免创建深度嵌套的 DOM 结构，因为它们会使浏览器更难以遍历 DOM。
- 使用语义 HTML： 使用语义 HTML 元素（例如，
<article>、<nav>、<aside>）为您的 HTML 文档提供结构和意义。 这可以帮助浏览器更有效地渲染页面。
5. 减少布局抖动
当 JavaScript 反复读取和写入 DOM 时，就会发生布局抖动，导致浏览器执行多个布局和绘制。 这会严重降低性能。 为了避免布局抖动：
- 批量 DOM 更改： 将 DOM 更改组合在一起并在单个批处理中应用它们。 这最大限度地减少了布局和绘制的次数。
- 避免在写入前读取布局属性： 避免在写入 DOM 之前读取布局属性（例如，
offsetWidth、offsetHeight），因为这可能会迫使浏览器执行布局。 - 使用 CSS 转换和动画： 使用 CSS 转换和动画而不是基于 JavaScript 的动画，因为它们通常更高效。 转换和动画通常使用 GPU，而 GPU 针对此类操作进行了优化。
6. 利用浏览器缓存
浏览器缓存允许浏览器在本地存储资源（例如，CSS、JavaScript、图像），因此它们不必在后续访问中再次下载。 配置您的服务器以为您的资源设置适当的缓存标头。
示例（缓存标头）：
Cache-Control: public, max-age=31536000
此缓存标头告诉浏览器将资源缓存一年（31536000 秒）。 使用内容交付网络 (CDN) 也可以极大地提高缓存性能，因为它将您的内容分布到世界各地的多个服务器上，允许用户从地理位置更靠近他们的服务器下载资源。
用于分析关键渲染路径的工具
可以使用多种工具来帮助您分析关键渲染路径并识别性能瓶颈：
- Chrome DevTools： Chrome DevTools 提供了有关渲染过程的大量信息，包括 CRP 中每个步骤的时间。 使用“性能”面板录制页面加载的时间线并确定需要优化的区域。 “覆盖率”选项卡有助于识别未使用的 CSS 和 JavaScript。
- WebPageTest： WebPageTest 是一款流行的在线工具，它提供了详细的性能报告，包括一个瀑布图，该图将资源加载过程可视化。
- Lighthouse： Lighthouse 是一种开源的自动化工具，用于提高网页的质量。 它具有性能、可访问性、渐进式 Web 应用程序、SEO 等方面的审核。 您可以在 Chrome DevTools 中、从命令行或作为 Node 模块运行它。
示例（使用 Chrome DevTools）：
- 打开 Chrome DevTools（右键单击页面并选择“检查”）。
- 转到“性能”面板。
- 单击录制按钮（圆圈图标）并重新加载页面。
- 在页面加载完成后停止录制。
- 分析时间线以识别性能瓶颈。 请密切注意“加载”、“脚本编写”、“渲染”和“绘制”部分。
真实世界的例子和案例研究
让我们看一些真实的例子，说明优化关键渲染路径如何提高网站性能：
- 示例 1：电子商务网站： 一家电子商务网站通过内联关键 CSS、推迟非关键 JavaScript 和优化其图像来优化其 CRP。 这导致页面加载时间缩短了 40%，转化率提高了 20%。
- 示例 2：新闻网站： 一家新闻网站通过减小其 DOM 的大小、优化其 CSS 选择器并利用浏览器缓存来改进其 CRP。 这导致跳出率降低了 30%，广告收入增加了 15%。
- 示例 3：全球旅行平台： 一个为全球用户提供服务的全球旅行平台通过实施 CDN 并针对不同设备类型和网络条件优化图像，看到了显着的改进。 他们还使用服务工作者缓存了经常访问的数据，从而允许离线访问和更快的后续加载。 这导致不同地区和互联网速度的用户体验更加一致。
全球考虑事项
在优化 CRP 时，考虑全球背景非常重要。 世界各地用户的互联网速度、设备功能和网络状况可能有所不同。 以下是一些全球考虑事项：
- 网络延迟： 网络延迟会显着影响页面加载时间，尤其是在偏远地区或互联网连接缓慢的用户。 使用 CDN 将您的内容分发给更靠近您的用户的地方并减少延迟。
- 设备功能： 针对不同的设备功能（例如，移动设备、平板电脑和台式机）优化您的网站。 使用响应式设计技术使您的网站适应不同的屏幕尺寸和分辨率。
- 网络状况： 考虑用户可能遇到的不同网络状况，例如 2G、3G 和 4G。 使用自适应图像加载和数据压缩等技术来优化您的网站，以适应慢速网络连接。
- 国际化 (i18n)： 在处理多语言网站时，请确保您的 CSS 和 JavaScript 已正确国际化，以处理不同的字符集和文本方向。
- 可访问性 (a11y)： 优化您的网站的可访问性，以确保残疾人士可以使用它。 这包括为图像提供替代文本、使用语义 HTML 以及确保您的网站可通过键盘访问。
结论
优化关键渲染路径对于提供快速而引人入胜的用户体验至关重要。 通过最大限度地减少关键资源、优化 CSS 交付、优化 JavaScript 执行、优化 DOM、减少布局抖动以及利用浏览器缓存，您可以显着提高您网站的性能。 请记住使用可用的工具来分析您的 CRP 并确定需要优化的区域。 通过采取这些措施，您可以确保您的网站加载速度快，并为世界各地的用户提供积极的体验。 互联网变得越来越全球化； 快速且可访问的网站不再仅仅是最佳实践，而是接触不同受众的必要条件。