浏览器渲染

浏览器内核分为：渲染引擎、js 引擎

页面加载过程

解析
- 解析 html/svg/xhtml，生成 dom 树
- 解析 css，生成 css 规则树
- 运行 js，js 加载完成后，通过 api 来操作 dom 树和 css 规则树
构建
解析完成后，通过 dom 树和 css 规则树来构建渲染树（rendering tree），渲染树只会包含需要显示的节点和样式信息，如某个节点是 display:none，则不会包含在渲染树中
布局
根据渲染树来进行布局（也可以叫做回流），该阶段浏览器要做的事情是弄清楚各个节点在页面中的确切位置和大小，该行为通常也被成为“自动重排”
绘制
布局完成后、浏览器调用操作系统原生 api 绘制

渲染过程中，如果遇到 js，则停止渲染，把控制权交给 js 引擎，等 js 引擎运行完毕，再从中断的地方恢复 dom 构建

因为浏览器渲染是单线程，渲染引擎与 js 引擎共用一个线程

如果浏览器尚未完成 CSSOM 的下载和构建，而我们却想在此时运行脚本，那么浏览器将延迟脚本执行和 dom 构建，直至其完成 CSSOM 的下载和构建。

也就是说，在这种情况下，浏览器会先下载和构建 CSSOM，然后再执行 js，最后再继续构建 dom 。

对 dom 的修改导致了样式的变化、却未影响其几何属性时，浏览器不需要重新计算几何属性，直接为该元素绘制新的样式

影响了几何属性变化

浏览器工作流程：构建 dom -> 构建 cssom -> 构建渲染树 -> 布局 -> 绘制
cssom 会阻塞渲染，只有当 cssom 构建完毕后才会进入下一个阶段构建渲染树
通常情况下 dom 和 cssom 是并行构建的，但是当浏览器遇到一个不带 defer 或 async 属性的 script 标签时，dom 构建将暂停，如果此时又恰巧浏览器尚未完成 cssom 下载和构建，由于 js 可以修改 cssom，所以需要等待 cssom 构建完毕后再执行 js，最后才重新构建 dom