阅读 35

回流(Reflow)与重绘(Repaint)

文档参考地址

回流: 浏览器渲染部分或全部文档的过程叫做回流。

导致回流的操作:

  • 页面首次渲染
  • 浏览器窗口大小发生改变
  • 元素尺寸、位置发生改变
  • 元素内容发生改变(字数、图片大小)
  • 元素字体大小发生改变
  • 添加或删除可见的DOM元素
  • 激活CSS伪类(如:hover)
  • 查询某些属性或调用某些方法

一些常用且会导致回流的属性和方法:

  • clientWidth、clientHeight、clientTop、clientLeft
  • offsetWidth、offsetHeight、offsetTop、offsetLeft
  • scrollWidth、scrollHeight、scrollTop、scrollLeft
  • scrollIntoView()、scrollIntoViewIfNeeded()
  • getComputedStyle()
  • getBoundingClientRect()
  • scrollTo()

重绘: 当页面元素样式改变并不影响它在文档流中的位置时,浏览器会重新绘制元素样式,这个过程称为重绘。

回流必定引起重绘,重绘不一定引起回流

如何避免:

  • 避免使用table布局
  • 避免使用CSS表达式
  • 将动画效果应用到position属性为absolute或fixed的元素上
  • 避免频繁操作样式
  • 避免频繁操作DOM
  • 可先为元素设置display: none,操作结束后再显示出来,在display: none的元素上操作不会引起重绘和回流
  • 对具有复杂动画的元素使用绝对定位,避免父元素及后续元素频繁回流
文章分类
前端
文章标签