一、渲染过程
1.解析HTML文档，构建DOM tree;
2.解析CSS文件，构建CSSOM tree;
3.合并DOM tree和CSSOM tree，生成render tree；
4.开始布局，计算每个节点的位置信息；
5.将render tree每个节点绘制显示出来。
二、具体流程
1、解析HTML生成DOM tree
在浏览器接收到服务器响应来的HTML文档之后，会遍历文档节点，生成DOM tree。但是DOM tree的生成过程中可能会被CSS和JS的加载执行阻塞。
2、解析CSS生成CSSOM tree
浏览器解析CSS文件生成CSSOM tree，每个CSS文件都被分析成StyleSheet对象，每个对象都包含CSS规则，CSS规则包括选择器、一条或多条声明。
3、将DOM tree和CSSOM tree合并在一起生成render tree
通过DOM tree和CSSOM tree可以合成render tree。浏览器会先从DOM tree的根节点开始遍历每一个可见节点，然后找到与每一个可见节点适配的样式并进行应用。
对于不可见的元素，它们是不会出现在render tree上的，但是visibility为hidden的元素会出现这颗树上。
4、遍历render tree开始布局，计算每个节点的位置大小信息
布局阶段会从render tree的根节点开始遍历，然后确定每个节点在页面上的位置和大小，最后输出一个盒子模型，它会精确的捕获每个节点在屏幕上的确切位置和大小。
5、将render tree每个节点绘制显示出来
绘制阶段会遍历render tree，调用渲染器的paint()方法在屏幕显示内容。
render tree的绘制工作是由浏览器的UI后端组件完成的。
渲染阻塞:
浏览器解析文档，当遇到<script>标签时，会立即执行脚本，暂停文档的解析。因为JS可能会改动DOM和CSS，直到脚本执行完成，然后才会继续解析文档。
如果是外部脚本，则会先下载完脚本，然后再继续解析文档。
两个原则：CSS优先、JS置后。
三、reflow(回流)和repaint(重绘):
HTML默认是流式布局，CSS和JS会打破这种布局，改变DOM的外观样式以及大小和位置。
repaint：一般在改变DOM元素视觉效果时触发，不影响整体布局，是对某个DOM元素进行重绘，比如元素的背景色变了，不影响元素的大小和位置。
repaint的常见场景：
- 字体颜色的修改；
- 背景颜色的修改；
- text-align的修改等；
reflow：某个DOM元素的位置或尺寸变了，需要重新计算所有DOM元素的位置和大小。所以repaint比reflow的影响要大得多，整个页面需要重排，也就是对每个DOM元素进行重新渲染。
reflow的常见场景：
- width height padding margin border的修改；
- 窗口大小的改变；
- 文字大小的改变；
- 操作class属性；
- 添加、删除DOM元素或改变DOM元素的dispaly属性等；
四、性能优化
应当尽量少的reflow和repaint
- 尽量减少DOM元素的相互影响，直接修饰你想修饰的元素，避免通过父元素作用域子元素
- 避免设置内联样式
- 设置动画元素的position为fixed或absolute
- 权衡速度的平滑，动画精度太强，会造成更多的reflow或repaint
- 避免使用table布局，table的每个元素的大小以及内容的改动，都会导致整个table进行重新计算
- 避免在CSS中使用运算表达式
有些情况下，修改了元素样式之后，浏览器并不会立即reflow或repaint，而是将这样的操作积攒一批，然后做一次reflow,这就叫做异步reflow或者增量异步reflow.
四、结语
如果本文存在错误的地方，欢迎指出批评~~~
