如何优化 WordPress 中的关键查看路径

ditoxa3357KK

关键显示路径是浏览器首先在屏幕上显示页面所执行的任务序列，即下载、处理 HTML、CSS 和 JavaScript 代码并将其转换为真实像素，并将其绘制在屏幕上。 关键显示路径优化是通过优先显示与当前用户操作相关的内容来最小化浏览器执行序列中每个步骤所花费的时间的过程。 此过程的大部分内容涉及无需向下滚动浏览器窗口即可看到的页面部分。该部分也称为“首屏”。为了更方便使用，应尽早完成 ATF，这可以通过将网络往返次数减少到最低限度来实现。渲染 ATF 所需的资源被认为是至关重要的，优化首屏意味着最大限度地减少关键资源对首页渲染时间的影响。 在这篇文章中，我们将逐步介绍关键显示路径优化序列。 首先，我将概述浏览器为显示页面内容而执行的任务。

接下来，我将剖析我们可以采取的最相关的操作来优化关键显示路径。 最后，我会提到一些有用（且流行）的 WordPress 优化插件。 关键可视化路径序列 以下是浏览器显示页面所执行的步骤序列： 首先，浏览器下载并解析 HTML 标记代码并构建 DOM。 接下来，下载并处理 CSS 标记 手机号码列表 并构建 CSS 对象模型 将显示页面所需的DOM和CSSOM节点合并到Render Tree中，Render Tree是所有可见节点的树形结构 这将计算页面上每个对象的尺寸和位置 最后，在屏幕上绘制像素 DOM 正如Google 的关键显示路径优化指南中所解释的，浏览器按四步顺序生成文档对象模型： 首先，浏览器读取字节行并将它们转换为单个字符 然后它将尖括号中的字符串转换为符号。 这些符号成为节点对象 节点对象以树状数据结构链接，其中包含 HTML 内容、属性以及节点之间的所有关系。这个结构就是文档对象模型。 这里需要注意的是，浏览器是增量构建 DOM 的。这使我们有机会通过创建高效的 DOM 结构来加速页面渲染。



DOM结构 DOM结构 CSSOM 当解析器遇到引用外部 CSS 样式表的链接标记时，它会阻止解析并发送对此资源的请求。一旦收到 CSS 文件，浏览器就开始构建 CSS 节点树数据结构。 浏览器从 .css 文件中读取字节行并将它们转换为单个字符 将大括号内的字符串转换为标记 这些符 号成为节点对象 节点对象以树状数据结构链接，其中包含每个节点的 CSS 属性以及节点之间的关系。这个结构就是CSS对象模型（CSSOM）。 与 DOM 构建不同，CSSOM 构建不是增量的。浏览器不能使用样式表的一部分，因为可以在同一样式表中细化和重新声明样式。因此，浏览器会阻止处理，直到收到并解析所有 CSS。这意味着CSS 是一个视图拦截器。 CSSOM结构 CSSOM结构 观赏树 浏览器将 DOM 和 CSSOM 组合成显示树，这是最终的树结构，包含用于在屏幕上显示页面的所有节点和属性。 显示树仅包含呈现页面所需的节点。结果，不可见的节点被省略。 浏览器使用显示树来计算尺寸和位置，并最终作为绘画过程的输入。