浏览器的重绘与重排

最近在读《高性能JavaScript》这本书，有些知识点在此记录一下

重排与重绘的概念

当DOM的变化影响了元素的几何属性（宽、高）——比如改变边框宽度或给段落增加文字，导致行数增加——浏览器需要重新计算元素的几何属性，同样其他元素的几何属性和位置也会受到影响。
浏览器会使渲染树中受到影响的部分失效，并重新构造渲染树。这个过程被称为“重排（reflow）”。完成重排后，浏览器会重新绘制受影响的部分到屏幕中，该过程称为“重绘（repaint）”

重排发生的条件

当页面布局和几何属性改变时就需要“重排”

1. 添加或删除可见的DOM元素
2. 元素位置改变
3. 元素尺寸改变
4. 内容改变
5. 页面渲染器初始化
6. 浏览器窗口尺寸变化

最小化重绘和重排

重绘和重排的代价可能会非常昂贵！

因此一个好的提高程序相应速度的策略就是减少此类操作的发生。为了减少次数，应该合并多次对DOM和样式和的修改，然后一次性处理掉。

考虑下面的例子：

var el = document.getElementById('mydiv')
el.style.borderLeft = '1px'
el.style.borderRight = '2px'
el.style.padding = '5px'

上面的例子中，元素的三个样式被改变，每一个都会影响元素的几何结构。在糟糕的情况下，可能会导致浏览器发生三次重排。

可以优化成下面的方式：

var el = document.getElementById('mydiv')
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px'

更推荐改变CSS的class名称的方式来调整元素的样式

...继续更新中