05-2 html+js+css是如何解析渲染的
CSS 是如何工作的 - 按照js是否存在/引入方式不同
1/3、html + css 文件的渲染流程分析
先看下面的一个示例代码
分析一下这段示例代码是怎么渲染的：
核心要注意的几点：
1、渲染进程/浏览器进程，发起的主页面请求被送到 网络进程 中去执行
2、网络进程请求到 HTML 数据后，将其发送给 渲染进程，然后渲染进程会解析 HTML 并构建 DOM，注意请求 HTML 数据和构建 DOM 中间有一段【空闲时间】
3、当渲染进程接收 HTML 文件字节流时，会先开启一个预解析线程，如果遇到 JS 文件或者 CSS 文件，那么预解析线程会 提前下载 这些数据
4、在 DOM 构建结束之后、css 文件还未下载完成 的这段时间内，渲染流水线无事可做 – 【空闲时间】，因为下一步要合成布局树，需要 CSSOM 和 DOM，所以需要等 CSS 下载完毕并解析成 CSSOM
5、等 DOM 和 CSSOM 都构建好之后，渲染引擎就会 构造布局树 – 布局树的结构基本上就是复制 DOM 树的结构，不同之处在于 DOM 树中那些 不需要显示的元素会被过滤掉，如 display:none 属性的元素、head 标签、script 标签等
6、复制好基本的布局树结构之后，渲染引擎会为对应的 DOM 元素选择对应的样式信息，这个过程就是 样式计算。样式计算完成之后，渲染引擎还需要计算布局树中每个元素对应的几何位置，这个过程就是 计算布局。通过样式计算和计算布局就完成了最终布局树的构建。再之后，就该进行后续的绘制操作了。
2/3、html + css + script 的渲染流程分析
注意点：
1、解析 DOM 的过程中，如果遇到了 JS 脚本，那么需要先 暂停 DOM 解析去执行 JS，因为 JS 有可能会修改当前状态下的 DOM
2、但是在执行 JS 脚本之前，如果页面中包含了 外部 CSS 文件的引用/style标签 内置了 css 内容 – 渲染引擎需要先将这些内容转换为 CSSOM，因为 JS 有修改 css 的能力 —> 所以我们常说：css 在部分情况下也会阻塞 DOM 的生成
3/3、html + css + 引入js文件 的渲染流程分析
注意点：
1、HTML 预解析器识别出来了有 CSS 文件和 JS 文件需要下载，然后就同时发起这两个文件的下载请求，需要注意的是，这两个文件的下载过程是重叠的，所以下载时间按照最久的那个文件来算
2、不管 CSS 文件和 JS 文件谁先到达，都要 等到 CSS 文件下载完成并生成 CSSOM，然后再执行 JavaScript 脚本，最后再继续构建 DOM，构建布局树，绘制页面
优化首屏体验
视觉阶段
1、发起主页面 HTML 请求后，在网络进程拿到数据喂给 渲染进程 前 –> 页面还是展示的原来的页面
2、渲染进程 拿到数据后，会创建一个 空白页面 （这个空白页面就是常说的 解析白屏），然后 等待 css 和 js 文件加载完成 -> 先生成 CSSOM -> 执行 js -> 合成布局树 -> 首次渲染
3、首次渲染完成后，进入完整页面的生成阶段
优化点
1、网络/服务器处理 2、解析白屏时间优化
- 内联 JS、内联 CSS 来避免两种类型的文件下载，这样获取到 HTML 文件之后就可以直接开始渲染流程了
- 还可以尽量 减少文件大小，比如通过 webpack 等工具移除一些不必要的注释，并压缩 JavaScript 文件
- 还可以将一些不需要在解析 HTML 阶段使用的 JavaScript 标记上 sync 或者 defer
- 对于大的 CSS 文件，可以通过媒体查询属性，将其拆分为多个不同用途的 CSS 文件，这样只有在特定的场景下才会加载特定的 CSS 文件