提起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. jenkins构建报错 Error fetching remote repo 'origin'

    ERROR: Error fetching remote repo 'origin' Finished: FAILURE // 原因如下 原因一:可能是配置的git分支的权限问题,检查一下配置里面的源 ...

  2. 深入理解JVM（③）ZGC收集器

    前言 ZGC是一款在JDK11中新加入的具有实验性质的低延迟垃圾收集器,目前仅支持Linux/x86-64.ZGC收集器是一款基于Region内存布局的,(暂时)不设分代的,使用了读屏障.染色指针和内 ...

  3. 恕我直言你可能真的不会java第5篇：Stream的状态与并行操作

    一.回顾Stream管道流操作 通过前面章节的学习,我们应该明白了Stream管道流的基本操作.我们来回顾一下: 源操作:可以将数组.集合类.行文本文件转换成管道流Stream进行数据处理 中间操作: ...

  4. Java深拷贝和浅拷贝的区别

    浅拷贝 被复制的对象的所有的变量都与原对象有相同的值,而所有的引用对象仍然指向原来的对象.换言之,浅拷贝 不复制引用对象. 1 class Experience { 2 private String ...

  5. Halcon斑点分析BlobAnalysis解析

    斑点分析的算法非常简单:在图像中,相关对象的像素(也称为前景)通过其灰度值来识别.例如,图中示例显示了液体中的组织颗粒.这些粒子是明亮的,液体(背景)是暗的.通过选择明亮的像素(阈值),可以很容易检测 ...

  6. SSTI-服务端模板注入漏洞

      原理: 服务端模板注入是由于服务端接收了用户的输入,将其作为 Web 应用模板内容的一部分,在进行目标编译渲染的过程中,执行了用户插入的恶意内容,因而导致了敏感信息泄露.代码执行.GetShell ...

  7. 一种基于LQR使输出更加稳定的算法（超级实用）

    已知: 令: 则: 以上三式成立 具体步骤: 状态量最后一行加入“上一时刻的控制量”: A,B根据上述方法变形: Q,R增加维度(控制量一般都为一个,此时R维度不变): 最关键的是——输出量已经变为“ ...

  8. 浅谈tkinter模块

    目录 tkinter模块 tkinter模块简单使用 主窗口 Button按钮 Label标签 Text编辑框 Entry输入框 ListBox列表 RadioButton单选框 CheckButto ...

  9. 从发布-订阅模式谈谈 Flask 的 Signals

    发布-订阅模式 发布-订阅模式,顾名思义,就像大家订报纸一样,出版社发布不同类型的报纸杂志不同的读者根据不同的需求预定符合自己口味的的报纸杂志,付费之后由邮局安排人员统一派送. 上面一段话,提到了发布 ...

  10. java语言进阶（二）_Collection_泛型

    主要内容 Collection集合 迭代器 增强for 泛型 第一章 Collection集合 1.1 集合概述 在前面基础班我们已经学习过并使用过集合ArrayList ,那么集合到底是什么呢? 集 ...