鹏展博

外观

重绘与回流

约 474 字大约 2 分钟

2022-04-14

提问

  1. 什么是重绘和回流
  2. 哪些属性会引起重绘和回流
  3. 如何减少回流

重绘和回流

  • 重绘

    当渲染树中的一些元素需要更新属性，而这些属性只影响元素的外观、风格，而不会影响布局的操作，称之为重绘

  • 回流

    当渲染树中的一部分（或全部）因为元素的规模尺寸、布局、隐藏等改变而需要重新构建的操作，会影响到布局的操作， 称之为回流。

回流必定会发生重绘，重绘不一定会引起回流。

回流所需的成本比重绘高得多，改变父节点里的子节点可能会导致父节点的一系列回流。

常见引起重绘的属性

border-styl , border-radius , border-color , color, , background , background-image , background-position , background-repeat , , visibility , outline , box-shadow, text-decoration 等

常见引起回流的方式

  • 页面首次渲染

  • 浏览器窗口大小发生改变

  • 元素尺寸或位置发生改变

  • 元素内容发生变化

  • 元素字体大小变化

  • 添加或删除可见的DOM元素

  • 激活 CSS 伪类

  • 查询某些属性或者调用某些方法

  • width, height, margin, padding, display, border, position, overflow,

  • clientWidth, clientHeight, clientTop, clientLeft,

  • offsetWidth, offsetHeight,offsetLeft, offsetTop,

  • scrollWidth, scrollHeight, scrollTop, scrollLeft,

  • scrollIntoView(), scrollIntoViewIfNeeded(),

  • getComputedStyle()

  • getBoundingClientRect()

  • scrollTo()

减少回流的方式

  • 避免使用 table 布局，因为可能一个很小的改变，都会造成整个 table 的重新布局
  • 避免一条一条的修改DOM样式，可以采用预定义的css的class，或者将所有修改都保存起来，再一次性修改
  • 避免设置多层内联样式
  • 避免频繁的操作DOM
  • 避免频繁读取会引发回流的属性
  • 对具有复杂动画的元素，将其脱离文档流