渲染流程

1. 浏览器获取到 HTML 资源后开始解析 HTML (DOM tree)
2. 解析到 CSS 后根据 CSS 生成 CSS 规则树 (style rules)
3. 在 DOM 树和 CSS 规则树都生成完后，通过 DOM 树和 CSS 规则树生成渲染树 (render tree)
   1. DOM 构建完成后触发 DOMContentLoaded（jQuery 的 $(document).ready() 即对该原生事件的封装）
   2. 整个页面加载完毕（包括图片等），触发 onload 事件
4. 渲染树构建完成后，浏览器开始计算元素的大小和位置 (layout)
5. 根据计算好的节点信息将内容绘制到屏幕上 (painting)

1. DOM 树和 CSS 规则树（按先后顺序）
   1. 浏览器获取的 HTML 资源后自上而下开始解析，生成 DOM 树
   2. 如果遇到 style 的内联样式和 link 会将 CSS 交由 CSS 渲染器构建 CSS 规则树；其中加载 link 引入的外部样式文件是异步加载的，并且整个 CSS 规则树也是与 DOM 树的构建是并行的
2. JavaScript 脚本的加载
   • 由于 JS 可以操作 DOM，所以在 HTML 解析到 JavaScript 脚本时会停止对 DOM 的解析；而 CSS 的解析会阻塞 JS 的执行，所以在某些情况下 CSS 的解析会通过阻塞 JS 的执行而间接阻塞 DOM 的解析；
   • defer：defer 脚本会在 DOM 解析完成后，DOMContentLoaded 事件调用前执行，而且 defer 属性的 JS 脚本会按照顺序执行
   • async：JS 在下载完成后立即执行；脚本按照加载完成的顺序执行，可能会打乱脚本之间的执行顺序
3. 渲染树 (render tree) 的构建过程
   1. 从 DOM 树的根节点开始遍历每一个可见的节点；而不可见、不参与渲染的节点会被跳过，不纳入渲染树，例如引用 CSS 文件的 link 标签、引入 JS 文件的 script 标签和 CSS 属性设置了 display: none; 的节点
   2. 从 CSS 规则树 (style rules) 中找到对应的节点，然后根据节点信息和样式组合成渲染树 (render tree)
4. 相关私有笔记