写在前面

在讨论今天的主角之前,我们要先了解一下浏览器的渲染机制。以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.offsetLeftelem.offsetTopelem.offsetWidthelem.offsetHeightelem.offsetParent
  • elem.clientLeftelem.clientTopelem.clientWidthelem.clientHeight
  • elem.getClientRects()elem.getBoundingClientRect()

滚动相关

  • elem.scrollBy()elem.scrollTo()
  • elem.scrollIntoView()elem.scrollIntoViewIfNeeded()
  • elem.scrollWidthelem.scrollHeight
  • elem.scrollLeftelem.scrollTop

其他

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

我们可以看一下
What forces layout / reflow(https://gist.github.com/paulirish/5d52fb081b3570c81e3a) 

重绘(Repaint)

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

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

影响

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

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

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

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

clientWidthclientHeightclientTopclientLeft

offsetWidthoffsetHeightoffsetTop、offsetLeft`

scrollWidthscrollHeightscrollTopscrollLeft

widthheight

getComputedStyle()

getBoundingClientRect()

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

避免重绘与回流

  • 避免使用 table 布局。
  • 尽可能在 DOM 树的最末端改变class
  • 避免设置多层内联样式。
  • 将动画效果应用到position属性为absolutefixed的元素上。
  • 避免使用CSS表达式(例如:calc())。
  • 避免频繁操作样式,最好一次性重写style属性,或者将样式列表定义为class并一次性更改class属性。

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

  • 也可以先为元素设置display: none,操作结束后再把它显示出来。因为在display属性为none的元素上进行的DOM操作不会引发回流和重绘。
  • 避免频繁读取会引发回流/重绘的属性,如果确实需要多次使用,就用一个变量缓存起来。
  • 对具有复杂动画的元素使用绝对定位,使它脱离文档流,否则会引起父元素及后续元素频繁回流。

总结

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

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

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

本文首发于什么是回流与重绘 (Reflow & Repaint)(https://www.ahwgs.cn/shenmeshihuiliuyuzhonghui-reflow-repaint.html))

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