素材巴巴 > 程序开发 >

浏览器性能优化--由重绘和重排来看虚拟DOM是如何提高浏览器性能的

程序开发 2023-09-09 06:26:57

浏览器解析HTML文件渲染过程

        首先我们说明一下,浏览器拿到HTML文件,到页面渲染完毕的过程(这一阶段并没有引起重绘和重排:这两个概念接下来说明)。

        1.浏览器请求到了HTML文件,开始解析生成DOM树。

        2.解析过程中,遇到link外联的CSS文件,向服务器请求CSS文件(此时并未停止解析HTML文件)。

        3.当CSS文件返回之后,浏览器开始解析CSS文件(此时HTML解析并没有停止即CSS的解析不会阻塞HTML解析)

        4.当我们解析HTML的过程中遇到了script标签,就会请求外联的JS文件(遇到script标签就会停止HTML的解析即JS文件会阻塞HTML解析,但是此时CSS的解析不会停止,因为CSS解析过程是不会被阻塞的)

        5.返回JS文件之后会解析JS文件,此时的HTML还在停止解析,CSS正在解析。

        6.直到JS解析完毕之后,并不会马上执行,而是需要等到CSSOM树构建完成之后才会执行。

        7.CSSOM树构建完毕,执行解析完成的JS文件,执行结束之后,HTML文件才会继续解析并生成DOM树。

        8.现在使用DOM树和CSSDOM树结合生成render渲染树。然后根据渲染树和盒子模型生成layout布局,最后进行页面绘制。

重绘和重排

        重绘和重排是在页面首次加载完毕也就是上述过程结束之后,页面发生变化时进行的。

重绘(repaint)

        屏幕的一部分要重绘。渲染树节点发生改变,但不影响该节点在页面当中的空间位置及大小。譬如某个div标签节点的背景颜色、字体颜色等等发生改变,但是该div标签节点的宽、高、内外边距并不发生变化,此时触发浏览器重绘(repaint)。

重排(reflow)

        也有称回流,当渲染树节点发生改变,影响了节点的几何属性(如宽、高、内边距、外边距、或是float、position、display:none;等等),导致节点位置发生变化,此时触发浏览器重排(reflow),需要重新生成渲染树。譬如JS为某个p标签节点添加新的样式:"display:none;"。导致该p标签被隐藏起来,该p标签之后的所有节点位置都会发生改变。此时浏览器需要重新生成渲染树,重新布局,即重排(reflow)。

重排一定会引起重绘,重绘不一定会引起重排。

        重排会造成很严重的时间浪费,因为他需要重新生成渲染树并进行绘制。因此减少重排的次数能有效的提高浏览器的性能。

减少重排的方法:

        1. 直接改变className,如果动态改变样式,则使用cssText(考虑没有优化的浏览器);

        2. 让要操作的元素进行”离线处理”,处理完后一起更新;

                a) 使用DocumentFragment进行缓存操作,引发一次回流和重绘;

                b) 使用display:none技术,只引发两次回流和重绘;

                c) 使用cloneNode(true or false) 和 replaceChild 技术,引发一次回流和重绘;

        3.不要经常访问会引起浏览器flush队列的属性,如果你确实要访问,利用缓存;

        4. 让元素脱离动流,减少回流的Render Tree的规模。

        还有就是虚拟DOM的使用可以有效地减少重排的次数。⬇️⬇️⬇️⬇️⬇️⬇️

虚拟DOM和真实DOM

        当下三大前端框架react、vue、angular,底层全都使用了虚拟DOM作为提高浏览器性能的方式。

        真实DOM:由HTML文件解析生成的DOM结构。真实DOM的改变会引起重绘和重排。

        虚拟DOM:虚拟DOM是根据真实DOM虚拟出来的一种树形数据结构。虚拟DOM的改变并不会引起重绘和重排。

工作机制

        真实DOM:在虚拟DOM出现之前,js直接对真实DOM进行操作,每一次操作之后都有可能使得DOM内容样式发生变化从而引起重排。之前好的方法是先让真实DOM脱离文档流,然后对其进行修改,修改完成之后将真实DOM再添加会文档里,这样就引起了两次重排。

        虚拟DOM:的原理是使用虚拟DOM对真实DOM进行一个映射,在页面发生变化之后,先对虚拟DOM进行修改,修改虚拟DOM并不会引起页面重排。在虚拟DOM修改完成之后,与真实DOM进行比较,更新真实DOM中发生变化的部分,通过少数的重排实现对页面的更新。

主要区别

        真实DOM操作花费的时间:真实DOM增删改 + (可能较多节点)重排与重绘
        虚拟DOM操作花费的时间:虚拟DOM增删改 + 真实DOM差异增删改(这与Diff算法效率有关) + (较少节点)重排与重绘


标签:

上一篇: 我是如何学习任意前端框架的 下一篇:
素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。