前端抽象世界之DOM与Virtual DOM

前言

目前主流的前端框架React和Vue中都用到了Virtual DOM这个技术，而Virtual DOM到底是什么，可能很多人和我一样，概念上还是模糊。

本文主要介绍DOM和Virtual DOM的基本概念及个人理解。

---

以下的DOM均指HTML DOM.另外前端菜鸟一枚，写文章主要是为了想加深理解知识，如有不对的地方恳请大佬们指点，轻喷.

1. 什么是DOM？

• DOM（Document Object Model）文档对象模型是对结构化文档的抽象，对于web前端开发者主要是对HTML文档。通俗的来说，DOM就是把我们写的HTML文档抽象成API(应用程序接口)，提供给JS去操纵HTML。比如在JS里添加、删除、更新HTML里的元素都是通过DOM提供的API操作的。

document.getElementById('text').innerHTML='newtext' //通过DOM修改HTML文本

---

getElementById就是HTML DOM API的方法

2. DOM树介绍

• 浏览器在加载HTML时候，DOM就把HTML文档抽象成DOM树。DOM树类似于家谱图，是由多层节点构成的结构。

    


    

        
list1
        
list2
    

如上html可以用下面的DOM树表示：

• DOM树是由节点构成的集合，主要有三种类型节点：元素节点、文本节点、属性节点。把HTML抽象成这种树模型，实际上DOM就是提供操控这些节点的API，让我们可以用诸如js这种编程语言去修改DOM树，从而DOM树的变化就会间接地改变了HTML的内容。

例如removeChild()、appendChild()这样的方法去修改DOM树

---

3. 什么是Virtual DOM？

首先，虚拟DOM不是由React发明的，但是React使用它并免费提供它。
虚拟DOM是HTML DOM的抽象。 它是轻量级的，与特定于浏览器的实现细节分离。 由于DOM本身已经是抽象，因此虚拟DOM实际上是抽象的抽象。

---

从另一方面来说，也许可以将虚拟DOM视为React的HTML DOM的本地和简化版。 它允许React在这个抽象的世界中进行计算，并跳过“真正的”那些缓慢的DOM操作。

• React、Vue这样的框架通过模拟真实DOM构造出一个轻量级的虚拟DOM,来简化重量级真实的DOM操作，让开发者用数据逻辑通过虚拟DOM去操控真实DOM，从而让代码更容易维护。

---

4. Virtual DOM的优点

• 在复杂的网站项目中，可以简化繁琐的传统DOM操作。
• 让开发者专注业务逻辑层代码的实现，底层的DOM操作让框架去处理。

---

5. 参考链接

• The difference between Virtual DOM and DOM--by Bartosz Krajka
• 网上都说操作真实 DOM 慢，但测试结果却比 React 更快，为什么？---尤雨溪的回答 - 知乎