重排与重绘

1. 概述

当浏览器获取信息之后首先加载 dom 树。

DOM树：html加载完毕会生成 DOM 树，没有加载样式。

Render树：加载完 CSS，JS 以后具体计算每个盒子在窗口中的位置，大小等信息。

Render Layer 树

2. 重排

当页面加载完毕之后，脚本操作，页面样式改变都有可能引起重排（也叫回流）和重绘。

重排是指窗口尺寸被修改、发生滚动操作，或者元素位置相关属性被更新时会触发布局过程，在布局过程中要计算所有元素的位置信息。

渲染引擎会生成三个树：DOM树、Render树、Render Layer树。回流发生在Render树上。

3. 重绘

重绘是指当与视觉相关的样式属性值被更新时会触发绘制过程，在绘制过程中要重新计算元素的视觉信息，使元素呈现新的外观。

重绘repaint只发生在渲染层 render layer上。

4. 优化

下面列举一些减少回流次数的方法：

（1）不要一条一条地修改DOM样式，而是修改className或者修改style.cssText

（2）在内存中多次操作节点，完成后再添加到文档中去

（3）对于一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示

（4）在需要经常获取那些引起浏览器回流的属性值时，要缓存到变量中

（5）不要使用table布局，因为一个小改动可能会造成整个table重新布局。而且table渲染通常要3倍于同等元素时间