重绘与回流

定义

• Reflow，即回流。一般意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树

• Repaint，即重绘。意味着元素发生的改变只是影响了元素的一些外观之类的时候（例如，背景色，边框颜色，文字颜色等），此时只需要应用新样式绘制这个元素就可以了

回流产生原因

1. 页面渲染初始化
2. DOM结构改变，比如删除了某个节点
3. render树变化，比如减少了padding
4. 窗口resize
5. 最复杂的一种：获取某些属性，引发回流

很多浏览器会对回流做优化，会等到数量足够时做一次批处理回流，但是除了render树的直接变化，当获取一些属性时，浏览器为了获得正确的值也会触发回流，这样使得浏览器优化无效

1. offset(Top/Left/Width/Height)
2. scroll(Top/Left/Width/Height)
3. cilent(Top/Left/Width/Height)
4. width,height
5. 调用了getComputedStyle()或者IE的currentStyle

避免回流

1. 减少逐项更改样式，最好一次性更改style，或者将样式定义为class并一次性更新
2. 避免循环操作dom，创建一个documentFragment或div，在它上面应用所有DOM操作，最后再把它添加到window.document
3. 避免多次读取offset等属性。无法避免则将它们缓存到变量
4. 将复杂的元素绝对定位或固定定位，使得它脱离文档流，否则回流代价会很高