渲染引擎 & 页面渲染流程 & 阻塞
文档对象模型（Document Object Model，简称DOM）
浏览器渲染引擎
- 一个渲染引擎 主要模块：
- HTML 解析器
解释 HTML 文档的解析器，将 HTML 文本 解析成 DOM 树
- css 解析器
级联样式的解析器，为 DOM 中的各个元素计算出样式信息，为布局提高基础设施
- javascript 引擎
使用 Javascript 代码可以修改网页的内容，也能修改 css 的信息
javascript 引擎能够解释 javascript 代码，并通过 DOM 接口和 CSSOM 接口来修改网页内容和样式信息，从而改变渲染的结果。
- layout 布局模块
在 DOM 创建之后，Webkit 需要将其中的元素对象同样式信息结合起来，
计算他们的大小位置等布局信息，形成一个能表达这所有信息的内部表示模型
- 绘图模块
使用 图形库 将布局计算后的各个网页的节点 绘制成 图像结果
- 浏览器渲染页面的整个过程，浏览器会从上至下解析文档：
以上这些模块依赖很多其他的基础模块，包括要使用到网络 存储 2D/3D图像 音频视频解码器 和 图片解码器。
所以渲染引擎中还会包括如何使用这些依赖模块的部分。
1. 遇见 HTML 标记
调用 HTML 解析器解析为对应的 token （一个 token 就是一个标签文本的序列化）
并构建 DOM 树（就是一块内存，保存着 tokens，建立它们之间的关系）
2. 遇见 style/link 标记 调用 css 解析器 处理 CSS 标记并构建 内部表示结构 CSSOM 树
CSS 解析器工作完成之后，在 DOM 树上附加解释后的样式信息，这就是 RenderObject 树
RenderObject 在创建的同时，Webkit 会根据网页的结构创建 RenderLayer，同时构建一个绘图上下文
根据 绘图上下文 生成最终的图像（这一过程需要依赖图形库）
3. 遇见 script 标记 调用 javascript 解析器 处理 script 标记，绑定事件、修改 DOM 树 / CSSOM树 等
4. 将 DOM 树 与 CSSOM 树 再次合并成一个渲染树 Render 树
5. 根据 渲染树 来布局，以计算每个节点的几何信息____重排
6. 将各个节点绘制到屏幕上____重绘
- 上面介绍的是一个完整的渲染过程
但现代网页很多都是动态的，这意味着在渲染完成之后，
由于网页的动画或者用户的交互，浏览器其实一直在不停地重复执行渲染过程。（重绘重排）
以上的数字表示的是基本顺序，这不是严格一致的，这个过程可能重复也可能交叉
- 网页在加载和渲染过程会触发 "DOMContentLoaded" 和 "load" 事件
----> 分别在 DOM 树解析完成后，触发 "DOMContentLoaded"
----> DOM 树构建并且网页所有依赖资源都加载完成之后发生，触发 "load"
- 实际测试
浏览器加载资源是异步的
用 <style> 内部样式表 写 css，是由 Parse HTML 异步解析的。
一张图片分多次解析，其中 Parse HTML 这么快，体现了其异步执行，只是开启了一个任务，让它自己去请求资源并解析
- css 阻塞 ---- 样式写在外部文件，在 index.css 中 link 导入
通过 link 进来的样式 是同步解析的，由 Parse Stylesheet 进行解析
正因为是同步解析，所以 css 解析器 会阻塞页面的渲染，从而避免了闪屏
这也是为什么推荐使用 <style link='index.css'> 引入外部样式表
- 阻塞
- css 阻塞
- <style> 标签中的样式
1. 由 html 解析器进行解析
2. 不阻塞浏览器渲染
3. 不阻塞 DOM 解析
- <link src='index.css'> 引入的外部 css 样式 (推荐使用 <link> 方式引入外部 css，可以避免闪屏现象)
1. 由 CSS 解析器进行解析
2. 会阻塞浏览器页面渲染(原因：避免闪屏)
<link rel="stylesheet" href="css/my-sleep-3000-commen.css" />
3. 不阻塞 DOM 结构的解析
因为 DOM 解析 和 CSS 解析是两个并行的进程
浏览器解析 DOM 生成 DOM Tree，解析 CSS 生成 CSS Tree
最终组成 render Tree，再渲染页面，DOM 的解析，和 CSS的解析并行的。
4. 会阻塞 js 的执行（但不会阻塞 js 等资源的加载）
脚本在文档解析阶段会请求样式信息，如果 css 还没有完全加载解析完，脚本可能获得错误的回复
- FireFox 会在样式表加载解析过程中，禁止所有脚本
- 对于 WebKit 而言，仅当脚本尝试访问样式属性可能会得到错误的回复时，禁止脚本的执行
优化方案： (尽可能快的提高 css 加载速度)
- 使用 CDN 加速
- 对 css 进行压缩(用打包工具，比如 webpack, gulp 等，也可以通过开启 gzip 压缩)
- 减少 http 请求数，将多个 css 文件合并
- js 阻塞
会阻塞 DOM 解析
因为 js 可能会修改 DOM 树
会阻塞 页面的渲染
因为 js 代码可能会修改 DOM 树 / CSSOM 树 的结构
js 会顺序执行，阻塞后续 js 逻辑的执行 (不阻塞 js 等其他资源的加载)
维护依赖关系
css 的解析 和 js 的执行 是互斥的 ( css 解析的时候 js 停止执行，js 执行的时候 css 停止解析)
预解析
WebKit 和 FireFox 都进行了这项优化。
在执行 js 脚本时，其他线程会解析文档的其余部分 (只是检查，不影响原结构)，找出并加载需要网络加载的其他资源
使得这些资源在并行连接上加载，从而提高总体速度
预解析器 不会修改 DOM 树，而是将这件事交给 主解析器 处理
预解析器 只会解析外部资源的引用（例如外部脚本、样式、图片）
提前发送请求，提前解析外部资源内容
