repaint(重绘)和reflow(回流)

前言

repaint(重绘)和reflow(回流)，其实是老生常谈的事情，一直从没正式写过总结，晚上偶然想起，不如简单写一下。

首先我们说下，浏览器的简单的渲染流程如下：

1. 解析html构建DOM树 ----> 解析css构建CSS树：此时html和css被解析成树形的数据结构
2. 构建Render树：将DOM树和CSS树结合形成的Render树
3. 布局Render树：有了Render树，浏览器已经知道那些有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置,经过Layout计算可见节点在设备视口(viewport)内的几何信息
4. 绘制render树：按照已知Render树和布局的几何信息，通过GPU把内容画在屏幕上

这是大概的渲染流程。