1. 什么是Virtual DOM?

Virtual DOM(虚拟DOM)是指用JS模拟DOM结构。本质上来讲VD是一个JS对象，并且至少包含三个属性：tag(html标签)，props(标签的属性，如class)，children(子元素对象)。

<div class="setting-menu">

  <ul>

    <li>Picture</li>

    <li>Sound</li>

    <li>Time</li>

  </ul>

</div

用JS模拟上面这段DOM结构：

{

    tag: 'div',

    props: {class: 'setting-menu'},

    children: [

        {

            tag: 'ul',

            props: {},

            child: [

                {

                    tag: 'li',

                    props: {},

                    children:['Picture']

                },

                {

                    tag: 'li',

                    props: {},

                    children:['Sound']

                },

                {

                    tag: 'li',

                    props: {},

                    children:['Time']

                }

            ]

        }

    ]

}

2. 为什么需要Virtual DOM?

知其然，知其所以然。我们知道了什么是虚拟DOM之后，还得需要知道为什么需要他？

首先，我们先达成一个共识："JS操作DOM的代价是昂贵的，会引起回流和重绘，严重影响性能"。

现在有一个需求，上诉DOM结构需要支持修改，增加，删除？

1. 最简单的做法：通过JS操作DOM。该方法的缺点：随这应用的复杂度提升，代码变的难以维护，且性能不好，每次dom操作可能都会引起浏览器的回流和重绘。

2. MVC模式。之后研究出了MVC，MVP模式，但这种模式只是从代码组织的方式来降低维护难度，并没用改变JS操作DOM的本质。

3. MVVM模式，只要在模版中声明视图组件是和什么状态进行绑定的，双向绑定引擎就会在状态

更新的时候自动更新视图，MVVM 可以能很好的降低维护状态以及减少视图的复杂程度。

还有一个非常直观的方法，可以大大降低视图更新的操作。一旦状态发生了变化，就用模版引擎重新渲染整个视图，然后用新的视图更换掉旧的视图。就像上面的表格，当用户点击的时，还是在 JS 里面更新状态，但是页面更新就不用手动操作 DOM 了，直接把整个表格用模版引擎重新渲染一遍，然后设置一下 innerHTML 。那么这个方法会有个很大的问题，会导致 DOM 操作变慢，因为任何的状态变更都要重新构造整个 DOM，性价比很低。对于局部的小视图的更新，这样没有问题（backbone就是这么干的）。但对于大型视图，需要更新页面较多局部视图时，这样的做法就非常不

可取。

使用Jquery模拟：

<!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 type="text/javascript" src="https://cdn.bootcss.com/jquery/3.4.0/jquery.min.js"></script>

  <script type="text/javascript">

    var data = [{

      name: "张三",

      age: 24,

      address: "深圳"

    }, {

      name: "张三",

      age: 24,

      address: "深圳"

    }, {

      name: "张三",

      age: 24,

      address: "深圳"

    }];

    /**

    * 渲染页面

    *

    */

    function render(data) {

      // first step clear container

      $('#container').html('');

      // 拼接ul

      var uldom = document.createElement('ul');

      for(var i = 0; i < data.length; i++) {

        var lidom = document.createElement('li');

        lidom.append(`name: ${data[i].name}, age: ${data[i].age}, address: ${data[i].address}`);

        uldom.appendChild(lidom);

      }

      //渲染页面 放到最后 一次渲染

      $('#container').append(uldom);

    }

    $('#btn-change').click(function () {

      data[1].name = '李四';

      data[2].name = '王五';

      //修改后重新渲染

      render(data);

    })

    render(data); //初始化页面渲染

  </script>

</body>

</html>

　　

既然JS操作DOM很慢，而操作JS对象非常快，就可以用 JavaScript 对象表示的树结构来构建一个真正的 DOM 。当状态变更时，重新渲染这个 JavaScript 的对象结构，实现视图的变更，结构根据变更的地方重新渲染。这就是Virtual DOM 算法。

通过VD的比较，我们可以将多个操作合并成一个批量的操作，并且只更新有差异的部分，从而减少dom重排的次数，进而缩短了生成渲染树和绘制所花的时间。

Virtual DOM 系列一：认识虚拟DOM的更多相关文章

  1. [react] 什么是虚拟dom？虚拟dom比操作原生dom要快吗？虚拟dom是如何转变成真实dom并渲染到页面的?

    壹 ❀ 引 虚拟DOM(Virtual DOM)在前端领域也算是老生常谈的话题了,若你了解过vue或者react一定避不开这个话题,因此虚拟DOM也算是面试中常问的一个点,那么通过本文,你将了解到如下 ...

  2. react 什么是虚拟DOM？深入了解虚拟DOM

    底层的理论基础 一. 原始生成步骤 1.state 数据 2.jsx 模版 3.数据 + 模板 结合,生成真实的DOM,来显示 4.state 发生改变了 5.数据 + 模板 结合,生成真实的DOM, ...

  3. 原生DOM操作vs框架虚拟DOM比较

    1. 原生 DOM 操作 vs. 通过框架封装操作. 这是一个性能 vs. 可维护性的取舍.框架的意义在于为你掩盖底层的 DOM 操作,让你用更声明式的方式来描述你的目的,从而让你的代码更容易维护.没 ...

  4. React:关于虚拟DOM（Virtual DOM）

    Virtual DOM 是一个模拟 DOM 树的 JavaScript 对象. React 使用 Virtual DOM 来渲染 UI,当组件状态 state 有更改的时候,React 会自动调用组件 ...

  5. 虚拟DOM与DOM diff算法

    虚拟DOM是什么? 一个虚拟DOM(元素)是一个一般的js对象, 准确的说是一个对象树(倒立的) 虚拟DOM保存了真实DOM的层次关系和一些基本属性,与真实DOM一一对应,如果只是更新虚拟DOM, 页 ...

  6. 什么是虚拟DOM？

    (摘抄自一篇文章,觉得这里写得非常不错,所以单独放出来,希望能对大家有帮助.)React为啥这么大?因为它实现了一个虚拟DOM(Virtual DOM).虚拟DOM是干什么的?这就要从浏览器本身讲起 ...

  7. 深入理解react中的虚拟DOM、diff算法

    文章结构: React中的虚拟DOM是什么? 虚拟DOM的简单实现(diff算法) 虚拟DOM的内部工作原理 React中的虚拟DOM与Vue中的虚拟DOM比较 React中的虚拟DOM是什么?   ...

  8. vue2.0的虚拟DOM渲染

    1.为什么需要虚拟DOM 前面我们从零开始写了一个简单的类Vue框架(文章链接),其中的模板解析和渲染是通过Compile函数来完成的,采用了文档碎片代替了直接对页面中DOM元素的操作,在完成数据的更 ...

  9. 如何编写自己的虚拟DOM

    要构建自己的虚拟DOM,需要知道两件事.你甚至不需要深入 React 的源代码或者深入任何其他虚拟DOM实现的源代码,因为它们是如此庞大和复杂--但实际上,虚拟DOM的主要部分只需不到50行代码. 有 ...

  10. 深入理解React虚拟DOM

    一.什么是虚拟DOM 虚拟DOM可以看做一棵模拟了DOM树的JavaScript对象树.比如: var element = { element: 'ul', props: { id:"uli ...

随机推荐

  1. 目标检测 非极大值抑制（Non-Maximum Suppression，NMS）

    非极大值抑制(Non-Maximum Suppression,NMS),顾名思义就是抑制不是极大值的元素,可以理解为局部最大搜索.也可以理解为只取置信度最高的一个识别结果. 举例:  如图所示,现在 ...

  2. 104 - kube-scheduler源码分析 - predicate整体流程

    (注:从微信公众:CloudGeek复制过来,格式略微错乱,更好阅读体验请移步公众号,二维码在文末) 今天我们来跟一下predicates的整个过程:predicate这个词应该是“断言.断定”的意思 ...

  3. Docker最全教程——数据库容器化（十）

    终于按时完成第二篇.本来准备着手讲一些实践,但是数据库部分没有讲到,部分实践会存在一些问题,于是就有了此篇以及后续——数据库容器化.本篇将从SQL Server容器化实践开始,并逐步讲解其他数据库的容 ...

  4. 【转载】java static 关键字的四种用法

    原文链接点这里,感谢博主分享 在java的关键字中,static和final是两个我们必须掌握的关键字.不同于其他关键字,他们都有多种用法,而且在一定环境下使用,可以提高程序的运行性能,优化程序的结构 ...

  5. Unity MMORPG游戏开发教程（一）——初识Unity

    五邑隐侠,本名关健昌,10年游戏生涯,现隐居五邑.本系列文章以C#为介绍语言,基于Unity2017.4.x. 一.环境搭建 我使用的是Unity+VSCode,用的是mac系统,windows的自己 ...

  6. Form 表单提交的几种方式

    简单的总结一下form表单提交的几种方式:1.最简单的方式 就用form的submit提交方式,这种提交方式是不需要回调函数的   这种方式最近到一个form提供action路径后台接受就可以< ...

  7. AppStore IPv6-only审核被拒原因分析及解决方案-a

    Apple关于IPV6规定 日前,苹果公司向开发者发出提醒,公司将会修改应用商店App Store的相关规定,所有IOS应用必须包含对IPv6-only标准的支持.据悉,该规定在6月1日生效,所有提交 ...

  8. Java内存区域和内存溢出异常

    前言 对于java程序员来说,在虚拟机自动内存管理的机制的帮助下,不再需要为每一个new操作去写配对的delete/free代码,不容易出现内存泄漏和内存溢出的问题,由虚拟机管理内存,这一切看起来都很 ...

  9. 小程序应用的Python服务器部署高配，依然是腾讯云秒杀阿里云！

    上一篇文章,“小程序创业最低配置部署,腾讯云折扣秒杀阿里云!”介绍了小程序项目启动时的最低配置服务器选择,但当项目良好发展时,还是要把服务器配置调整到标准水平,承受住日益增长的流量访问. 随着Pyth ...

  10. jsp:set/getProperty底层实现的探究

    关于jsp:set/getProperty底层实现的探究 今天上课讲到<jsp:useBean>时涉及到了<jsp:setProperty>和<jsp:getProper ...