关键渲染路径是浏览器将 HTML、CSS 和 JavaScript 转换为屏幕上的像素所经历的阶段序列：
这些步骤直接影响我们网站的性能，因此如果我们想优化此流程，我们必须考虑一些事情。
浏览器通过 HTTP 调用接收 HTML。一旦收到它，它就会开始使用该数据构建 DOM。
这个 DOM 是基于节点构建的，每个 HTML 标签就相当于一个节点，HTML 中的子元素也将是 DOM 树中的子节点。
节点数量越多，页面渲染过程完成所需的时间就越长。
DOM 包含有关页面内容的所有信息，而 CSSOM 包含有关如何查看该内容的所有信息。
CSS 处理会阻止渲染。也就是说，在完全处理之前，您无法继续后续步骤以最终在屏幕上显示内容。这是因为在 CSS 文件中，上面几行应用的样式可能会被覆盖。
一旦我们准备好 DOM 和 CSSOM，它们就会被组合起来形成“渲染树”，它将包含有关将出现在屏幕上的元素的所有必要信息。在这棵树中，诸如所有具有 display: none; 的元素。及其后代或在
标签中找到的所有内容。在“布局”阶段，定义渲染树元素的大小及其与其他元素的关系。此过程取决于访问网页的屏幕。
如果未指定，元素将默认为父级宽度的 100%，这在某些浏览器中是固定宽度。这就是为什么有必要将该元素包含在
中。来自我们的文档：
<head>
<meta name="viewport" content="width=device-width" />
</head>
每次用户旋转其移动设备时，布局过程都会再次运行，因为元素及其在屏幕上的排列可能会发生变化。
布局会影响网站的性能，因为节点数量越多，完成此过程所需的时间就越长。缓慢的布局过程除了会导致首页加载速度变慢之外，还会导致一些动画看起来不太好。
在屏幕上绘制像素是渲染过程的最后一步。这是一个快速的步骤，因为在第一次加载（onload）后，只有那些发生更改的页面区域才会被重新绘制；浏览器已经过优化，以避免不必要地执行此过程。
这个过程可以通过不同的方式进行优化，但每种情况都是独一无二的，最后重要的是您将最适合您的项目的措施应用于您的项目。
这个想法是浏览器尽快下载对页面至关重要的资源，例如图像、样式、脚本等，因此建议将这些元素尽可能放在
中;.即使它们是脚本或更小的样式，它们也可以放入内联标签中。
<head>
<meta name="viewport" content="width=device-width" />
</head>
另一方面，如果您正在加载的是一个修改 DOM 某些元素的脚本，那么我们的想法是在树及其所有节点构建完毕后加载它。在这些情况下，有必要在 body 标记的末尾加载该脚本。
<head>
<style>
.foo {
color: red;
}
</style>
</head>
延迟加载不修改 DOM 的脚本是减少网站加载时间的一个非常好的做法。这可以通过“async”和“defer”属性来完成。
将脚本设置为异步会导致该脚本独立下载和运行，因此不会阻塞渲染过程，并且执行时间是任意的。
具有 defer 属性的脚本将异步下载，但会尊重它在文档中的位置顺序。这也是控制小脚本是否在大脚本之后运行的好方法。
<html>
<body>
<!-- My content -->
<script src="./path/to/my/script.js"></script>
</body>
</html>
在上面的示例中，三个脚本将异步下载。我们假设最后一个脚本将首先下载，因为它较小。第一个脚本将完全独立下载和运行，既不等待其他元素准备就绪，也不阻塞渲染过程。无论如何，最后一个脚本将在第二个脚本之后执行，因为 defer 属性遵循顺序。
这个想法是只加载屏幕上需要的样式，因此可以帮助优化性能的技术是将页面样式分成不同的文件，具体取决于它们是否要应用于手机、平板电脑、台式机等在 HTML 中，这些文件将使用媒体查询加载，从而避免不必要的样式加载。
<head>
<meta name="viewport" content="width=device-width" />
</head>
虽然看起来很愚蠢，但缩小文件可以极大地帮助提高页面的性能，因为消除空格、注释等可以减少浏览器构建渲染树所需的工作。
这些只是优化此流程时需要记住的一些事项。考虑到这一点，能够编写已经设计用于优化关键渲染路径的高质量代码更加可行。
以上是什么是关键渲染路径以及如何优化它的详细内容。更多信息请关注PHP中文网其他相关文章！
