浏览器渲染流程

• 根据 html，生成 dom tree；
• 根据 css，生成 css tree；
• 将 dom tree 和 css tree 结合生成 render tree；
• 布局 render树，计算各元素尺寸、位置信息；
• 绘制 render树，绘制页面像素信息；
• 浏览器会将各层的信息发送给 compositor 线程，compositing 处理后光栅化，显示网页。

重排（回流）与重绘

• 根据渲染树布局，计算CSS样式，即每个节点在页面中的大小和位置等几何信息。HTML默认是流式布局的，CSS和js会打破这种布局，改变DOM的外观样式以及大小和位置。这时就要提到两个重要概念：replaint和reflow。
• replaint：屏幕的一部分重画，不影响整体布局，比如某个CSS的背景色变了，但元素的几何尺寸和位置不变。
• reflow： 意味着元件的几何尺寸变了，我们需要重新验证并计算渲染树。是渲染树的一部分或全部发生了变化。这就是Reflow，或是Layout。