浏览器渲染一个页面的时候是按照 先创建dom
树,在加载css 生成渲染树render
tree
把渲染树交给浏览器(Gpu)进行绘制,如果后期我们修改了元素的样式(但是没有改变大小和位置),浏览器会把当前元素重新生成渲染树然后重新渲染这个机制就是重绘。
但是一旦元素的位置或者大小等发生改变,浏览器就要从DOM
数重新渲染这个机制就是重排,无论是重排,还是重绘都是非常消耗性能的,尽量减少dom
的操作引发的回流和重绘的问题:常用的解决方案:
-
需要动态向页面追加元素的时候,基于文档碎片或者先把需要增加的所有元素拼接成字符串,最后统一进行增加
-
读写分离:把统一修改的样式都放到一起执行,新版浏览器都有一个自己的检测机制入如果发现下面紧挨着的操作也是修改的元素的样式,会把所有修改的事先保存起来,直到遇到非修改样式的操作,会把之前存储的统一执行,引发一次回流和重绘。
当然还有一些其他方法,这些都是最常注意的,我认为减少DOM的回流和重绘是非常重要的性能优化手段之一