回流与重绘

幻冬狐
159 阅读5分钟

1. 基本理解

在HTML中，每个元素都可以理解为盒子，在浏览器解析过程中会涉及到回流与重绘

  • **回流：**布局引擎会根据各种样式计算每个盒子在页面上的位置与大小
  • **重绘：**当计算好位置与大小以及其他属性之后，浏览器根据每个盒子特性进行绘制

回流会导致重绘，重绘不一定会导致回流。

具体的浏览器解析渲染机制如下所示：

img

  1. 浏览器是用得是流式布局。
  2. 浏览器解析HTML生成DOM树，解析CSS生成CSSOM树，将DOM树和CSSOM树合并产生了渲染树（Render Tree）
  3. 有了渲染树，我们可以得到所有节点的样式，然后计算他们在页面上的大小和位置，最后把节点绘制到页面上 这一步就是回流（Layout）
  4. 浏览器根据渲染树和回流得到的信息对页面进行绘制 这一步就是重绘（Painting）
  5. 由于浏览器使用流式布局，对渲染树的计算通常只需要遍历一次就可以完成，但是table机器内部元素除外，他们可能需要多次计算，需要花3倍与同等元素的时间，这也是为什么要避免使用table布局的原因。

触发机制

回流

当渲染树种部分或全部元素的尺寸、结构或某些属性发生改变时。

导致回流的操作：

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

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

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

重绘

  • 触发回流一定会触发重绘。
  • 当页面中元素样式的改变并不影响它在文档流中的位置时（例如：color、background-color、visibility等），浏览器会将新样式赋予给元素并重新绘制它，这个过程称为重绘。

性能影响

回流比重绘的代价要更高

由于浏览器采用流式布局，有事即使仅仅回流一个单一的元素，它的父元素以及任何跟随它的元素也会产生回流。

浏览器优化机制

浏览器会维护一个队列，把所有引起回流和重绘的操作放入队列中，如果队列中的任务数量或者时间间隔达到一个阈值的，浏览器就会将队列清空，进行一次批处理，这样可以把多次回流和重绘变成一次。

访问以下属性和方法时会清空队列：

clientWidth`、`clientHeight`、`clientTop`、`clientLeft
offsetWidth`、`offsetHeight`、`offsetTop`、`offsetLeft
scrollWidth`、`scrollHeight`、`scrollTop`、`scrollLeft
width`、`height
getComputedStyle()
getBoundingClientRect()

因为队列中可能会有影响到这些属性或方法返回值的操作，即使你希望获取的信息与队列中操作引发的改变无关，浏览器也会强行清空队列，确保你拿到的值是最精确的。

如何减少

CSS

  • 使用css3硬件加速，可以让transform、opacity、filters这些动画不会引起回流重绘

  • 避免使用table布局。

  • 尽可能在DOM树的最末端改变class。

  • 避免设置多层内联样式。

  • 将动画效果应用到position属性为absolute或fixed的元素上。

  • 避免使用CSS表达式（例如：calc()）。

JavaScript

  • 避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性。

  • 避免频繁操作DOM，创建一个documentFragment，在它上面应用所有DOM操作，最后再把它添加到文档中。

  • 也可以先为元素设置display: none，操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。

  • 避免频繁读取会引发回流/重绘的属性，如果确实需要多次使用，就用一个变量缓存起来。

  • 对具有复杂动画的元素使用绝对定位，使它脱离文档流，否则会引起父元素及后续元素频繁回流。

常见避免回流的案例

例1

多次修改一个把元素布局的时候，我们很可能会如下操作

const el = document.getElementById('el')
for(let i=0;i<10;i++) {
    el.style.top  = el.offsetTop  + 10 + "px";
    el.style.left = el.offsetLeft + 10 + "px";
}

每次循环都需要获取多次offset属性，比较糟糕，可以使用变量的形式缓存起来，待计算完毕再提交给浏览器发出重计算请求。

// 缓存offsetLeft与offsetTop的值
const el = document.getElementById('el')
let offLeft = el.offsetLeft, offTop = el.offsetTop

// 在JS层面进行计算
for(let i=0;i<10;i++) {
  offLeft += 10
  offTop  += 10
}

// 一次性将计算结果应用到DOM上
el.style.left = offLeft + "px"
el.style.top = offTop  + "px"

例2

还可避免改变样式，使用类名去合并样式

const container = document.getElementById('container')
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'

使用类名去合并样式

<style>
    .basic_style {
        width: 100px;
        height: 200px;
        border: 10px solid red;
        color: red;
    }
</style>
<script>
    const container = document.getElementById('container')
    container.classList.add('basic_style')
</script>

前者每次单独操作，都去触发一次渲染树更改（新浏览器不会），

都去触发一次渲染树更改，从而导致相应的回流与重绘过程

合并之后，等于我们将所有的更改一次性发出

我们还可以通过通过设置元素属性display: none，将其从页面上去掉，然后再进行后续操作，这些后续操作也不会触发回流与重绘，这个过程称为离线操作

const container = document.getElementById('container')
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'

离线操作后

let container = document.getElementById('container')
container.style.display = 'none'
container.style.width = '100px'
container.style.height = '200px'
container.style.border = '10px solid red'
container.style.color = 'red'
...（省略了许多类似的后续操作）
container.style.display = 'block'
avatar
文章
阅读
粉丝