整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
述：浏览器渲染一共有五步
具体如下图过程如下图所示
二、浏览器渲染五个阶段
2.1 第一步：解析HTML标签，构建DOM树
在这个阶段，引擎开始解析 html ，解析出来的结果会成为一棵 dom 树
dom 的目的至少有 2 个
getElementById
当解析器到达script标签的时候，发生下面四件事情
由此可以得到第一个结论1
2.2 第二步：解析CSS标签，构建CSSOM树
通过以下手段可以减轻cssom带来的影响
2.3 第三步：把DOM和CSSOM组合成渲染树（render tree）
2.4 第四步：在渲染树的基础上进行布局，计算每个节点的几何结构
布局( layout )：定位坐标和大小，是否换行，各种 position , overflow , z-index 属性
2.5 调用 GPU 绘制，合成图层，显示在屏幕上
将渲染树的各个节点绘制到屏幕上，这一步被称为绘制 painting
三、渲染优化相关
3.1 Load 和 DOMContentLoaded 区别
3.2 图层
一般来说，可以把普通文档流看成一个图层。特定的属性可以生成一个新的图层。不同的图层渲染互不影响，所以对于某些频繁需要渲染的建议单独生成一个新图层，提高性能。但也不能生成过多的图层，会引起反作用。
通过以下几个常用属性可以生成新图层
3.3 重绘（Repaint）和回流（Reflow）
重绘和回流是渲染步骤中的一小节，但是这两个步骤对于性能影响很大
color
回流必定会发生重绘，重绘不一定会引发回流。回流所需的成本比重绘高的多，改变深层次的节点很可能导致父节点的一系列回流
以下几个动作可能会导致性能问题
window
很多人不知道的是，重绘和回流其实和 Event loop 有关
3.4 减少重绘和回流
使用 translate 替代 top
for(let i = 0; i < 1000; i++) {
// 获取 offsetTop 会导致回流，因为需要去获取正确的值
console.log(document.querySelector('.test').style.offsetTop)
}
要：在本文中，将重点关注网页的初始渲染，即它从解析 HTML 开始。 我将探索可能导致高渲染时间的问题，以及如何解决它们。
本文分享自华为云社区《页面首屏渲染性能指南-云社区-华为云》，作者：Ocean2022。
我们知道渲染页面是一个将服务器的响应内容翻译成图片的过程。但是，如果你页面的渲染性能比较糟糕的话，可能会带来相对较高的跳出率。
在本文中，我将重点关注网页的初始渲染，即它从解析 HTML 开始。 我将探索可能导致高渲染时间的问题，以及如何解决它们。
关键渲染路径 (CRP) 是浏览器将代码转换为屏幕上可显示像素的过程。 它有几个阶段，其中一些可以并行执行以节省时间，但有些部分必须依次完成。 如下图所示：
首先，一旦浏览器得到响应，它就会开始解析它。 当它遇到依赖项时，它会尝试下载它。 如果它是一个样式表文件，浏览器必须在渲染页面之前完全解析它，这就是为什么 CSS 会阻塞渲染的原因。
如果是脚本，浏览器必须：停止解析，下载脚本，然后运行。 只有在那之后它才能继续解析，因为 JavaScript 程序可以改变网页的内容（尤其是 HTML）。 这就是为什么 JS 会阻塞解析的原因。
完成所有解析后，浏览器将构建文档对象模型 (DOM) 和级联样式表对象模型 (CSSOM)。 将它们组合在一起得到渲染树。 页面的不显示部分不会进入渲染树，因为它只包含绘制页面所需的数据。
倒数第二步是将渲染树进行布局， 这个阶段也称为回流：就是计算每个渲染树节点的每个位置及其大小的地方。
最后一步是绘制。 它会根据浏览器在前一阶段计算得到的数据对像素进行着色。
因此，根据这一过程，我们在优化性能方面，得出了一些结论。如果你要提升页面初始化渲染的性能，你需要：
同时，我们会根据下面 3 个指标来衡量优化的效率：
除了渲染时间之外，还有其他一些因素也需要考虑。例如，你的页面使用了多少阻塞资源以及下载它们需要多长时间。
鉴于我们在上面得出的结论，我们得出网站性能优化有三种主要策略：
首先，移除所有未使用的部分，例如 JavaScript 中无法访问的函数、带有从不匹配任何元素的选择器的样式以及被 CSS 永远隐藏的 HTML 标签。 其次，删除所有重复项。
然后，我建议建立一个自动压缩过程。 例如，它应该从你的后端服务中删除所有注释（但不是源代码）以及每个不包含附加信息的字符（例如 JS 中的空白字符）。
完成后，我们剩下的可以是文本字符串。 这意味着我们可以安全地应用诸如 GZIP（大多数浏览器都理解）之类的压缩算法。
最后，还有缓存。 浏览器第一次呈现页面时它不会有帮助，但它会在以后的访问中节省很多。 但是，记住两点至关重要：
当然，应该为每个资源定义缓存策略。 有些可能很少改变或根本不会改变，有的则是变化的很快，还有些文件包含敏感的信息（可以使用 “private” 防止 CDN 缓存私有数据）。
“关键”仅指网页正确呈现所需的资源。 因此，我们可以直接跳过所有流程中没有涉及的样式以及脚本文件。
为了告诉浏览器不需要特定的 CSS 文件，我们应该为所有引用样式表的链接设置媒体属性。 使用这种方法，浏览器将只根据需要处理与当前媒体（设备类型、屏幕尺寸）匹配的资源，同时降低所有其他样式表的优先级。 例如，如果你将 media=“print” 属性添加到引用样式以打印页面的样式标记，则这些样式不会在不打印媒体时干扰你的关键渲染路径。
为了进一步改进该过程，你还可以将一些样式内联，这可以为我们节省了至少一次到服务器的往返行程。
如上所述，脚本会阻塞解析，因为它们可以改变 DOM 和 CSSOM。 为了避免这一点，所有脚本标签都必须用属性标记——异步或延迟。
标有 async 的脚本不会阻塞 DOM 构建或 CSSOM，因为它们可以在 CSSOM 构建之前执行。 但请记住，内联脚本无论如何都会阻止 CSSOM，除非你将它们放在 CSS 之上。
相比之下，标有 defer 的脚本将在页面加载结束时进行执行。
换句话说，使用 defer，脚本直到页面加载事件被触发后才会执行，而 async 让脚本在文档被解析时就会在后台运行。
最后，应将 CRP 长度缩短到可能的最小值。
作为样式标签属性的媒体查询将减少必须下载的资源总数。 script 标签属性 defer 和 async 将防止相应的脚本阻塞解析。
使用 GZIP 压缩、压缩和归档资源将减少传输数据的大小（从而也减少数据传输时间）。
内联一些样式和脚本也可以减少浏览器和服务器之间的往返次数。
按照最新的最佳性能实践理念，一个网站应该做的最快的第一件事就是展示 ATF 内容。 ATF 代表首屏。 这是立即可见的区域，无需滚动。 因此，最好以首先加载所需样式和脚本的方式重新排列与渲染相关的所有内容，而其他所有内容都停止（既不解析也不渲染）。
总而言之，网站性能优化包含了网站响应的各个方面，例如缓存、设置 CDN、重构、资源优化等，但是所有这些都可以逐步完成。 作为 Web 开发人员，你可以将本文作为参考，并始终记住在实验之前和之后测量性能。
浏览器开发人员尽最大努力优化你访问的每个页面的网站性能，这就是浏览器通常实现所谓的“预加载器”的原因。 这部分程序会在你以 HTML 格式请求的资源之前进行扫描，以便一次发出多个请求并让它们并行运行。 这就是为什么在 HTML（逐行）以及脚本标签中保持样式标签彼此靠近的原因。
此外，尝试批量更新 HTML 以避免多个布局事件，这些事件不仅由 DOM 或 CSSOM 中的更改触发，而且在设备方向更改和窗口大小调整时也会触发。
点击下方，第一时间了解华为云新鲜技术~
华为云博客_大数据博客_AI博客_云计算博客_开发者中心-华为云
览器解析HTML文件的过程是网页呈现的关键步骤之一。具体介绍如下：
HTML文档的接收和预处理
解析为DOM树
CSS解析与CSSOM树构建
JavaScript加载与执行
渲染树的构建
布局计算（Layout）
绘制（Paint）
因此，我们开发中要注意以下几点：
综上所述，浏览器解析HTML文件是一个复杂而高度优化的过程，涉及从网络获取HTML文档到最终将其渲染到屏幕上的多个步骤。开发者需要深入理解这些步骤，以优化网页性能和用户体验。通过合理组织HTML结构、优化资源加载顺序、减少不必要的DOM操作和合理安排CSS和JavaScript的加载与执行，可以显著提升页面加载速度和运行效率。
*请认真填写需求信息，我们会在24小时内与您取得联系。
