回流和重绘的面试与优化方案

雨点打透心脏的1/2处 2022-03-27 07:18 233阅读 0赞

回流和重绘一直是前端工程师面试的常见，尤其是大厂的面试，毕竟前端页面优化也是考核开发者能力的关键之一。掌握回流和重绘的概念，不单单是为了面对各类面试，更能为前端开发者在日常开发中提供优化方案。

# 理解回流(reflow)和重绘(repaint) #

首先，我们需要理解什么是回流和重绘，英文叫Reflow and Repaint 。

回流 （Reflow ）**:**当render树中的一部分或者全部**因为大小边距等问题发生改变而需要重建的过程**叫做回流；

重绘（Repaint ）**:**当元素的一部分属性发生变化，如外观背景色**不会引起布局变化而需要重新渲染的过程**叫做重绘。

例如修改背景颜色，字体颜色之类不影响布局的行为都只引发重绘。其余情况可以看做为是回流重绘，回流必将引起重绘，而重绘不一定会引起回流。 所以，我们需要很清楚，页面若发生回流则需要付出很高的代价（会发生卡顿甚至页面卡死）。

# 如何避免/减少回流和重绘。 #

1.  如果需要频繁用JS操作DOM节点，可以使用 documentfragment ，这是一个纯增加性能的方法；
2.  在CSS属性用法上，用 translate 代替 top ，因为 top 会触发回流，但是translate不会。所以translate会比top节省了一个layout的时间；
3.  在CSS属性用法上，opacity 代替 visiability，会触发重绘（paint），但opacity不会。该用法只针对于独立图层上；
4.  若用JS去修改CSS的，最好别频繁去操作DOM节点，最好把需要操作的样式，提前写成class，之后需要修改。只需要修改一次，需要修改的时候，直接修改className，做成一次性更新多条css DOM属性，一次回流重绘总比多次回流重绘要付出的成本低得多；（谷歌浏览器有这个缓冲 flush 机制，如果在某个周内进行多次操作的话，会缓冲一次修改。）
5.  离线回流重绘，把需要回流重绘的节点，进行隐藏离线回流重绘，display:none；
6.  每次访问DOM的偏移量属性的时候，例如获取一个元素的scrollTop、scrollLeft、scrollWidth、offsetTop、offsetLeft、offsetWidth、offsetHeight之类的属性，浏览器为了保证值的正确也会回流取得最新的值，所以如果你要多次操作，最取完做个缓存。更加不要for循环中访问DOM偏移量属性，而且使用的时候，最好定义一个变量，把要需要的值赋值进去，进行值缓存，把回流重绘的次数减少；
7.  尽量少用table布局，table布局的话，每次有单元格布局改变，都会进行整个tabel回流重绘；
8.  如果需要使用动画，动画速度根据平滑度和回流重绘进行一下计算页面性能的平衡；
9.  把需要频繁回流重绘的单独抽出去一个图层，使用 transform:translateZ(0) 或 will-change:transform 的Css属性都能实现;
10. 启用GPU加速，使用transform:translateZ(0) / transform:translate3d(0,0,0) 对性能提升很大。但是GPU的不能滥用，因为开启这个加速，会造成图层过多，反而另render 树对图层合并的时间变长，适得其反。

# 重绘回流优化方案总结 #

上面列了这么多点，总结还是三点去优化：

1.  避免使用触发重绘回流的CSS属性。
2.  尽量减少JS操作修改DOM的CSS次数。
3.  将频繁重绘回流的DOM元素单独作为一个独立图层，那么这个DOM元素的重绘和回流影响只会在这个图层中。页面不能有过多图层。

# 探讨延伸 #

### 浏览器 flush 队列机制 ###

我们也知道回流重绘的花销也不小，如果每句JS操作都去回流重绘的话，浏览器可能就会受不了。所以很多浏览器都会优化这些操作，浏览器会维护1个队列，把所有会引起回流、重绘的操作放入这个队列，等队列中的操作到了一定的数量或者到了一定的时间间隔，浏览器就会flush队列，进行一个批处理。这样就会让多次的回流、重绘变成一次回流重绘。

虽然有了浏览器的优化，但有时候我们写的一些代码可能会强制浏览器提前flush队列，这样浏览器的优化可能就起不到作用了。当你请求向浏览器请求一些 style信息的时候，就会让浏览器flush队列，比如：

1. offsetTop, offsetLeft, offsetWidth, offsetHeight

2. scrollTop/Left/Width/Height

3. clientTop/Left/Width/Height

4. width,height

5. 请求了getComputedStyle(), 或者 IE的 currentStyle     // 这个属性表示经过计算过最终的样式，可以参考张鑫旭的博客

当你请求上面的一些属性的时候，浏览器为了给你最精确的值，需要flush队列，因为队列中可能会有影响到这些值的操作。即使你获取元素的布局和样式信息跟最近发生或改变的布局信息无关，浏览器都会强行刷新渲染队列。