JS基础知识2.0(四)虚拟DOM

最新推荐文章于 2022-12-12 16:57:51 发布

Daisyiko

最新推荐文章于 2022-12-12 16:57:51 发布

阅读量1k

点赞数

分类专栏： JavaScript 文章标签： javaScript diff vdom

本文链接：https://blog.youkuaiyun.com/qq_37021554/article/details/86677405

版权

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

本文深入探讨虚拟DOM(VDOM)的概念及其在前端开发中的重要作用，解析为何选择VDOM来优化DOM操作，减少浏览器重绘和回流，提升网页性能。文章详细介绍了VDOM的应用方式，通过Snabbdom等开源库的h函数和patch函数展示VDOM的创建和更新过程。同时，阐述了Diff算法的核心流程，解释如何通过算法精准定位需要更新的DOM节点，从而极大提高网页渲染效率。

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

Virtual dom

vdom是 vue和react 的核心，哪个都绕不开它，vdom比较独立。使用也比较简单。

问题：
1.vdom是什么？为何会存在vdom?
2.vdom如何应用，核心api是什么？
3.介绍一下diff算法

知识点：
1.vdom是什么，为何使用vdom

virtual dom，虚拟dom
用JS模拟DOM结构
DOM变化的对比，放在JS层来做（图灵完备语言（能实现逻辑复杂性语言））

DOM操作很昂贵。

设计一个需求场景

   <div id="container"></div>
    <button id="btn-change">change</button>
    <script src="https://cdn.bootcss.com/jquery/3.2.0/jquery.js"></script>
    <script type="text/javascript">
        var data = [
            {
                name: '张三',
                age: '20',
                address: '北京'
            },
            {
                name: '李四',
                age: '21',
                address: '北京'
            },
            {
                name: '王五',
                age: '22',
                address: '北京'
            }
        ]

        //渲染函数
        function render (data) {
            var $container = $('#container')
            // 清空容器
            $container.html('')

            // 拼接 table
            var $table = $('<table>')
            $table.append($('<tr><td>name</td><td>age</td><td>address</td></tr>'))
            data.forEach(function (item) {
                $table.append($('<tr><td>'+ item.name +'</td><td>'+ item.age +'</td><td>'+ item.address +'</td></tr>'))
            })

            //渲染到页面
            $container.append($table)

        }


        $('#btn-change').click(function () {
            data[1].age = 30
            data[2].address = '深圳'
            //re-render 再次渲染
            render(data)
        })

        //页面加载完 立刻执行 （初次渲染）
        render(data)


    </script>

将dom放在最后面就是最后渲染一次，如果放在var table...下面，就是渲染5次

默认创建dom节点属性很多，js模拟更简单点尽量减少dom操作

总结：
dom操作是昂贵的，JS运行效率高
尽量减少DOM操作，而不是“推倒重来”
项目越复杂，影响就越严重
vdom即可解决这个问题

2.vdom的如何应用，核心API是什么
介绍snabbdom,开源vdom库