虚拟dom及diff算法_虚拟dom实现diff算法-优快云博客

本文链接：https://blog.youkuaiyun.com/mhc20201554114/article/details/123446557

本文详细介绍了真实DOM的工作流程，包括创建DOM树、StyleRules、Render树、布局和绘制。同时，指出了真实DOM在节点修改时遍历整个树的效率问题。接着，探讨了虚拟DOM的概念，它是真实DOM的JavaScript对象映射，用于跨平台运行，并通过snabbdom库演示了虚拟DOM的实现。文章还讲解了虚拟DOM的diff算法，用于高效地更新UI。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.真实dom的工作流程

创建DOM树——创建StyleRules——创建Render树——布局Layout——绘制Painting

2.真实dom的缺点

每一次改变页面内的dom节点，都会遍历整个dom树。效率低下，浪费资源。

3.虚拟dom本质

虚拟dom的本质就是一段js对象，因此可以跨平台运行。是对真实dom的一个映射。缺点是第一次渲染会变慢。

4.虚拟dom实现

使用虚拟dom的话就要使用snabbdom库，因此我们要在js中先引入snabbdom库。

const snabbdom = window.snabbdom

之后，将vnode（虚拟节点插入空的容器中）

const patch = snabbdom.init( [
    snabbdom_class,
    snabbdom_props , 
    snabbdom_style , 
    snabbdom_eventlisteners
])

创建vnode(虚拟节点)

const h = snabbdom.h

创建空的容器

const container = document.getElementById('container')

创建vnode

const vnode = h('ul#list', {}, [
    h('li.item', {}, '第一项'),
    h('li.item', {}, '第二项'),
])

将vnode放入空容器里

patch( container, vnode)

5.diff算法

（1）逐层判断，判断的时候比较val和key两个值，如果一样，代表有比较节点的必要，开始比较，不一样，就直接替换。
（2）一样的话，开始比较新旧节点，按照新节点的顺序排列，如果新节点的第一个不存在，则在旧节点创建一个，存在，则将旧节点中该结点移动到第一位，后面以此推。或者说是，遍历新节点，每一个节点都与旧节点中所有节点比较一次。如果旧节点中有和该节点一样的节点，就直接拿过来用，避免重新创建。没有的话就重新创建。