关键渲染路径是浏览器首先在屏幕上渲染页面所执行的一系列任务，即下载、处理并将HTML、CSS和JavaScript代码转换为实际像素并将它们绘制在屏幕上。 关键渲染路径优化是最小化浏览器执行序列的每个步骤所花费的时间的过程，优先显示与当前用户操作相关的内容。 此过程的大部分与无需向下滚动浏览器窗口即可看到的页面部分有关。该部分也称为“折叠上方（Above the Fold）”。为了更好的可用性，应该尽快渲染ATF，这可以通过至少减少网络往返次数来实现。渲染ATF所需的资源被认为是关键的，优化Above the Fold意味着将关键资源对首页渲染时间的影响降至最低。 在这篇文章中，我们将介绍关键渲染路径优化序列。 首先，我将概述浏览器呈现页面内容的任务。 接下来，我将剖析我们可以执行的最相关的操作来优化关键渲染路径。 最后，我将列出一些有用（且流行）的WordPress优化插件。 关键渲染路径序列 以下是浏览器为呈现页面而执行的一系列步骤： 首先，浏览器下载并解析HTML标记并构建DOM 然后它下载并处理CSS标记并构建CSS对象模型 它在渲染树中结合了渲染页面所需的DOM和CSSOM节点，渲染树是所有可见节点的树形结构 它计算页面上每个对象的尺寸和位置 最后，它在屏幕上绘制像素 DOM 正如Google的关键渲染路径优化指南中所解释的那样，浏览器按四步顺序构建文档对象模型： 首先，浏览器读取行字节并将它们转换为单个字符。 然后它将尖括号内的字符串转换为标记。 这些标记被转换为节点对象。 节点对象以树状数据结构链接，其中包含HTML内容、属性和节点之间的关系。这个结构就是文档对象模型。 这里需要注意的重要一点是浏览器是逐步构建DOM的。这允许我们通过创建高效的DOM结构来加速页面的渲染。 DOM结构 CSSOM 当解析器遇到一个引用外部CSS样式表的标签link时，它会阻止解析并发出对该资源的请求。收到CSS文件后，浏览器开始构建CSS节点的树形数据结构。 浏览器读取 .css 文件的行字节并将它们转换为单个字符 它将大括号内的字符串转换为标记 这些标记被转换为节点对象 节点对象以树状数据结构链接，其中包含每个节点的CSS属性以及节点之间的关系。这种结构就是CSS对象模型( CSSOM )。 与DOM构建不同，CSSOM构建不是增量的。浏览器不能使用样式表的一部分，因为样式可以在同一个样式表中进行细化和重新声明。出于这个原因，浏览器会阻塞渲染过程，直到它接收并解析所有CSS。这意味着CSS是渲染阻塞的。 CSSOM结构 渲染树 浏览器将DOM和CSSOM组合到渲染树中，最终的树结构包含用于将页面渲染到屏幕的所有节点和属性。 渲染树仅包含渲染页面所需的节点。结果，忽略了不可见的节点。 浏览器使用渲染树计算节点尺寸和位置作为绘画过程的输入。 渲染树结构 布局和绘制 在布局阶段，浏览器计算渲染树每个节点的尺寸和位置。浏览器从根开始遍历渲染树，并在此阶段生成一个盒子模型。该信息最终用于将渲染树的每个节点转换为屏幕上的实际像素。 关键渲染路径优化 运行整个过程所需的时间是可变的。这取决于文档大小、请求数量、应用的样式、用户设备等。最相关的Google建议之一是优先考虑可见内容以尽可能快地呈现“首屏”，并提供两个主要规则跟随： 构建HTML以首先加载关键的首屏内容 减少HTML、CSS和JS资源使用的数据量 正如Google的PageSpeed指南中所解释的那样，如果渲染ATF所需的数据量超过了初始拥塞窗口 (14.6kb)，则需要在服务器和浏览器之间进行额外的网络往返。在具有高延迟的移动网络上，这将显着延迟页面加载（阅读有关延迟的更多信息）。浏览器以增量方式构建DOM，允许我们通过构建HTML以首先加载首屏并延迟页面的其余部分来减少渲染ATF所需的时间。 折叠上方的内容因用户设备而异 但是优化并不会随着构建有效的DOM结构而结束。相反，它是一个涉及整个关键渲染路径序列的改进和测量过程。 让我们深入研究。 最小化资源维度 我们可以通过压缩、压缩和缓存HTML、CSS和JavaScript资源来减少浏览器要下载的数据量： 最小化是从源代码中删除不必要的字符（如注释和空格）的过程。这些字符在开发中很有帮助，但它们对于渲染页面没有用。 […]
