深入理解浏览器重绘(repaint)和重排(reflow)

1. 重排和重绘概念

1. 浏览器下载完页面中的所有组件（HTML,CSS,JavaScript,图片）之后会解析生成两个内部数据结构（DOM树和渲染树）

2. DOM树表示页面结构，渲染树表示DOM节点如何显示，

3. 重排是DOM元素的几何变化，DOM树结构变化，渲染树需要重新计算

4. **重绘是当页面中的元素样式的改变并不影响它在文档流中的位置，比如改变背景，颜色，字体等等，浏览器会根据元素的新属性重新绘制，使元素呈现新的外观，**由于浏览器的流布局，对渲染树的计算通常只需要遍历一次就可以完成，但是table及其内部元素除外，它可能需要多次计算才能确定好其在渲染树中的节点属性，比同元素要多花两倍时间，因此尽量避免使用table布局

2. 触发重排的情况

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

3.常见的触发重绘的属性

• color
• border-style
• visibility
• background
• text-decoration
• background-image
• background-position
• background-repeat
• outline-color
• outline
• outline-style
• border-radius
• outline-width
• box-shadow
• background-size

4. 性能优化

1. 减少 DOM 访问，讲多次改变样式属性操作合并成一次操作
2. 如果需要批量操作 DOM，可以先让元素脱离文档流，操作完在带入文档流，这样只会触发一次重排（fragment元素的应用）
3. 由于display:none的元素不再渲染树中，对隐藏的元素操作不会引起其他元素的重排
4. 在内存中多次操作节点完成之后添加到文档中
5. 尽量不要在布局信息改变时做查询操作（会导致渲染队列强制刷新）

6.需要多次重排的元素，使用 position：absolute 或者 fixed，使其脱离文档流