重绘:指当前页面展示元素中的一些元素需要更新属性,这些属性只是影响元素的外观、风格,而不会影响布局,比如background-color。
回流:指当前页面展示元素中的一部分(或者)因为元素的的规模尺寸/布局/隐藏等而需要重新构建。
重绘不会导致回流,回流必导致重绘。
都会带来一定的DOM开销,常见的避免手段有避免出发同步布局事件;对于复杂的动画效果,使用绝对定位让其脱离文档流;css3硬件加速(transform/opacity/filters)。
虚拟DOM:
用js对象结构表示DOM树的结构,然后用这个树构造一个真的DOM树,插入文档中;
当状态变更时,重新构造一棵树,与旧树进行对比,记录差异;
将记录的差异用到所构建的真正的DOM树上。