重绘与回流

158 阅读1分钟

渲染树

  • 把html解析成DOM树
  • 把css中的样式解析成CSS树
  • CSS树和DOM树结合起来生成渲染树

重绘

元素做了一些不影响页面的重新排版操作,例如: 背景色的改变,添加删除下滑线等等

回流

元素大小, 尺寸,位置发生了变化导致重新计算渲染树,页面重新排版

概念

回流一定是重绘, 重绘不一定是回流

减少重绘与回流

  • 将要修改多个样式,定义成一个class类
  • 使用dom离线操作:在documentfragment对象内存里操作dom;在把dom display:none进行隐藏,改完以后进行操作,clone一个dom到节点内存里,改完之后进行在线交换
  • 对于复杂的动画效果,进行绝对定位,或者absolute定位

借鉴与: juejin.cn/post/684490…