提起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. v-model指令的学习（双向绑定）

    v-bind 只能实现数据的单项绑定,从data到view,无法实现双向绑定 v-model可以实现表单元素和model中数据的双向绑定 注意:model只能运用到表单元素中 如:input sele ...

  2. JavaWeb网上图书商城完整项目--12.项目所需jquery函数介绍之ajax

    jquery中使用ajax发送异步请求 下面的一个案例在input输入框失去焦点的时候发送一个异步的请求: 我们来看程序的案例: 这里要强调的是返回值最好选择是json,json对应的就是对象,Jav ...

  3. Linux 查看日志的时候常用命令总结

    Linux ~ 查看日志的常用命令总结 1.tail -n <行数>,显示文件的尾部n行内容. -f 循环读取,常用于查阅正在改变的日志文件. ① tail   -f  test.log  ...

  4. Nacos学习笔记

    Nacos简介 Nacos 提供了一组简单易用的特性集,帮助您快速实现动态服务发现.服务配置.服务元数据及流量管理.Nacos 帮助更敏捷和容易地构建.交付和管理微服务平台. Nacos 是构建以“服 ...

  5. 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 ...

  6. 如何使用ABP进行软件开发之基础概览

    ABP框架简述 1)简介 在.NET众多的技术框架中,ABP框架(本系列中指aspnetboilerplate项目)以其独特的魅力吸引了一群优秀开发者广泛的使用. 在该框架的赋能之下,开发者可根据需求 ...

  7. Java设计模式十九——责任链模式

    责任链模式 老李的苦恼 每个人在出生的时候,都早已在暗中被标好了三六九等. 老李是一名建筑工地的木匠,和大多数生活在社会最底层的农民工一样,一辈子老实本分,胆小怕事.在他们的心中,谁当老爷都没有区别, ...

  8. 堆、栈、数据区、bss、代码段

    一个程序的运行是需要内存的,那么我们平常写的程序的内存都是怎么分配的呢 (1)首先我们要知道,内存是真实存在的,内存是一个物理器件.它时由操作系统管理的,我们平常只要使用它就行了,为了方便管理.操作系 ...

  9. C# 特性篇 Attributes

    特性[Required] (必修的) /// <summary> /// 操作人EmpID /// </summary> [Required] public string Op ...

  10. Spring 获取单例流程(一)

    读完这篇文章你将会收获到 在 getBean 方法中, Spring 处理别名以及 factoryBean 的 name Spring 如何从多级缓存中根据 beanName 获取 bean Spri ...