reflow（重排/回流）、repaint（重绘）及其优化

左手的ㄟ右手 2022-01-09 18:55 273阅读 0赞

原文地址：[https://blog.csdn.net/u013100656/article/details/79888106][https_blog.csdn.net_u013100656_article_details_79888106]

##### 浏览器拿到HTML之后的渲染过程： #####

1.  生成dom树；
2.  生成render树；
3.  执行reflow（在render树的基础上计算页面真实显示dom的位置）；
4.  执行repaint（为真实显示的dom绘制不影响dom位置的样式，如设置dom的color等）。

##### reflow： #####

当页面发生的某些变化影响了布局，需要倒回去重新渲染，该过程称为reflow（重排/回流）。reflow几乎是无法避免的。现在界面上流行的一些效果，比如树状目录的折叠、展开（实质上是元素的显示与隐藏）等，都将引起浏览器的reflow。只要这些变化引起了页面上某些元素的占位面积、定位方式、边距等属性的变化，都会引起它内部、周围甚至整个页面的重新渲染。通常我们无法预估浏览器到底会reflow哪一部分的代码，它们彼此相互影响。

#### repaint： ####

如果页面的变化只是改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器repaint（重绘）。

**简而言之，如果页面的变化会导致dom的位置发生变化，则会触发reflow，如果不会导致dom的位置发生变化，则会触发repaint。如果触发了reflow则一定会触发repaint，而触发repaint则不一定会触发reflow。另外，reflow的成本比repaint高很多，dom树里每个结点的reflow都可能触发其子结点、祖先结点、兄弟结点的reflow。reflow过于频繁是导致页面性能下降的关键因素之一（也是页面性能优化的主要方向）。**

--------------------

#### 要降低触发reflow的频率，首先要明确哪些情况会触发reflow，以下是会触发reflow的几种动作： ####

1.  改变窗囗大小；
2.  改变文字大小；
3.  添加/删除样式表；
4.  内容的改变，如用户在输入框中输入信息；
5.  激活伪类，如:hover；
6.  操作class属性；
7.  脚本操作dom；
8.  获取dom的offsetWidth和offsetHeight；
9.  设置style属性。

#### reflow的优化： ####

1.  尽可能限制reflow的影响范围，修改dom层级较低的结点。不要通过父级元素影响子元素样式。最好直接加在子元素上。改变子元素样式尽可能不要影响父元素和兄弟元素的尺寸；
2.  不要一条一条的修改dom的样式，最好通过设置class的方式。 避免重复触发reflow和repaint；
3.  经常reflow的元素，比如动画，position设为fixed或absolute，使其脱离文档流，不影响其它元素的布局；
4.  权衡速度的平滑。比如实现一个动画，以1px为单位移动这样最平滑，但reflow就会过于频繁，CPU很快就会被完全占用。如果以3个像素为单位移动就会好很多；
5.  不要用tables布局。tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow。在适合用table的场合，可以设置table-layout为auto或fixed，这样可以让table一行一行的渲染，这种做法也是为了限制reflow的影响范围；
6.  避免使用css expression（每次都会重新计算）；
7.  减少不必要的dom层级（DOM depth）。改变dom树中的一级会导致所有层级的改变，上至根部，下至被改变节点的子节点。这导致大量时间耗费在执行reflow上面；
8.  避免不必要的复杂的css选择器，尤其是后代选择器（descendant selectors），因为为了匹配选择器将耗费更多的cpu；
9.  尽量不要频繁的增加、修改、删除元素，可以先把dom节点抽离到内存中进行复杂的操作然后再display到页面上。（display:none的节点不会被加入render树，而visibility:hidden会；display:none会触发reflow，而visibility:hidden只会触发repaint，因为layout没有变化）。

[https_blog.csdn.net_u013100656_article_details_79888106]: https://blog.csdn.net/u013100656/article/details/79888106