CSS的重绘与重排

单从字面上理解，重绘是颜色之类的属性发生改变，重排是位置之类的属性发生改变。

要理解重排与重绘首先要知道浏览器是如何绘制页面的。

笼统地讲，浏览器从上往下解析HTML源码并构建一个由DOM节点组成的DOM树， DOM树构建完成后开始解析CSS样式并计算出最终的样式数据，构建一个渲染树并将页面绘制到页面上，这便是用户最终看到的页面效果。

重绘与重排的概念

当一个页面初次渲染完成，用户执行一些操作，这些操作往往会对页面产生影响（点击变色，移入变大之类）。

重绘：当在页面上修改了一些不需改变定位的样式的时候（比如color,outline)，浏览器只会将新的样式重新绘制给元素。重绘是一个元素外观的改变所触发的浏览器行为。浏览器会根据元素的新属性重新绘制，使元素呈现新的外观。

重排：当页面上的改变影响了文档内容、结构或者元素定位时，就会发生重排），就是相当于渲染树需要重新计算。重排是更明显的一种改变，代价更大。

产生重排的操作

DOM结构发生改变，如添加或者删除可见的DOM元素，元素位置改变。

DOM几何属性改变，元素尺寸改变，一个文本被另一个不同尺寸的图片替代。

浏览器窗口尺寸改变。

不可抗拒因素----页面初始化渲染。

减少重排次数和重排影响范围

将需要多次重排的元素，position属性设为absolute或fixed，使元素就脱离了文档流，即使变化也不会影响到其他元素。

将多次改变样式属性的操作合并成一次操作。

将需要经常那些引起浏览器重排的属性缓存到变量

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

对一个元素进行复杂的操作时，可以先隐藏它，操作完成后再显示。这样只在隐藏和显示时触发2次重排。（display属性为none的元素不在渲染树中，对隐藏的元素操作不会引发其他元素的重排。）