虚拟DOM (virtual DOM)

1、定义

虚拟dom就是一个简单的对象,包含标签名(tag)、属性(attr)、子元素(children),通过js操作virtual DOM,最终映射到真实的dom上。

2、为什么要用虚拟dom:

频繁地操作dom,会造成页面的回流和重绘,增加性能开销,降低页面的渲染速度。

把dom的操作放到js中,js运算速度快,提高效率;

跨平台优势,不依赖真实的环境,浏览器、node都可以实现。

3、虚拟dom在Vue中的应用:

vue.js通过编译将模板转换成渲染函数render,执行渲染函数就得到一个虚拟节点树,虚拟DOM与旧节点进行比对,记录之间的差异,只对发生变化的节点进行更新,最后返回真实的dom元素。

// patch 对比新旧节点(vnode、newVnode)
    function updateChildren(vnode,newVnode){
        var children=vnode.children||[];
        var newChildren=newVnode.children||[];
        children.forEach(function(childVnode,index){
            var newChildVnode=newChildren[index];
            if(childVnode.tag==newChildren.tag){
                //深层递归
                updateChildren(childVnode,newChildVnode)
            }else{
                //不一样则更新
                replaceNode(childVnode,newChildVnode)
            }
        });
    }

    //将Vnode渲染成真正的dom
    function createElement(vnode){
        var tag=vnode.tag;
        var attrs=vnode.attrs || {};
        var children=vnode.children || [];
        if(!tag)return null;
        //创建真实的dom元素
        var elem=document.createElement(tag);
        //属性
        var attrName
        for(attrName in attrs){if(attrs.hasOwnProperty(attrName)){
            //添加属性
            elem.setAttribute(attrName,attrs[attrs])
        }
        //子元素
        children.forEach(function(childVnode){
            //给elem添加子元素,若还有子节点,则递归生成子节点
            elem.appendChild(createElement(childVnode))
        });

        }
        //返回真实的dom元素
        return elem;
    }

原文地址:https://www.cnblogs.com/annie211/p/12629555.html

时间: 2024-11-01 22:51:15

虚拟DOM (virtual DOM)的相关文章

vue的虚拟dom(Virtual DOM )

模板转换成视图的过程 在底层实现中Vue会将模板编译成渲染函数,当然我们也可以不写模板,直接写渲染函数,以获得更好的控制. 渲染函数:渲染函数是用来生成Virtual DOM的:VNode虚拟节点:vnode可以理解成dom节点的描述对象,它描述了应该怎样去创建真实的DOM节点:patch(patching算法):虚拟DOM最核心的部分,它可以将vnode渲染成真实的DOM.这个过程是对比新旧虚拟节点之间有哪些不同,然后根据对比结果找出需要更新的的节点进行更新.其实际作用是在现有DOM上进行修改

理解 Virtual DOM(摘)及评价

框架并没有提高web的性能,只是让开发者更加专注的完成业务逻辑,而不用过渡的考虑性能上的优化.如果以性能来比的话,框架是绝对比不过优化后的原生代码的. 二.什么是Virtual DOM Virtual DOM的概念有很多解释,从我的理解来看,主要是三个方面,分别是:一个对象,两个前提,三个步骤. 一个对象指的是Virtual DOM是一个基本的JavaScript对象,也是整个Virtual DOM树的基本. 两个前提分别是JavaScript很快和直接操作DOM很慢,这是Virtual DOM

Virtual DOM的简单实现

了解React的同学都知道,React提供了一个高效的视图更新机制:Virtual DOM,因为DOM天生就慢,所以操作DOM的时候要小心翼翼,稍微改动就会触发重绘重排,大量消耗性能. 1.Virtual DOM Virtual DOM是利用JS的原生对象来模拟DOM,既然DOM是对象,我们也可以用原生的对象来表示DOM. var element = { tagName: 'ul', // 节点标签名 props: { class: 'list' // 节点的属性,ID,class... },

Virtual DOM 虚拟DOM的理解(转)

作者:戴嘉华 转载请注明出处并保留原文链接( #13 )和作者信息. 目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM树 4.2 步骤二:比较两棵虚拟DOM树的差异 4.3 步骤三:把差异应用到真正的DOM树上 5 结语 6 References 1 前言 本文会在教你怎么用 300~400 行代码实现一个基本的 Virtual DOM 算法,并且尝试尽量把 Virtual DOM 的算法思路阐述清楚.希望在阅读本

如何实现一个 Virtual DOM 及源码分析

Virtual DOM算法 web页面有一个对应的DOM树,在传统开发页面时,每次页面需要被更新时,都需要手动操作DOM来进行更新,但是我们知道DOM操作对性能来说是非常不友好的,会影响页面的重排,从而影响页面的性能.因此在React和VUE2.0+引入了虚拟DOM的概念,他们的原理是:把真实的DOM树转换成javascript对象树,也就是虚拟DOM,每次数据需要被更新的时候,它会生成一个新的虚拟DOM,并且和上次生成的虚拟DOM进行对比,对发生变化的数据做批量更新.---(因为操作JS对象会

Virtual DOM 算法

前端 virtual-dom react.js javascript 目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM树 4.2 步骤二:比较两棵虚拟DOM树的差异 4.3 步骤三:把差异应用到真正的DOM树上 5 结语 6 References 1 前言 本文会在教你怎么用 300~400 行代码实现一个基本的 Virtual DOM 算法,并且尝试尽量把 Virtual DOM 的算法思路阐述清楚.希望在阅读本

深度理解 Virtual DOM

目录: 1 前言 2 技术发展史 3 Virtual DOM 算法 4 Virtual DOM 实现 5 Virtual DOM 树的差异(Diff算法) 6 结语 7 参考链接 1 前言 我会尽量把 Virtual DOM 应用场景.实现思路.算法讲述清楚,希望大家阅读后,能让你 深入理解 Virtual DOM. 2 技术发展史 写一个像下面的应用程序,这个表格可以根据不同的字段进行升序或者降序. 最容易的方案是在你的 JavaScript 代码里面存储这样的数据: var sortKey

Virtual DOM

Virtual DOM是React的核心技术之一. virtual   英 [?v?:t?u?l]    美 [?v?:rt?u?l] adj.    实质上的,事实上的; (计算机) 虚拟的; <物>有效的,虚像的; (粒子) 实际存在的; 实际上,Virtual DOM包含: Javascript DOM模型树(VTree),类似文档节点树(DOM) DOM模型树转节点树方法(VTree -> DOM) 两个DOM模型树的差异算法(diff(VTree, VTree) -> P

Vue.js 2.0更新之增加Virtual DOM讲解

Virtual DOM是什么?在之前,React和Ember早就开始用虚拟DOM技术来提高页面更新的速度了. 若想了解它是如何工作的,就要先认清这几个概念:1.更新DOM是非常昂贵的操作当我们使用Javascript来修改我们的页面,浏览器已经做了一些工作,以找到DOM节点进行更改,例如: document.getElementById('myId').appendChild(myNewNode); 在现代的应用中,会有成千上万数量个DOM节点.所以因更新的时候产生的计算非常昂贵.琐碎且频繁的更