什么是重绘和回流，有哪些措施可以避免

[wuweijia]

[xie991283109]

回流: 当页面重新布局(定位、浮动)或者几何属性(盒模型相关属性)发生改变时, 就会引起回流. 比如: position、width、height、padding等, 注意与字体相关的一些属性也会引起回流, 比如font-size、font-weight、text-align等等

重绘: 只引起页面元素样式发生改变,而不引起布局改变的, 就叫重绘. 比如background-color、color、border-style、border-radius等等

回流一定会引起重绘, 但重绘不一定会引起回流

在项目过程中, 应该尽量避免回流操作, 因为回流会让元素重新渲染. 代价比重绘大, 所以如果能用重绘替代的可以使用重绘. 比如, 频繁的显示隐藏一个组件, 可以使用visible属性

其他的请各位大佬补充

[wuweijia]

回流: 当页面重新布局(定位、浮动)或者几何属性(盒模型相关属性)发生改变时, 就会引起回流. 比如: position、width、height、padding等, 注意与字体相关的一些属性也会引起回流, 比如font-size、font-weight、text-align等等

重绘: 只引起页面元素样式发生改变,而不引起布局改变的, 就叫重绘. 比如background-color、color、border-style、border-radius等等

回流一定会引起重绘, 但重绘不一定会引起回流

在项目过程中, 应该尽量避免回流操作, 因为回流会让元素重新渲染. 代价比重绘大, 所以如果能用重绘替代的可以使用重绘. 比如, 频繁的显示隐藏一个组件, 可以使用visible属性

其他的请各位大佬补充

1. 不要使用 table 布局
2. 多使用 transform
3. 动画实现的速度的选择，动画速度越快，回流次数越多，可以选择使用 requestAnimationFrame

[GenkiChiang]

回流:render tree 中的元素因为尺寸/布局等发生改变,需要重新构建render tree,称为回流.回流分为局部回流和全局回流. eg:盒模型相关属性(width,padding,margin等)改变，js访问offsetTop、offsetLeft、 offsetWidth、offsetHeight、clientTop、clientWidth、clientHeight、scrollTop、scrollWidth、getComputedStyle(ele,[pseudoEle])等, resize事件发生时,append/remove可见dom node等.

重绘:render tree 中的元素需要更新一些属性,这些属性只影响元素的外观、风格,并不会影响元素的布局的,称为重绘. eg:visibility ,background-color,color,transform,opacity,filter等

避免措施: 1.尽量使用transform代替. 2.经常需要进行复杂操作的元素,脱离文档流(absolute/fixed/display:none)后进行操作,操作完后回到文档流. 3.virtual dom操作(也可以把需要操作的dom元素拷贝后放到dom tree外部进行操作,最后替换). 4.合并多次样式的修改: 改变className,或者使用cssText.