网页时间html从解析HTML开端破解页面衬着时光长难题

本文分享自华为云社区《页面首屏渲染性能指南-云社区-华为云》，作者：Ocean2022。

我们知道渲染页面是一个将做事器的相应内容翻译成图片的过程。
但是，如果你页面的渲染性能比较糟糕的话，可能会带来相对较高的跳出率。

在本文中，我将重点关注网页的初始渲染，即它从解析 HTML 开始。
我将探索可能导致高渲染韶光的问题，以及如何办理它们。

网页时间html从解析HTML开端破解页面衬着时光长难题 RESTful API

关键渲染路径（CRP）

关键渲染路径 (CRP) 是浏览器将代码转换为屏幕上可显示像素的过程。
它有几个阶段，个中一些可以并行实行以节省韶光，但有些部分必须依次完成。
如下图所示：

首先，一旦浏览器得到相应，它就会开始解析它。
当它碰着依赖项时，它会考试测验下载它。
如果它是一个样式表文件，浏览器必须在渲染页面之前完备解析它，这便是为什么 CSS 会壅塞渲染的缘故原由。

如果是脚本，浏览器必须：停滞解析，下载脚本，然后运行。
只有在那之后它才能连续解析，由于 JavaScript 程序可以改变网页的内容（尤其是 HTML）。
这便是为什么 JS 会壅塞解析的缘故原由。

完成所有解析后，浏览器将构建文档工具模型 (DOM) 和级联样式表工具模型 (CSSOM)。
将它们组合在一起得到渲染树。
页面的不显示部分不会进入渲染树，由于它只包含绘制页面所需的数据。

倒数第二步是将渲染树进行布局，这个阶段也称为回流：便是打算每个渲染树节点的每个位置及其大小的地方。

末了一步是绘制。
它会根据浏览器在前一阶段打算得到的数据对像素进行着色。

优化干系结论

因此，根据这一过程，我们在优化性能方面，得出了一些结论。
如果你要提升页面初始化渲染的性能，你须要：

减少传输的数据量减少浏览器必须下载的资源数量（尤其是壅塞的资源）减小 CRP 的长度

同时，我们会根据下面 3 个指标来衡量优化的效率：

FP(First Paint)FCP(First Contentful Paint)FMP(First Meaningful Paint)

除了渲染韶光之外，还有其他一些成分也须要考虑。
例如，你的页面利用了多少壅塞资源以及下载它们须要多永劫光。

性能优化策略

鉴于我们在上面得出的结论，我们得出网站性能优化有三种紧张策略：

只管即便减少通过网络传输的数据量；减少通过网络传输的资源总数；缩短关键渲染路径；1. 减少要传输的数据量

首先，移除所有未利用的部分，例如 JavaScript 中无法访问的函数、带有从不匹配任何元素的选择器的样式以及被 CSS 永久隐蔽的 HTML 标签。
其次，删除所有重复项。

然后，我建议建立一个自动压缩过程。
例如，它该当从你的后端做事中删除所有注释（但不是源代码）以及每个不包含附加信息的字符（例如 JS 中的空缺字符）。

完成后，我们剩下的可以是文本字符串。
这意味着我们可以安全地运用诸如 GZIP（大多数浏览器都理解）之类的压缩算法。

末了，还有缓存。
浏览器第一次呈现页面时它不会有帮助，但它会在往后的访问中节省很多。
但是，记住两点至关主要：

如果你利用 CDN，请确保支持缓存并在精确设置。
与其等待资源的到期，不如将文件的“指纹”嵌入到其 URL 中，以使本地缓存无效。

当然，该当为每个资源定义缓存策略。
有些可能很少改变或根本不会改变，有的则是变革的很快，还有些文件包含敏感的信息（可以利用 “private” 防止 CDN 缓存私有数据）。

2. 减少关键资源的总数

“关键”仅指网页精确呈现所需的资源。
因此，我们可以直接跳过所有流程中没有涉及的样式以及脚本文件。

样式

为了见告浏览器不须要特定的 CSS 文件，我们该当为所有引用样式表的链接设置媒体属性。
利用这种方法，浏览器将只根据须要处理与当前媒体（设备类型、屏幕尺寸）匹配的资源，同时降落所有其他样式表的优先级。
例如，如果你将 media=“print” 属性添加到引用样式以打印页面的样式标记，则这些样式不会在不打印媒体时滋扰你的关键渲染路径。

为了进一步改进该过程，你还可以将一些样式内联，这可以为我们节省了至少一次到做事器的来回行程。

脚本

如上所述，脚本会壅塞解析，由于它们可以改变 DOM 和 CSSOM。
为了避免这一点，所有脚本标签都必须用属性标记——异步或延迟。

标有 async 的脚本不会壅塞 DOM 构建或 CSSOM，由于它们可以在 CSSOM 构建之前实行。
但请记住，内联脚本无论如何都会阻挡 CSSOM，除非你将它们放在 CSS 之上。

比较之下，标有 defer 的脚本将在页面加载结束时进行实行。

换句话说，利用 defer，脚本直到页面加载事宜被触发后才会实行，而 async 让脚本在文档被解析时就会在后台运行。

3.缩短关键渲染路径长度

末了，应将 CRP 长度缩短到可能的最小值。

作为样式标签属性的媒体查询将减少必须下载的资源总数。
script 标签属性 defer 和 async 将防止相应的脚本壅塞解析。

利用 GZIP 压缩、压缩和归档资源将减少传输数据的大小（从而也减少数据传输韶光）。

内联一些样式和脚本也可以减少浏览器和做事器之间的来回次数。

按照最新的最佳性能实践理念，一个网站该当做的最快的第一件事便是展示 ATF 内容。
ATF 代表首屏。
这是立即可见的区域，无需滚动。
因此，最好以首先加载所需样式和脚本的办法重新排列与渲染干系的所有内容，而其他所有内容都停滞（既不解析也不渲染）。