高级前端开发人员必备 - 第一部分

关键路径渲染

这是浏览器将 HTML、CSS 和 JS 转换为像素的一系列步骤

通过优化关键渲染路径，我们可以显著缩短页面的首次渲染时间。此外，了解关键渲染路径也是构建性能卓越的交互式应用程序的基础。

性能优化的关键在于了解在接收 HTML、CSS 和 JavaScript 字节以及将它们转换为渲染像素所需的处理之间的中间步骤中发生的情况 - 这是关键的渲染路径。

关键渲染路径经历 5 个不同的步骤，如下图所示。

让我们尝试逐一理解每个步骤

当浏览器接收到 HTML 时，它需要将 HTML 转换为文档对象模型，它经过 4 个小步骤来构建 DOM 树 - 转换、标记化、词法分析和 DOM 构建

注意：DOM 树可以部分渲染，并且被认为是非阻塞渲染

CSSOM 经历与 HTML 到 DOM 类似的步骤

CSS 字节被转换成字符，然后是标记，然后是节点，最后它们被链接到称为“CSS 对象模型”（CSSOM）的树结构中

标签内包含的任何文本（放置在 body 元素内）的字体大小均为 16 像素，且文本颜色为红色——font-size 指令从 body 元素向下级联到 span 元素。但是，如果 span 标签是段落 (p) 标签的子标签，则其内容不会显示。

注意：CSSOM 无法部分渲染，并且被视为渲染阻塞，我们无法渲染部分 CSSOM，因为 CSS 可能具有不同的选择器，并且这些选择器具有不同的特异性，因此很有可能渲染错误的样式

CSSOM 树和 DOM 树被组合成渲染树，渲染树用于计算每个可见元素的布局，并作为绘制过程的输入，最终将像素渲染到屏幕上。优化每个步骤对于实现最佳渲染性能至关重要。

从 DOM 树的根开始，遍历每个可见节点。
- 某些节点不可见（例如，脚本标签、元标签等），并且由于它们未反映在渲染的输出中而被省略。
- 一些节点通过 CSS 隐藏，并且也从渲染树中省略；例如，上例中的 span 节点在渲染树中缺失，因为我们有一个明确的规则在其上设置了“display: none”属性。
对于每个可见节点，找到适当的匹配 CSSOM 规则并应用它们。
发出带有内容及其计算样式的可见节点。

注意：顺便提一下，visibility: hidden 与 display: none 不同。前者使元素不可见，但元素仍然占用布局中的空间（即，它被渲染为一个空框）；而后者 (display: none) 会将元素从渲染树中完全移除，从而使元素不可见，并且不再是布局的一部分。

到目前为止，我们已经计算出哪些节点应该是可见的以及它们的计算样式，但我们还没有计算它们在设备视口内的确切位置和大小——这是“布局”阶段，也称为“重排”。

说明：
主体的宽度 100% 是根据视口宽度计算的，如果在元标记中我们像下面这样提及，则宽度将是设备的屏幕尺寸，例如：移动设备将是 320px，因此宽度：100% 将是body320px，div因为它是父级的 50% 将是 160px，p是 160px 的 50%，即 80px

<meta name='viewport' content='width=device-width'>

如果设备宽度未提及视口，则默认为 980px

这是最后阶段，将渲染树中的每个节点转换为屏幕上的实际像素

执行渲染树构建、布局和绘制所需的时间根据文档的大小、应用的样式以及运行文档的设备而有所不同：文档越大，浏览器的工作量就越大；样式越复杂，绘制所需的时间也越多（例如，绘制纯色的“成本”较低，而计算和渲染阴影的“成本”较高）。

快速回顾一下浏览器的步骤：

我故意留下了与 JS 相关的第 2 步和第 4 步，我将在即将发布的帖子中解释这些步骤，并将在此处更新这些帖子的链接，帖子的第二部分可以查看高级前端开发人员，面试要点 - 第 2 部分
，很高兴收到任何建设性的反馈

参考：