虚拟dom原理指的是什么

这篇文章给大家分享的是有关虚拟dom原理指的是什么的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。

虚拟dom原理:当用原生js或jquery等库去操作dom时,浏览器会从构建dom树开始讲整个流程执行一遍,所以频繁操作dom会引起不需要的计算,导致页面卡顿,影响用户体验,而虚拟dom能很好的解决这个问题。

<强>虚拟dom原理:

<强> 1。为什么需要虚拟DOM

先介绍浏览器加载一个网页需要经历那些过程,我们只讨论页面解析流程,不考虑网络请求过程。

浏览器内核拿到html文件后,大致分为一下5个步骤:

<李>

解析html元素,构建DOM树

<李>

解析CSS,生成页面CSS规则树(样式规则)

<李>

将DOM树和CSS规则树关联起来,生成渲染树

<李>

布局(布局/回流),浏览器会为渲染树上的每个节点确定在屏幕上的尺寸,位置

<李>

绘制呈现树,绘制页面像素信息到屏幕上,这个过程叫油漆

当你用原生js或jquery等库去操作DOM时,浏览器会从构建DOM树开始讲整个流程执行一遍,所以频繁操作DOM会引起不需要的计算,导致页面卡顿,影响用户体验。而虚拟DOM能很好的解决这个问题。它用javascript对象表示虚拟节点(VNode),根据VNode计算出真实DOM需要做的最小变动,然后再操作真实DOM节点,提高渲染效率。

<强> 2。虚拟DOM

虚拟DOM用javascript对象来表示VNode, VNode的结构如下:

虚拟节点(VNode)结构

下面是虚拟DOM的算法流程图:

虚拟DOM算法流程图

反应Diff算法

高效的Diff算法能够保证进行对实际的DOM进行最小的变动。但是标准的的Diff算法复杂度需要O (n ^ 3),这显然无法满足性能要求。要达到每次界面都可以整体刷新界面的目的,势必需要对算法进行优化.React里结合Web界面的特点做出了两个简单的假设,使得Diff算法复杂度直接降低到O (n)。

1。两个相同组件产生类似DOM的结构,不同的组件产生不同的DOM结构;

2。对于同一层次的一组子节点,它们可以通过唯一的id进行区分。

算法上的优化反应是整个界面呈现的基础,保证了整体界面渲染的性能。

不同节点类型的比较

为了在树之间进行比较,我们首先要能够比较两个节点,在反应中即比较两个虚拟DOM节点,当两个节点不同时,应该如何处理。这分为两种情况:(1)节点类型不同,(2)节点类型相同,但是属性不同。

节点类型不同:直接删除原节点,插入新节点。

反应的DOM Diff算法实际上只会对树进行逐层比较,两棵树只会对同一层次的节点进行比较如下所述。

DOM树

反应只会对相同颜色方框内的DOM节点进行比较,即同一个父节点下的所有子节点。当发现节点已经不存在,则该节点及其子节点会被完全删除掉,不会用于进一步的比较。这样只需要对树进行一次遍历,便能完成整个DOM树的比较。

相同类型节点的比较

反应会对属性进行重设从而实现节点的转换。

感谢各位的阅读!关于“虚拟DOM原理指的是什么”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!

虚拟dom原理指的是什么