重排与重绘的区别

部分渲染树（或者整个渲染树）需要重新分析并且节点尺寸需要重新计算。这被称为重排。注意这里至少会有一次重排-初始化页面布局。
由于节点的几何属性发生改变或者由于样式发生改变，例如改变元素背景色时，屏幕上的部分内容需要更新。这样的更新被称为重绘。

 

由于浏览器渲染界面是基于流式布局模型的，也就是某一个DOM节点信息更改了，就需要对DOM结构重新进行计算，重新布局界面在，再次引发重排。

引起重排的操作有：

（1）页面首次渲染

（2）浏览器窗口大小发生变化（resize事件发生时）

（3）元素尺寸（大小，外边距，边框）或位置发生改变，或使用动画

（4）元素内容变化

（5）元素字体大小变化

（6）添加或删除可见的DOM元素

（7）设置style属性

（8）读取某些元素属性（offsetLeft/Top/Height/Width）

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

如何减少重排？

• 避免设置大量的style属性，因为通过设置style属性改变节点样式的话，每一次设置都会触发一次reflow，所以最好是使用class属性
• 对于复杂的动画效果，设置position属性，让他脱离文档流
• 隐藏元素，进行修改后再显示该元素
• 不要使用table布局，因为table布局中某个元素出发了重排，那么正个table的元素都会触发重排。

转载于:https://www.cnblogs.com/xiaoan0705/p/8652131.html