提高 HTML 和 CSS 性能

最近我有机会在NDC 悉尼发表关于网络性能的演讲，并获得了热烈的反响。

这启发了我针对那次演讲中涉及的每个主题撰写一系列帖子，谁知道呢，也许有一天这些帖子都会成为他们自己的演讲😃。

链接到所有其他部分：

第 2 部分使用 Preload/Prefetch 来提升加载时间

第 3 部分 JavaScript 技巧和窍门

第 4 部分 图像优化

第五部分 Web 字体优化

因此，第一部分是关于提高 HTML 和 CSS 性能的技巧和窍门。

但在深入探讨之前，你需要了解浏览器是如何渲染页面的。这涉及到HTML、CSS和JavaScript，以及每个浏览器向最终用户展示网页的步骤。

关键渲染路径

关键渲染路径由五个步骤组成，最好通过视觉来观察：

好吧，既然您在图片中看到了它，让我更详细地解释每个步骤。

构建 DOM 和 CSSOM

由于大多数页面由 HTML、CSS 和 JavaScript 组成。Web 浏览器需要知道向用户显示什么内容以及如何显示，它们通过解析网络发送的 HTML 页面并构建文档对象模型 (DOM) 来实现这一点。它们会查看 HTML 标签（<p></p>、<div></div>、<h1></h1>）并将其转换为标记。然后，这些标记会并行转换为节点。

通过按顺序处理每个标记的开始和结束标记，浏览器便建立了它们的层次结构（父标记和子标记）。

这比看起来要简单得多，在上图中，DOM 可以想象成一棵包含所有节点（分支）及其子节点（叶子）的树。这棵树包含了构建 HTML 所需的所有节点依赖关系：

图片来自W3C网站

DOM 代表了你的整个标记，并由浏览器逐步构建。从 HTML5 开始，浏览器支持流式 HTML，而无需等待整个页面一次性发送到浏览器。这非常棒，因为它有助于在字节到达的同时完成渲染。

构建 DOM 后，浏览器会查看页面中引用的任何样式，以构建 CSS 对象模型 (CSSOM)。CSSOM 描述了需要应用于文档的样式规则。这与 DOM 的构建方式非常相似，但是，在此过程中，每个子元素都会继承应用于其父元素的样式——因此得名层叠样式表。

部分样式处理是不可能的，因此浏览器需要等待所有样式规则发送完毕，才能开始推断哪些规则应用于哪些节点。这就是为什么 CSS 是阻塞渲染的元素。

DOM 和 CSSOM 的混合体被称为渲染树。这棵树包含所有节点及其依赖关系，以及应用于这些节点的所有 CSS 规则。

渲染树

当所有节点构建完成后，浏览器需要知道哪些节点应该显示在页面上。Render Tree 正是页面上可见内容的表示。

浏览器从根节点开始，复制 DOM 和 CSSOM 中所有可见节点。大致步骤如下：

• 从根节点开始，遍历每个可见节点
  • 有些节点是不可见的，如元标记、链接等。
  • 一些节点使用 CSS 隐藏，例如display: none
• 为每个节点找到匹配的 CSS 规则并应用它
• 发出带有内容和样式的可见节点

图片来自Google Developers

布局

现在我们已经有了所有节点及其样式，是时候确定将它们放置在屏幕上的哪个位置了。这正是布局步骤。首先需要知道的是浏览器窗口的大小。这是所有后续计算的基础，因为布局依赖于它来了解每个元素的位置和尺寸。

这一步的输出是盒子模型，它捕获了它的精确位置和大小，以及它们的边距、填充、边框等。

每次改变尺寸或在移动设备上在横向和纵向之间切换时都会重复此步骤。

画

这一步是最后一个步骤，像素会被绘制到屏幕上，由于浏览器有大量工作要做，因此可能需要一些时间。具体时间取决于窗口大小、每个节点应用的样式数量以及设备使用的硬件等等。

当此步骤完成后，页面最终会在视口中可见。

所以呢

好的，关键渲染路径已经介绍得足够多了，让我们看看如何通过调整 HTML 和 CSS 来提高网络性能。

将 HTML 流传输到客户端

向客户端发送 HTML 时，尽量频繁刷新缓冲区，而不是在末尾刷新一次。这意味着 HTML 数据块到达时，浏览器可以在它们到达时进行解析，而不是在末尾。这将有助于提升性能。

例如，当HEAD标签到达时，浏览器可以在其余 HTML 到达的同时发送其他资产请求。

尺寸很重要

最小化和压缩非常重要，因为它可以减少有效负载大小并减少 HTTP 响应时间，从而缩短加载时间。

这些技术与正确的缓存策略一起可以极大地帮助提高网络性能。

尽早发送 CSS 并保持其简洁

正如你所见，CSS 是一个渲染阻塞元素，因此应该尽早将其发送给客户端。此外，还要考虑首次页面加载时需要多少 CSS，从主文件中提取未使用的 CSS，并分别加载它们，稍后在需要时再加载。

您还可以使用预加载/预缓存来提高性能。这些是Google 于 2016 年推出的 PRPL 模式的一部分。

另一种不太常用的技术是在正文中使用链接标签，并将其与内容一起使用。这非常有用，因为即使在 HTML 中，您也可以将最少量的 CSS 发送给客户端，style tag然后在需要时再加载其余部分，从而缩短渲染时间。

概括

简而言之，尽量减少资源，并以最佳速度发送。尽量减少未使用的 CSS 规则，并使用最小化和压缩来加快传输速度。

希望您喜欢阅读本文并期待本系列的其余部分😉。

资源

• Google 开发者关注 Web 性能
• 理解CSS 技巧中的关键渲染路径