浏览器渲染机制及重排(reflow)和重绘详解(repaint)

一、浏览器的线程与进程

浏览器的每一个网页都是一个单独的进程，使用进程来隔离不同的网页
一个浏览器通常由以下几个常驻线程组成：
1、GUI渲染线程（GUI渲染线程和JavaScript引擎线程是互斥的
2、JavaScript引擎线程
3、定时触发器线程
4、事件触发线程
5、异步http请求线程

二、浏览器渲染流程

1、构建DOM树
2、构建构建CSSOM树
3、根据DOM树和CSSOM树构建Render树
4、Render树布局，生成各个计算好大小的盒模型，从左到右，从上到下
5、Render树绘制

三、渲染细节

1、构建DOM树，是一个深度遍历的过程，当前节点的所有子节点都构建好以后才构建它的兄弟节点
2、生成Render树：display:none的元素不会在Render树上，visibility:hidden的元素会在Render树上
3、DOM树和Render树
Render树上的Renderer和DOM元素是相对的，但并不是一一对应，有些DOM元素没有对应的Renderer，而有些DOM元素有好几个Renderer
4、构建DOM树的时候如果发现有css加载，那么就会启动预解析的操作，交由网络进程加载css资源，构建DOM树和加载css资源是并行的。

四、线程阻塞问题

1、css加载不会阻塞DOM树的解析
2、css加载会阻塞DOM树的渲染（Render树要等CSSOM树构建好才能构建
3、css加载会阻塞后面js语句的执行
4、css加载有时候会间接阻塞DOM树的解析
在有js代码的时候，无论该js代码是否会操作css，js都会被阻塞，等css加载完、CSSOM树构建成功后才能执行

人话解释版本：DOM树的构建和css加载，在正常情况下是并行的。但是，在有js脚本的情况就不一样了，js会阻塞DOM树的构建，但是js依赖于CSSOM树，所以会等css加载完毕，构建完CSSOM树后才执行js，js执行完毕后继续构建DOM树。

五、重排(reflow)和重绘(repaint)

重排、回流：当浏览器发现某个部分的页面布局和几何信息发生了变化的时候，就需要倒回去重新渲染了

• 添加或删除可见的DOM元素
• 元素的位置发生变化
• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
• 浏览器的窗口尺寸发生变化（因为回流是根据视口的大小来计算元素的位置和大小的）

重绘：改变某个元素的背景色、文字颜色、边框颜色等不影响它周围或内部布局的属性时，都会重新执行浏览器的Painting和Display过程（元素的几何信息没有变）