一、 页面渲染过程

image.png image.png

（1）解析html，构造DOM树
（2）构造CSSOM树( CSSOM = CSS Object Model CSS对象模型)
（3）根据DOM树和CSSOM来构造渲染树（不包含display为none的元素）
（4）layout render tree，得到节点的几何信息（位置，大小）
（5）根据渲染树以及layout得到的几何信息得到节点的绝对像素

为了构建渲染树，浏览器主要完成了以下工作：
（1）从DOM树的根节点开始遍历每个可见节点
（2）对于每个可见的节点，找到CSSOM树中对应的规则，并应用它们
（3）根据每个可见节点以及其对应的样式，组合生成渲染树

二、回流Reflow与重绘Repaint

回流一定会重绘，但是重绘可以单独发生

影响页面布局的会导致回流
不会改变页面布局的只需要重绘

1、回流这一阶段主要是计算节点的位置和几何信息，那么当页面布局和几何信息发生变化的时候，就需要回流。比如以下情况：

(1) 添加或删除可见的DOM元素
(2) 元素的位置发生变化
(3) 元素的尺寸发生变化
(4) 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代。
(5) 页面一开始渲染的时候（这肯定避免不了）
(6) 浏览器的窗口尺寸变化
(7) 获取布局信息的操作的时候。大多数浏览器都会通过队列化修改并批量执行来优化重排过程。浏览器会将修改操作放入到队列里，直到过了一段时间或者操作达到了一个阈值，才清空队列。但是当你获取布局信息的操作的时候，会强制队列刷新。所以getBoundingClientRect、offsetWidth这类值不要重复获取

2、减少回流（重排）：
（1）合并样式操作，最后一次性修改
（2）让需要多次重排的元素脱离文档流，这样修改它不会影响其他元素布局
（3）可以先display为none，操作完后再显示
（4）使用文档片段构建新元素，一次性append

三、阻塞页面渲染

（1）下载css不会影响DOM树构建（因为css不会操作dom），不会影响js下载，但阻塞js执行（可以测试放一个迟迟下载不下来的css，看js的执行时间），会阻塞渲染。
（2）js加载和执行会阻塞DOM树构建，阻塞渲染（因为js既能操作DOM，又能修改css）

• 解析html时遇到script标签会等执行完脚本后再继续构建DOM树，即js运行会阻塞DOM树的构建。因为js中可能会创建，删除节点等，这些操作会对dom树产生影响，如果不阻塞，等浏览器解析完标签生成dom树后，js修改了某些节点，那么浏览器又得重新解析，然后生成dom树，性能比较差。
• CSS应尽早加载，防止随着CSS规则树的构建，还需要对之前渲染树重新渲染
• JS放在body标签结束之前： 因为中途Script脚本——阻塞解析。首先放在底部可以确保能取到需要操作的DOM对象，也可缩短因JS阻塞而造成的白屏时间。如果把JS放在head部分，JS运行会阻塞DOM树和CSS树构建，导致白屏时间延长。