共计 2381 个字符，预计需要花费 6 分钟才能阅读完成。
你好，这里是全网优质的技术社区：前端修罗场。
咱们晓得渲染页面是一个将服务器的响应内容翻译成图片的过程。然而，如果你页面的渲染性能比拟蹩脚的话，可能会带来绝对较高的跳出率。
在本文中，我将重点关注网页的 初始渲染 ，即 它从解析 HTML 开始 。我将摸索 可能导致高渲染工夫的问题 ， 以及如何解决它们。
要害渲染门路（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 代表首屏 。 这是立刻可见的区域，无需滚动。 因而，最好以首先加载所需款式和脚本的形式重新排列与渲染相干的所有内容，而其余所有内容都进行（既不解析也不渲染）。
结尾
总而言之，网站性能优化蕴含了网站响应的各个方面，例如缓存、设置 CDN、重构、资源优化等，然而所有这些都能够逐渐实现。作为 Web 开发人员，你能够将本文作为参考，并始终记住在试验之前和之后测量性能。
浏览器开发人员尽最大致力优化你拜访的每个页面的网站性能，这就是浏览器通常实现所谓的“预加载器”的起因。这部分程序会在你以 HTML 格局申请的资源之前进行扫描，以便一次收回多个申请并让它们并行运行。这就是为什么在 HTML（逐行）以及脚本标签中放弃款式标签彼此凑近的起因。
此外，尝试批量更新 HTML 以防止多个布局事件 ， 这些事件不仅由 DOM 或 CSSOM 中的更改触发，而且在设施方向更改和窗口大小调整时也会触发。
