0
点赞
收藏
分享

微信扫一扫

什么是回流与重绘 (Reflow & Repaint)


写在前面

在讨论今天的主角之前,我们要先了解一下浏览器的渲染机制。以​​Google​​​,​​Firefox​​​,​​Safari​​​为例,​​Firefox​​​ 使用​​Geoko——Mozilla​​​ 自主研发的渲染引擎,​​Safari​​​ 和​​Chrome​​​ 都使用 ​​webkit​​。

我们主要以 ​​Webkit​​的主流程为例


  • 浏览器使用流式布局模型 (Flow Based Layout)
  • 解析​​HTML​​​ 生成 ​​DOM​​ 树
  • 解析​​CSS​​​ 生成​​CSSOM​​ 规则树
  • 将 ​​DOM​​​ 树与 ​​CSSOM​​​ 规则树合并在一起生成渲染树​​Render Tree​
  • 根据渲染树遍历拿到每个节点开始布局,计算每个节点的位置大小信息
  • 将渲染树每个节点绘制到屏幕

回流(Reflow)

上面我们知道,我们会根据 ​​Render Tree​​ 去遍历渲染,所以当我们的节点发生改变时,浏览器重新渲染部分节点或者全部文档,我们称这个过程为回流

大致整理会导致回流的一些操作


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

主要有下面几个API


盒子操作相关



  • ​elem.offsetLeft​​​, ​​elem.offsetTop​​​, ​​elem.offsetWidth​​​, ​​elem.offsetHeight​​​, ​​elem.offsetParent​
  • ​elem.clientLeft​​​, ​​elem.clientTop​​​, ​​elem.clientWidth​​​, ​​elem.clientHeight​
  • ​elem.getClientRects()​​​, ​​elem.getBoundingClientRect()​


滚动相关



  • ​elem.scrollBy()​​​, ​​elem.scrollTo()​
  • ​elem.scrollIntoView()​​​, ​​elem.scrollIntoViewIfNeeded()​
  • ​elem.scrollWidth​​​, ​​elem.scrollHeight​
  • ​elem.scrollLeft​​​, ​​elem.scrollTop​


其他


上述主要是我们经常使用的一些API,其他还有一个​​api​​已经有热心网友帮我们整理出来了

我们可以看一下

​​What forces layout / reflow​​

重绘(Repaint)

当我们操作的节点上的元素并不导致元素位置发生变化时,比如​​color​​​,​​background-color​​​,​​visibility(注意虽然节点隐藏了,但是元素还在,并且位置也不会发生变化)​

浏览器会将新的样式赋值给这些节点,我们称这个过程为重绘

影响

按照常理也很好理解,因为位置,大小等发生的回流操作相比于仅仅是颜色的变化,带给我们的视觉直观感受来说,回流是比较大的。

事实上,回流确实比重绘的成本更大,并且有时候并不是只回流一个元素,甚至会带动父元素或者子元素一起回流。

现代浏览器会对频繁的回流或重绘操作进行优化,浏览器会维护一个队列,当我们页面发生回流或重绘时,有时候并不是立即执行,而是先放入维护的队列中,到达一定时间后统一去进行绘制

当你访问以下属性或方法时,浏览器会立刻清空队列

​clientWidth​​​、​​clientHeight​​​、​​clientTop​​​、​​clientLeft​

​offsetWidth​​​、​​offsetHeight​​​、​​offsetTop、​​offsetLeft`

​scrollWidth​​​、​​scrollHeight​​​、​​scrollTop​​​、​​scrollLeft​

​width​​​、​​height​

​getComputedStyle()​

​getBoundingClientRect()​

所以当我们需要使用如上​​api​​获取数据时,我们要注重渲染时机以及取值时机

避免重绘与回流


  • 避免使用 ​​table​​ 布局。
  • 尽可能在 ​​DOM​​ 树的最末端改变​​class​​。
  • 避免设置多层内联样式。
  • 将动画效果应用到​​position​​属性为​​absolute​​或​​fixed​​的元素上。
  • 避免使用​​CSS​​表达式(例如:​​calc()​​)。
  • 避免频繁操作样式,最好一次性重写​​style​​属性,或者将样式列表定义为​​class​​并一次性更改​​class​​属性。
    -避免频繁操作​​DOM​​,创建一个​​documentFragment​​,在它上面应用所有​​DOM​​操作,最后再把它添加到文档中。
  • 也可以先为元素设置​​display: none​​,操作结束后再把它显示出来。因为在​​display​​属性为​​none​​的元素上进行的​​DOM​​操作不会引发回流和重绘。
  • 避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来。
  • 对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流。

总结

我们把页面文档比作一个积木的话,我们抽离中间或者底部的一个积木块,我们的积木会重新找到重心并且稳固下来,我们把这个过程称之为回流

我们在某个积木上涂上颜色,这并不会造成整个积木的稳定,我们把这个过程叫做重绘

或者说,我们简单理解会引起元素位置变化的就会​​reflow​​​,会引起位置变化的,只是在以前的位置进行改变背景颜色等,只会​​repaint​



举报

相关推荐

0 条评论