提起Virtual DOM，总是给人一种高深莫测的感觉，大家都知道它比DOM快。那么Virtual DOM到底是何方神圣呢？在深入理解Virtual DOM之前，先让我们回顾一下DOM。

一、什么DOM?

所谓DOM，就是HTML、XML、XHTML的一种抽象描述，它会把这些文档抽象成树类型的数据结构，即DOM tree。树的每一个节点，即一个DOM节点。浏览器提供了众多的DOM API，让它拥有了DOM操作的神奇魔力。

 
dom操作.png

二、Virtual DOM出现的背景

由于SPA类型项目的出现，DOM tree的结构变得越来越复杂，它的改变也变得越来越频繁，大量的DOM操作产生了，对DOM节点的增删改，还有许多的事件监听、事件回调、事件销毁需要处理。由于DOM tree结构的频繁变化，会导致大量的reflow从而影响性能。于是Virtual DOM就出现了。

三、什么是Virtual DOM？

DOM结构是一系列的属性和方法的集合。所谓Virtual DOM，就是用轻量级的JavaScript对象来代替庞杂的DOM结构。下面代码就展示了HTML结构和Virtual DOM之间的关系。

 
真实DOM结构
 

虚拟DOM结构

虚拟DOM Vitural DOM Tree的更多相关文章

  1. 如何理解虚拟React的DOM（转）

    目录: 1 前言 2 对前端应用状态管理思考 3 Virtual DOM 算法 4 算法实现 4.1 步骤一:用JS对象模拟DOM树 4.2 步骤二:比较两棵虚拟DOM树的差异 4.3 步骤三:把差异 ...

  2. 虚拟 DOM 与 DOM Diff

    虚拟 DOM 与 DOM Diff 本文写于 2020 年 9 月 12 日 虚拟 DOM 在今天已经是前端离不开的东西了,因为他的好处实在是太多了. 在<高性能 JavaScript>一 ...

  3. 精讲 org.w3c.dom(java dom)解析XML文档

    org.w3c.dom(java dom)解析XML文档 位于org.w3c.dom操作XML会比较简单,就是将XML看做是一颗树,DOM就是对这颗树的一个数据结构的描述,但对大型XML文件效果可能会 ...

  4. React v16-alpha 从virtual dom 到 dom 源码简读

    一.物料准备 1.克隆react源码, github 地址:https://github.com/facebook/react.git 2.安装gulp 3.在react源码根目录下: $npm in ...

  5. -_-#【Dom Ready / Dom Load】

    Dom Ready和Dom Load DOM Ready 详解 javascript的domReady 域名解析 - 加载html - 加载js和css - Dom Ready - 加载图片等其他信息 ...

  6. js 字符串转dom 和dom 转字符串

    js 字符串转dom 和dom 转字符串 博客分类: JavaScript   前言: 在javascript里面动态创建标准dom对象一般使用: var obj = document.createE ...

  7. javascript DOM和DOM操作的四种基本方法

    在了解了javascript的语言特性后,javascript真正大放光彩的地方来了——这就是javascript DOM Javascript DOM DOM(Document Object Mod ...

  8. DOM & Shadow DOM & Virtual DOM

    DOM & Shadow DOM & Virtual DOM What is the difference between Shadow DOM and Virtual DOM? ht ...

  9. BOM与DOM之DOM操作

    目录 一:DOM操作 1.DOM介绍 2.DOM标准规定HTML文档中的每个成分都是一个节点(node): 3.DOM操作需要用关键字 二:查找标签 1.id查找 类查找 标签查找(直接查找) 2.i ...

随机推荐

  1. 2、尚硅谷_SSM高级整合_创建Maven项目.avi

    第一步我们新建立一个web工程 这里首先要勾选上enable的第一个复选框 这里要勾选上add maven support 我们在pom.xml中添加sevlet的依赖 创建java web项目之后, ...

  2. java scoket Blocking 阻塞IO socket通信一

    package bhz.bio; import java.io.IOException; import java.net.ServerSocket; import java.net.Socket; p ...

  3. SSM登录拦截验证

    /** * 登陆拦截器,用于后台管理系统拦截,判断用户是否登录 * @author ljy * @date 2015/8/19 */public class LoginForAdminIntercep ...

  4. Python实用笔记 （27）面向对象高级编程——使用枚举类

    枚举类型定义一个class类型,然后,每个常量都是class的一个唯一实例.Python提供了Enum类来实现这个功能: from enum import Enum Month = Enum('Mon ...

  5. Python实用笔记 （17）模块

    一个abc.py的文件就是一个名字叫abc的模块,一个xyz.py的文件就是一个名字叫xyz的模块. 现在,假设我们的abc和xyz这两个模块名字与其他模块冲突了,于是我们可以通过包来组织模块,避免冲 ...

  6. day17—max, map, reduce, filter, zip 函数的使用

    一.max 函数 l=[3,2,100,999,213,1111,31121,333] print(max(l)) # dic={'k1':10,'k2':100,'k3':30} print(max ...

  7. cron表达式详解，cron表达式写法，cron表达式例子

    (cron = "* * * * * *") cron表达式格式:{秒数} {分钟} {小时} {日期} {月份} {星期} {年份(可为空)}例  "0 0 12 ? ...

  8. 注册中心（Eureka/Consul）

    基于SpringBoot1.5.4与SpringCloud(Dalston.SR2)的SpringCloud学习博客,转载请标明出处,O(∩_∩)O谢谢 - Spring Cloud简介 Spring ...

  9. node-koa

    什么是koa 基于node.js 平台的下一代web开发框架 async await npm install --save koa npm install --save koa-router ctx. ...

  10. MySQL函数索引及优化

    很多开发人员在使用MySQL时经常会在部分列上进行函数计算等,导致无法走索引,在数据量大的时候,查询效率低下.针对此种情况本文从MySQL5.7 及MySQL8.0中分别进行不同方式的优化. 1. M ...