重绘与重排(回流)

102 阅读1分钟

1.什么是重绘与重排(回流)

重绘跟重排其实是页面渲染DOM过程中的两种不同情况;

重绘:当页面节点发生变化,但是该改变不影响该节点的位置以及大小,比如颜色变化,字体类型等情况,触发的是浏览器重绘;

重排:也称“回流”,当页面节点发生变化,影响了该节点的几何属性,比如宽高,内外边距,定位(float, position,display:none)等,会触发浏览器的重排;

注意:重排一定引起重绘,而重绘不一定引起重排;页面初始化一定会引起重排;

2.如何减少重绘跟重排?

1.使用ClassName去修改样式,将改变集中在集合里统一执行,减少浏览器绘制次数;

2.提前将需要重排的元素(复杂动画等),脱离文档流,减少对其他元素的影响;

3.操作元素离线处理,先display:none隐藏元素,然后对该元素进行处理,处理完成后,再显示该元素。display:none的元素不会引起重绘跟重排;