DOM树
CSSOM规则树
生成渲染树（节点被称为渲染对象）
根据渲染树进行布局（回流/自动重排）
绘制
重绘
当渲染树中的一些元素需要更新属性，而这些属性只是影响元素的外观、风格，而不会影响布局的操作，比如 background-color，我们将这样的操作称为重绘
当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作，这样的操作我们称为回流
回流
触发方式
添加或者删除可见的 DOM 元素
元素尺寸改变——边距、填充、边框、宽度和高度
内容变化，比如用户在 input 框中输入文字
浏览器窗口尺寸改变——resize事件发生时
计算 offsetWidth 和 offsetHeight 属性
设置 style 属性的值
当你修改网页的默认字体时
如何减少
使用 transform 替代 top
不要把节点的属性值放在一个循环里当成循环里的变量
不要使用 table 布局，可能很小的一个小改动会造成整个 table 的重新布局
把 DOM 离线后修改。如：使用 documentFragment 对象在内存里操作 DOM
不要一条一条地修改 DOM 的样式。与其这样，还不如预先定义好 css 的 class，然后修改 DOM 的 className
为了避免JS执行请求或影响样式信息，所以如果浏览器尚未完成CSSOM的下载和构建，浏览器将延迟JS脚本执行和文档解析，直到CSSOM下载和构建完成
JavaScript的加载、解析和执行会阻塞文档的解析，如果遇到<script>标签，当前执行流程会转移到JS引擎；
所以脚本位置后移是比较好的，也可以添加defer或async属性
defer
defer 属性表示延迟执行引入的 JavaScript，即这段 JavaScript 加载时 HTML 并未停止解析，这两个过程是并行的。当整个 document 解析完毕后再执行脚本文件，在 DOMContentLoaded 事件触发之前完成。多个脚本按顺序执行。
async
async 属性表示异步执行引入的 JavaScript，与 defer 的区别在于，如果已经加载好，就会开始执行，也就是说它的执行仍然会阻塞文档的解析，只是它的加载过程不会阻塞。多个脚本的执行顺序无法保证。
默认
浏览器会立即加载并执行指定的脚本，也就是说不等待后续载入的文档元素，读到就加载并执行
如何优化渲染路径
对关键路径进行分析和特性描述：资源数、字节数、长度
最大限度减少关键资源的数量：删除它们，延迟它们的下载，将它们标记为异步等
优化关键字节数以缩短下载时间（往返次数）
优化其余关键资源的加载顺序：您需要尽早下载所有关键资源，以缩短关键路径长度
主流程
页面解析在 Renderer 进程中进行，Renderer 进程通过在主线程中持有的 Blink 实例边接收边解析 HTML 内容
每次从网络缓冲区中读取 8KB 以内的数据。浏览器自上而下逐行解析 HTML 内容，经过词法分析、语法分析，构建 DOM 树
遇到外部CSS链接时，主线程调用网络请求模块异步获取资源，不阻塞DOM树构建。下载完后，主线程解析CSS内容，经过词法、语法分析构建CSSOM树
浏览器结合DOM和CSSOM树构建Render树，计算布局属性（每个Node的集合属性、在坐标系中的位置）
