Diff算法详解

原创已于 2024-03-22 18:49:52 修改 · 629 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #开发语言

于 2024-03-21 18:43:19 首次发布

简要了解

Diff 算法目的就是找出新旧虚拟dom差异，最小化更新视图；即本质就是比较两个JS对象的差异；
并不是页面上所有的更新都需要Diff算法。

在了解Diff算法之前，我们首先需要了解一下什么是虚拟DOM。

虚拟DOM

虚拟DOM是表示真实DOM的JS对象

这是一段真实DOM：

<div class="container">
    <p class="item">CSDN:浅墨_东</p>
    <strong class="intro">一个前端小白菜</strong>
</div>

它对应的虚拟DOM是下列的一个JS对象：

        let Vnode = {
            tagName: "div",
            props: {
                class: "container",
            },
            children: [
                {
                    tagName: "p",
                    props: {
                        'class': "item",
                    },
                    text:'CSDN:浅墨_东'
                },
                {
                    tagName: "strong",
                    props: {
                        'class': "item",
                    },
                    text:'一个前端小白菜'
                },
            ],
        };

里面包含字段有：标签名、标签属性、子标签名称属性、文本节点。

我们在了解虚拟DOM之后，就可以来了解Diff算法

Diff算法

如果我们修改了上面真实DOM的文本内容：

<div class="container">
    <p class="item">CSDN:浅墨_东</p>
    <strong class="intro">专注分享前端干货</strong>
</div>

就会生成一个新的虚拟DOM：

        let Vnode = {
            tagName: "div",
            props: {
                class: "container",
            },
            children: [
                {
                    tagName: "p",
                    props: {
                        'class': "item",
                    },
                    text:'CSDN:浅墨_东'
                },
                {
                    tagName: "strong",
                    props: {
                        'class': "item",
                    },
                    text:'专注分享前端干货'
                },
            ],
        };

如果能快速找到新旧JS对象之间的差异，就可以最小化的更新视图，那么就产生了 Diff 算法；Diff算法的目的就是找出差异，最小化更新视图。