display none的元素重新展示如何撑开页面_看看浏览器如何解析我们写的页面？

概述：浏览器渲染一共有五步

• 处理 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标签的时候，发生下面四件事情

1. html 解析器停止解析,
2. 如果是外部脚本，就从外部网络获取脚本代码
3. 将控制权交给 js 引擎，执行 js 代码
4. 恢复 html 解析器的控制权

由此可以得到第一个结论1

• 由于