【面试】什么是回流和重绘？减少或避免页面文档回流、重绘的方案有哪些？

---

很多面试官可能都会问到如何减少或避免文档的回流、重绘，今天就学习并整理这一篇博客，分享给大家~

一、回流、重绘是什么？

在回答如何减少或避免文档回流之前，可能很多人还不明白什么叫做回流。

首先先了解一下浏览器的渲染原理：
·解析HTML，生成DOM树，解析CSS，生成CSSOM树
·将DOM树和CSSOM树结合，生成渲染树（Render Tree）

而回流呢，就是Render Tree的部分或全部因元素的规模尺寸、布局、隐藏等改变，从而导致需要重新计算，重新渲染树（页面需要重新渲染）。

总结：回流就是因为页面布局和几何属性改变时，页面需要重新排布和渲染。

回流是影响浏览器性能的关键因素，因为其变化涉及到部分页面（或是整个页面）的布局更新。一个元素的回流可能会导致了其所有子元素以及DOM中紧随其后的节点、祖先节点元素的随后的回流。

重绘是当Render Tree中的一些元素需要更新属性，但这些属性只会影响元素的外观、风格，不会影响到其布局的页面渲染，这种不会影响到页面布局的页面渲染称为页面重绘。

注：回流必将引起重绘，而重绘不一定会引起回流。

二、什么时候会发生回流和重绘？

前面我们总结性地说了，回流是因为页面布局和几何属性发生改变，那么具体来说有哪些情况会导致页面发生回流呢？

1.添加了或删除了可见的DOM元素

2.通过style控制元素的位置变化

3.元素尺寸的改变，包括外边距、内边框、边框大小、高度和宽度等

4.内容改变引发的尺寸改变，例：文本改变或图片大小改变而引起的计算值宽度和高度改变

5.浏览器窗口尺寸改变，resize事件的触发

以下情况会发生重绘：
改一下background-color，或者改动一下字体颜色的color等
或改动：outline, visibility等

三、（优化）如何减少或避免页面文档回流？

1.CSS优化法：
（1）使用visibility替换display:none（前者只会引起重绘，后者则会引发回流）
（2）避免使用table布局，因为可能一个小小的改动会造成整个页面布局的重新改动
（3）将动画效果应用到position 属性为absolute或fixed的元素上，避免影响其他元素的布局
【脱离文档流之后，对其它的元素影响小，从而提升性能】
（4）避免使用CSS的JavaScript表达式，可能会引发回流
（5）不要一个个改变元素的样式属性，直接改变className，若是动态改变样式，则用cssText
例：box.style.cssText=“width:200px；height:200px”
（6）尽可能在DOM树的末端改变class ，可以限制回流的范围，使其影响尽可能少的节点。

2.JavaScript优化法
（1）避免频繁操作样式，最好一次性重写style属性，或将样式列表定义为class并一次性更改class属性
（2）避免频繁操作DOM，创建一个DocumentFragment进行缓存操作，此处引发一次回流或重绘；接着在它上面的所有DOM操作在最后再添加（append）到body中
（3）使用display:none的技术（只会引发两次回流和重绘）
现将元素用display:none隐藏起来，接着对此元素进行所有的操作，最后再将此元素展示出来。（PS：对display:none的元素进行操作是不会引起回流、重绘，故只要操作就只会有两次回流）
（4） 让要操作的元素进行"离线处理"，处理完后一起更新，这里所谓的"离线处理"即让元素不存在于Render Tree中。如读取offsetLeft等属性。

---

如果此篇博客能帮得到你，欢迎大家关注，点赞，评论，收藏，转发呀~

如有不足也请在评论区提出批评指正！多多指教！