0
点赞
收藏
分享

微信扫一扫

浏览器重绘和重排

juneyale 2022-03-11 阅读 77

重排

重绘/回流:当dom元素改变了几何信息的变化,造成布局发生改变,浏览器需要重新计算元素的几何属性,这个过程叫做重排
触发情况:

  • 添加、删除、更新dom节点
  • display: none隐藏一个dom节点
  • 用户更改窗口大小,放大、缩小、或者滚动

重绘

重绘/回流:当dom元素的外观发生了变化,没有发生几何变化的时候,浏览器会重新将dom元素的外观绘画出来,这个过程叫做重绘
只要改变外观的都必定引起重绘,有一条比较特殊的是visibility: hidden虽然隐藏了元素,但是元素所占的位置还在,所以不会重排,但是会重绘

关系

元素外观的变化,不会引起浏览器的重新布局,但是浏览器一旦重新布局的话一定会重新绘制受影响的部分,所以对于浏览器来说 重排一定会引起重绘、重绘不一定引起重排
在不可避免的情况下,优先选择重绘,减少使用消耗更大的重排

如何避免

不过是重绘还是重排都是一种损耗,我们应该尽可能的减少这两种现象的发生

  • 集中改变样式
  • fixed 或 absoult 的 position会减少该dom对象对其他元素布局的影响
  • 不使用table布局,避免一个小的改动引起整个table的布局变化
  • 动画开始GPU加速,translate使用3D变化
  • 提升为合成层
举报

相关推荐

0 条评论