虚拟DOM总结

最新推荐文章于 2021-12-16 20:26:26 发布
最新推荐文章于 2021-12-16 20:26:26 发布
阅读量79 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：https://juejin.im/post/5acb13ff518825557459ff62
版权

什么是vdom？ 为何会存在Vdom？

  1. 用 js 模拟 DOM 结构。
  2. DOM变化的对比放在js层来做。
  3. 提高重绘性能。

真实DOM：

<ul id="list">
    <li class="item">item1</li>
    <li class="item">item2</li>
</ul>
复制代码

js模拟：

{
    tag: 'ul',
    attrs: {
        id: 'list'
    },
    children: [
        {
            tag: 'li',
            attrs: {className: 'item'},
            children: ['item1']   
        },
        {
            tag: 'li',
            attrs: {className: 'item'},
            children: ['item2'] 
        }
    ]
}
复制代码

举一个栗子：

设计一个数据表格，点击按钮更改数据。

dom 操作的写法：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="container"></div>
    <button id="btn-change">数据更改</button>
</body>
<script src="./jquery.min.js"></script>
<script>
    var data = [
        {
            name: 'test1',
            age: '23',
            address: 'shanghai'
        },
        {
            name: 'test2',
            age: '24',
            address: 'beijing'
        },
        {
            name: 'test3',
            age: '25',
            address: 'chengdu'
        }
    ]

    function render(data) {
        var $container = $("#container");
        $container.html('');

        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);
    }

    render(data);

    $('#btn-change').on('click', function () {
        data[1].name = 'yezhiwei';
        data[2].age = '30';
        render(data);
    })
</script>

</html>
复制代码

vdom如何应用，核心API是什么？

  1. snabbdom介绍

  2. 核心api：

    h(),patch()

先看一个栗子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="container"></div>
    <button id="btn-change">change</button>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.min.js"></script>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-class.min.js"></script>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-props.min.js"></script>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-style.min.js"></script>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-eventlisteners.min.js"></script>
    <script src="https://cdn.bootcss.com/snabbdom/0.7.1/h.min.js"></script>
    <script>
        const snabbdom = window.snabbdom;
        //定义patch函数
        const patch = snabbdom.init([
            snabbdom_class,
            snabbdom_props,
            snabbdom_style,
            snabbdom_eventlisteners
        ]);
        //定义h
        const h = snabbdom.h;
    
        const container = document.getElementById('container');
        
        //生成vnode
        var vnode = h('ul#list', {}, [
            h('li.item', {}, 'item 1'),
            h('li.item', {}, 'item 2')
        ])
        patch(container, vnode);
        
        document.getElementById('btn-change').addEventListener('click', function(){
            //生成新的vnode
            var newVnode = h('ul#list', {}, [
                h('li.item', {}, 'item 1'),
                h('li.item', {}, 'item b'),
                h('li.item', {}, 'item 3')
            ])
            patch(vnode, newVnode);
        })
    </script>
</html>
复制代码

改写上面dom处理的例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="container"></div>
    <button id="btn-change">change</button>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom.min.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-class.min.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-props.min.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-style.min.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/snabbdom-eventlisteners.min.js"></script>
<script src="https://cdn.bootcss.com/snabbdom/0.7.1/h.min.js"></script>
<script>
    const snabbdom = window.snabbdom;
    //定义patch函数
    const patch = snabbdom.init([
        snabbdom_class,
        snabbdom_props,
        snabbdom_style,
        snabbdom_eventlisteners
    ]);
    //定义h
    const h = snabbdom.h;

    const container = document.getElementById('container');
    const btnChange = document.getElementById('btn-change');

    var data = [
        {
            name: 'test1',
            age: '23',
            address: 'shanghai'
        },
        {
            name: 'test2',
            age: '24',
            address: 'beijing'
        },
        {
            name: 'test3',
            age: '25',
            address: 'chengdu'
        }
    ]

    data.unshift({
        name: '姓名',
        age: '年龄',
        address: '地址'
    })

    var vnode;
    var newVnode;
    render(data);
    function render(data){
        newVnode = h('table', {} ,data.map(function(item){
            var tds = [];
            for(var i in item){
                if(item.hasOwnProperty(i)){
                    tds.push(h('td', {}, item[i] + ''))
                }
            }
            return h('tr', {}, tds);
        }))

        if(vnode){
            patch(vnode, newVnode);
        }else{
            patch(container, newVnode);
        }
        vnode = newVnode;
    }

    btnChange.addEventListener('click', function(){
        data[1].name = 'yezhiwei';
        data[2].age = '100';
        render(data);
    })
</script>
</html>
复制代码

打开控制台观察下两种方法的DOM变化时的闪烁情况，第二种方法明显优于第一种方法，只修改了变化的部分。

diff算法

为何使用diff算法，一句话来说明的话：

因为DOM操作比较昂贵，想要减少DOM的操作就必须找出必要更新的节点，而找出的过程就称为----diff算法。

模拟 patch(container, vnode);

function createElement(vnode){
    var tag = vnode.tag,
        attrs = vnode.attrs || {},
        children = vnode.children || []
    if(!tag){
        return null
    }
    
    var elem = document.createElement(tag);
    for(var attr in attrs){
        if(attrs.hasOwnProperty(attr)){
            elem.setAttribute(attr, attrs[attr]);
        }
    }
    
    children.forEach(function(children) {
        elem.appendChild(createElement(children));
    })
    
    return elem
}
复制代码

模拟patch（vnode， newVnode）

function updateChildren(vnode, newVnode){
    var children = vnode.children || [];
    var newChildren = newVnode.children || [];
    children.forEach(function(child, index){
        var newChild = newChildren[index];
        if(!newChild){
            return false
        }
        if(child.tag === newChild.tag){
            updateChildren(child, newChild)
        }else{
            replaceNode(child, newChild)
        }
    })
}
复制代码
weixin_33835690
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
虚拟dom总结
qq_37820215的博客
08-27 238
一、三个过程 用JavaScript模拟DOM树，并渲染这个DOM树 比较新老DOM树，得到比较的差异对象-----diff 把差异对象应用到渲染的DOM树。------patch（打补丁） 先利用diff找到差异对象，再对其进行patch，就是创建新节点、移除等操作。 有一个问题：那个老dom树就是真实dom树吗，对其patch就是对真dom树直接进行操作吗？我觉得是的 浅析虚拟dom原理并实现 详解Vue中的虚拟DOM Vue.js通过编译将template 模板转换成渲染函数(rende
虚拟DOM 总结
m0_37856464的博客
10-19 187
什么是虚拟DOM？ 虚拟 DOM 是一个 javascript 对象，通过这个 javascript 对象来描述真实的 DOM 。（虚拟DOM ：用 javascript 模拟真实的 DOM 结构） 为啥真实DOM操作不推荐？ 真实DOM的操作，一般都会对某块元素的整体重新渲染。 为啥虚拟DOM能提升性能 当使用虚拟DOM时，在数据发生变化的时候，会对比前后差异，只需要局部刷新变化的位置就好了。 https://segmentfault.com/a/1190000020733831 1. 虚.
虚拟dom的简单总结
yezi153的博客
12-16 179
当浏览器读到这些HTML标签所组成的结构时，会建立一个dom节点（元素，文本）树来追踪dom节点的内容（dom元素或内容的更新），要高效的更新这些节点比较困难，不过我们不必自己更新，可以放到vue的模块或渲染函数里面做更新处理。 虚拟dom----本质是一个js对象，里面存储着vue页面上需要渲染的节点及节点的描述信息，vue通过虚拟dom的更新来展示真实dom更新之后的样子 ...
虚拟DOM的学习总结
weixin_30292745的博客
06-10 54
什么是虚拟DOM？ 　　就是虚拟创建的一个DOM对象。 为什么要有虚拟DOM？ 　　我们要知道大部分浏览器的引擎工作流程都差不多，创建DOM tree –> 创建Style Rules -> 构建Render tree -> 布局Layout –> 绘制Painting。 　　当你用原生js去操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍，如果更新10次就...
什么是虚拟dom
WhyBecause的博客
01-02 1万+
虚拟dom就是一个特殊的对象。 Vue之所以运行高效，因为采用了虚拟dom，减少了对真实的dom操作。 一、dom和虚拟dom对比 //dom &amp;lt;ul id='test'&amp;gt; &amp;lt;p class='hehe'&amp;gt;这里是p标签&amp;lt;/p&amp;gt; &amp;lt;/ul&amp;gt; //对应的虚拟dom对象 let vdom={ tag:'ul',
解决vue中虚拟dom,无法实时更新的问题
10-18
总结来说，遇到Vue中虚拟DOM无法实时更新的问题时，可以利用Vue实例的$nextTick()方法来解决。这个方法能够帮助开发者在下一次DOM更新之后执行特定的代码，确保开发者能够获取到最新状态的DOM元素，从而正确使用第三...
smevdom虚拟DOM组件
08-12
总结来说，SMEVDOM是一个适用于JavaScript开发的虚拟DOM库，它简化了DOM操作，提高了应用的性能和响应速度。对于希望深入理解虚拟DOM机制或者寻求轻量级解决方案的开发者，SMEVDOM是一个值得研究和使用的工具。
详解操作虚拟dom模拟react视图渲染
10-18
总结起来，操作虚拟DOM模拟React视图渲染的核心在于使用虚拟DOM来最小化与真实DOM的交互，只在必要时更新真实DOM，从而提升应用的性能和响应速度。通过上述知识点的学习，开发者可以更好地理解React的工作原理，并在...
vue2.0的虚拟DOM渲染思路分析
10-18
总结来说，Vue 2.0 的虚拟DOM渲染机制通过模拟DOM结构、使用Diff算法以及高效的更新策略，实现了高效的数据驱动视图更新，显著提升了前端应用的性能。在实际开发中，理解并熟练运用这些原理可以帮助我们编写出更优化...
js代码-手写虚拟dom
07-15
总结来说，手写虚拟DOM是一个很好的学习实践，它涵盖了JavaScript对象表示、数据结构操作、算法设计等多个方面的知识。通过这个项目，开发者不仅可以深入理解React等库背后的机制，还能提高自己在性能优化和前端架构...
为什么虚拟DOM更优胜一筹
weixin_34200628的博客
12-02 92
注意： 虚拟DOM只是实现MVVM的一种方案，或者说是视图更新的一种策略。没有虚拟DOM比MVVM更好一说。 我们回顾传统MVC框架,如backbone,它是将某个模板编译成模板函数,需要更新时,是自己手动将数据整体传入模板函数, 得到一个字符串,使用innerHTML刷新某个容器!注意,这里其实可以优化,但由于是手动,是体力活,都是使用很粗放型的innerhTML了事 (使...
虚拟dom及其优劣
Charlene_lx的博客
04-29 6107
什么是虚拟dom 用js模拟一颗dom树,放在浏览器内存中.当你要变更时,虚拟dom使用diff算法进行新旧虚拟dom的比较,将变更放到变更队列中,反应到实际的dom树,减少了dom操作. 虚拟DOM将DOM树转换成一个JS对象树,diff算法逐层比较,删除,添加操作,但是,如果有多个相同的元素,可能会浪费性能,所以,react和vue-for引入key值进行区分. 优点: -虚拟DOM...
React 虚拟DOM的理解
u010046318的博客
08-30 5479
React框架现在用的人非常多，React为何如此受欢迎？我想原因是引入了虚拟DOM的概念，从而使得性能有所提升吧。为什么引入虚拟DOM性能就有提升了？下面我想来说一说虚拟DOM的原理。什么是虚拟DOM？React中，先将真实的DOM抽象成一个JavaScript对象，也就是虚拟DOM。比如，我们可以构造一个虚拟DOM：var element = { element: 'ul', p
React虚拟DOM的原理&&为什么使用虚拟DOM
JUST CODING...
06-17 2524
什么是虚拟DOM？传统的 DOM 操作是直接在 DOM 上操作的，当需要修改一系列元素中的值时，就会直接对 DOM 进行操作。而采用 Virtual DOM 则会对需要修改的 DOM 进行比较（DIFF），从而只选择需要修改的部分。也因此对于不需要大量修改 DOM 的应用来说，采用 Virtual DOM 并不会有优
全面理解虚拟DOM，实现虚拟DOM
热门推荐
飞鸟Blog
05-01 1万+
最近一两年前端最火的技术莫过于ReactJS，即便你没用过也该听过，ReactJS由业界顶尖的互联网公司facebook提出，其本身有很多先进的设计思路，比如页面UI组件化、虚拟DOM等。本文将带你解开虚拟DOM的神秘面纱，不仅要理解其原理，而且要实现一个基本可用的虚拟DOM。 1.为什么需要虚拟DOM DOM是很慢的，其元素非常庞大，页面的性能问题鲜有由JS引起的，大部分都是由DOM
vue-钩子/ 虚拟DOM / 模板语法
ZXY_Hobby的博客
09-12 561
钩子 原名是“hook”，它是一种事件劫持机制，也就是说它会比你的事件更早进行执行处理。 路由导航钩子 ： vue-router beforeRouteEnter 钩子 不能 访问 this，因为钩子在导航确认前被调用,因此即将登场的新组件还没被创建。不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。 生命周期钩子 挂载 m
React Native探索（四）：虚拟DOM Diff算法解析
Louis的专栏
01-08 4071
React中最神奇的部分莫过于虚拟DOM，以及其高效的Diff算法。这让我们可以无需担心性能问题而”毫无顾忌”的随时“刷 新”整个页面，由虚拟DOM来确保只对界面上真正变化的部分进行实际的DOM操作。React在这一部分已经做到足够透明，在实际开发中我们基本无需关心 虚拟DOM是如何运作的。然而，作为有态度的程序员，我们总是对技术背后的原理充满着好奇。理解其运行机制不仅有助于更好的理解React组
虚拟 DOM 的优缺点？
WebDestiny的博客
09-19 4924
优点： 保证性能下限： 框架的虚拟 DOM 需要适配任何上层 API 可能产生的操作，它的一些 DOM 操作的实现必须是普适的，所以它的性能并不是最优的；但是比起粗暴的 DOM 操作性能要好很多，因此框架的虚拟 DOM 至少可以保证在你不需要手动优化的情况下，依然可以提供还不错的性能，即保证性能的下限； 无需手动操作 DOM： 我们不再需要手动去操作 DOM，只需要写好 View-Model ...
浅谈React的最大亮点——虚拟DOM
筱葭的博客
05-04 1万+
React非常快速是因为它从不直接操作DOM。 虚拟DOM是在DOM的基础上建立了一个抽象层，对数据和状态所做的任何改动，都会被自动且高效的同步到虚拟DOM，最后再批量同步到DOM中。 1、传统App与React App的对比： 传统App React App 2、虚拟DOM的原理： React会在内存中维护一个虚拟DOM树，对这个树进行读或写，实际上是
react 虚拟dom和真实dom
最新发布
08-28
总结来说，React的虚拟DOM是通过在内存中创建一个轻量级的JavaScript对象来表示DOM结构的副本，而真实DOM是浏览器中实际存在的DOM树。React使用虚拟DOM来管理用户界面的状态，并将其转化为真实DOM更新到浏览器中。...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值