当前位置: 首页 > Web前端 > CSS

RedrawandReflow

时间:2023-03-31 00:08:25 CSS

Reflow(Refactoring/Reflow/Reflow):当部分渲染树必须更新,节点大小发生变化时,浏览器使渲染树受影响的部分失效,重新构建渲染树。重绘:当元素的外观发生变化时触发的浏览器行为。浏览器会根据元素的新属性重新绘制,使元素呈现出新的面貌。例如,改变一个元素的背景颜色、文字颜色、边框颜色等。重新排列元素宽度,高度变化,添加,删除可见dom元素,改变浏览器窗口大小,改变填充内容,比如文字变化或者图片。大小变化导致计算值宽高变化如何避免触发回流和重绘避免频繁使用样式,而是使用修改类的方法。将动画效果应用于position属性为绝对或固定的元素。也可以先给元素设置display:none,操作完成后再显示。因为对display属性为none的元素进行DOM操作不会造成回流和重绘使用createDocumentFragment进行批量DOM操作。resize、scroll等防抖/节流处理,避免频繁读取会引起回流/重绘的属性。如果你真的需要多次使用它,使用一个变量来缓存它。利用CSS3的transform、opacity、filter属性可以实现合成效果,即GPU加速。