概述:浏览器渲染一共有五步
- 处理 HTML 并构建 DOM 树。
- 处理 CSS 构建 CSSOM 树。
- 将 DOM 与 CSSOM 合并成一个渲染树。
- 根据渲染树来布局,计算每个节点的位置。
- 调用 GPU 绘制,合成图层,显示在屏幕上
具体如下图过程如下图所示
- 在构建 CSSOM 树时,会阻塞渲染,直至 CSSOM 树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程,所以应该尽量保证层级扁平,减少过度层叠,越是具体的 CSS 选择器,执行速度越慢
- 当 HTML 解析到 script 标签时,会暂停构建 DOM ,完成后才会从暂停的地方重新开始。也就是说,如果你想首屏渲染的越快,就越不应该在首屏就加载 JS 文件。并且 CSS 也会影响 JS 的执行,只有当解析完样式表才会执行 JS ,所以也可以认为这种情况下, CSS 也会暂停构建 DOM
二、浏览器渲染五个阶段
2.1 第一步:解析HTML标签,构建DOM树
在这个阶段,引擎开始解析 html ,解析出来的结果会成为一棵 dom 树
dom 的目的至少有 2 个
getElementById
当解析器到达script标签的时候,发生下面四件事情
- html 解析器停止解析,
- 如果是外部脚本,就从外部网络获取脚本代码
- 将控制权交给 js 引擎,执行 js 代码
- 恢复 html 解析器的控制权
由此可以得到第一个结论1
- 由于