什么是回流(重排 reflow)?什么是重绘(repaint)?如何减少回流、重绘?

什么是回流(重排 reflow)?

回流(重排 reflow):对DOM树进行渲染,只要修改DOM或修改元素的形状大小,就会触发reflow,reflow的时候,浏览器会使已渲染好受到影响的部分失效,并重新构造这部分,完成reflow后,浏览器会重新绘制受影响的部分到屏幕中

(继昨日每日一题:display:none和visibility:hidden 当display显示及隐藏元素时,显示时占据空间,隐藏时不占空间,隐藏前后DOM结构发生变化,所以需要重新渲染 当visibility显示及隐藏元素时,不论是显示还是隐藏,都占据空间,因此隐藏前后DOM结构未发生变化,所以不需要重新渲染。)

什么是重绘(repaint)?

重绘(repaint):当我们对DOM的修改导致的样式变化,但未影响几何属性时,浏览器不需要重新计算元素的几何属性,直接可以为该元素绘制新的样式,跳过了回流环节,这个过程就叫重绘。

结论:回流必定会发生重绘,重绘不一定发生回流

在页面交互中存在频繁的回流与重绘,这个过程,会很大程度的影响性能,因为回流所需成本比重绘高的多,so,能用重绘就不要用回流了。

如何减少回流、重绘?

减少回流、重绘就是减少对DOM的操作

1.直接改变className,如果动态改变样式,则使用cssText(减少设置多项内联样式)

2.让要操作的元素进行“离线处理”,处理完后一起更新

当使用DocumentFragment进行缓存操作,引发一次回流和重绘

使用display:none 技术,只引发两次回流和重绘

使用cloneNode(true or false)和replaceChild技术,引发一次回流和重绘

3.不要经常访问会引起浏览器flush队列的属性,如果你确实要访问,利用缓存

4.让元素脱离动画流,减少render 树的规模

5.牺牲平滑度换取速度

6.避免使用table布局

7.IE中避免使用javascript表达式

来源:https://www.cnblogs.com/miluluyo/p/11116173.html

本文仅提供参考,是本人闲时所写笔记,如有错误,还请赐教,作者:阿蒙不萌,大家可以随意转载

原文地址:https://www.cnblogs.com/huchong-bk/p/11613211.html