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