重排与重绘

重排和重绘作为前端必须要掌握的知识点，在面试中出现的机率通常都是较高的

重排

定义

重排，又可以叫回流，英文名Reflow;属于浏览器渲染机制的一个过程；通常在第一次加载页面触发；在DOM结构当中，每个元素都有只属于自己的盒子（模型），这些都需要浏览器各种样式来计算并根据计算结果将元素放到它该出现的位置，这就是重排

触发重排

1：页面第一次渲染（初始化）
2：DOM数变化（对节点的增删）
3：Render树变化（padding改变）
4：浏览器窗口resize
5：获取元素的某些特征（offerWidth,offerHeight）

总的一句话来说就是会导致浏览器需要重新计算元素位置的操作都会引起重排

重绘

定义

当各种盒子的位置，大小以及其他属性，例如颜色，字体大小被确定下来之后，浏览器于是便把这些元素都按照各自的特征都绘制了一遍，于是页面的内容就出现了，这个过程就叫重绘（repaint）

触发重绘

1：重排
2：修改那些不会引起浏览器重新计算元素位置大小的元素特性，比如设置元素的背景颜色

重排一定会引起重绘，但是重绘就不一定会引起重排

避免

1：操作DOM，比如使用JS对DOM节点进行增删的频率不要过高，尽量一次性修改；比如要增加多个节点的时候就可以先把要添加的节点先集中添加到一个元素节点div,然后再把该div添加到DOM中
2：尽量不要修改字体的大小
3：在对某一个元素进行操作的时候先设置display:none，修改完毕之后在让元素显示
4：考虑对一个元素节点进行操作的时候是否会影响到其它元素节点，把影响的范围尽量降到最小

现在的浏览器已经对回流进行了优化，它会等到足够数量的变化发生，才做一次批处理回流

总结

重排就像是我们构建一栋房子，我们需要计算每一堵墙，每一个房间的位置，当我们要拆除某一堵墙时需要搬离家具等就会引起重排；而重绘就像是我们给墙刷墙漆，不会影响到家里的其它布局

参考
触发浏览器回流的属性方法一览表
如何减少回流、重绘