前端页面渲染过程

当浏览器拿到一个html文件，它会怎样渲染出整个页面呢？我们将这个渲染过程分为3个步骤：
1、构建DOM树与CSSOM树
2、构建渲染树（Render tree）
3、进行重排（reflow）与重绘（repaint）

浏览器页面渲染过程

下面我们来逐一介绍：
1、构建DOM树与CSSOM树
这两者是比较相似的，所以我们放在一起来说。html与css都是拥有层级关系的结构，所以我们将其解析为树结构。
（1）拿到html文件后，首先会将字节转换为字符，确认tokens标签，然后转换为节点，通过节点构建DOM树。
（2）同样的，对应的css也会将字节转换为字符，确认tokens标签，然后转换为节点，通过节点构建CSSOM树。在解析html的过程中，遇到head标签中引用的css，会暂停DOM树的构建，先将css解析并构建CSSOM，然后再继续解析html。这是因为如果后面的html用到了css样式，而样式没有提前解析，就会出现无样式状态。
（3）加载js，在页面渲染期间，如果遇到javascript，浏览器的渲染引擎会暂停工作，先交给javascript引擎来执行需要的js代码。因为如果后面的DOM中涉及到js修改的节点，会造成两次渲染，所以要进行js阻塞。

2、构建渲染树
在DOM树和CSSOM树构建的过程中，渲染树会同时进行构建，它将DOM与CSS进行合并，形成渲染树。
3、重绘与重排
完成渲染树的构建之后，页面会进行初始化渲染，也就是重排（回流），这时一个完整的页面就渲染完成了。

重绘与重排

1、什么是重绘？
页面重绘，页面中的DOM节点属性发生改变（这种改变不会影响元素的位置、大小、边距等），这时需要替换为新的样式，浏览器发生重绘。
2、什么是重排？
页面重排（回流），页面中DOM节点属性改变（这种改变会影响到元素的位置、大小、边距等），这时会引发重排，此元素后面的节点也会一起重新渲染。
3、什么情景会造成重绘？
（1）修改元素的颜色、
4、什么情景会造成重排？
（1）修改元素的显示隐藏（影响布局位置）
（2）修改元素大小
（3）修改内容，行内元素的内容影响整体内容块的大小
（4）修改元素的内外边距
（5）添加或删除可见元素
（6）页面初始化渲染
（7）改变浏览器视窗大小resize
5、如何减少重绘与重排？
（1）修改样式尽量使用class，不要大量操作DOM元素
（2）多个样式合并在一起，只进行一次重排
（3）使用display：none，只引发一次重排
（4）让元素脱离文档流，不影响整体布局

注意：重排必定引发重绘，重绘不一定引发重排