浏览器重绘(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，使其脱离文档流

参考文档：[深入理解浏览器的重绘与重排]:https://blog.csdn.net/lhjuejiang/article/details/79793331
[影响浏览器重绘和重排]:http://www.cnblogs.com/yuri2016/p/6542625.html