八股文上谈
- 重绘是某个元素的样式发生变化，只针对元素的样式更新，而回流是因为元素的尺寸发生变化，比如宽高，浏览器需要重新计算布局，影响的范围比较大，可能影响页面的某一部分，也可能会影响整个页面的变化重新渲染，所以回流也会触发重绘，回流的性能开销大，回流也叫重排，在项目开发上，要避免重绘和回流的操作
组件开发层面上谈
- 1、避免直接的操作DOM
- 2、尽量去少使用style, 使用class
- style的话，如果需要对dom进行多次样式操作，需要写多个style的操作，会造成多次重绘和回流
- 使用class可以合并dom样式的操作
- 3、使用transform去替代position，对于元素的位置变化，动画效果，可以使用transform， transform不会触发重绘和回流 可以更好的利用硬件的GPU，而position会频繁的触发重绘和回流，影响性能
- 4、把多次需要操作DOM的，可以合并成一次
- 例如可以先把元素从dom中元素，修改完元素之后，在添加到dom中，这样可以减少重绘和回流的次数
- 5、元素脱离文档流（定位或者浮动），减少重绘和回流的次数
vue/react设计层面上谈
- 使用了虚拟DOM, 避免直接操作DOM, 减少重绘和回流
- 在更新DOM的时候，vue和react都使用了批量更新处理多个操作，然后一次性更新到真实DOM
- 把多次更新放入异步更新队列中，等到下次事件循环才回去读取这个更新队列中的任务去执行