初步理解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树类似于家谱图，是由多层节点构成的结构。
<!DOCTYPE html>
<html>
<head>
<title>mylist</title>
</head>
<body>
<ul>
<li>list1</li>
<li>list2</li>
</ul>
</body>
</html>如上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 更快，为什么？---尤雨溪的回答 - 知乎
相关推荐
星星有所不知 2020-10-12
liaoxuewu 2020-07-08
爱读书的旅行者 2020-07-07
liaoxuewu 2020-05-19
luvhl 2020-06-08
书虫媛 2020-06-05
luvhl 2020-08-17
liaoxuewu 2020-06-26
北京老苏 2020-06-25
Lophole 2020-06-14
SIMONDOMAIN 2020-06-14
luvhl 2020-06-13
SIMONDOMAIN 2020-05-31
hyMiss 2020-05-19
书虫媛 2020-05-15
liaoxuewu 2020-05-11
liaoxuewu 2020-05-10
小仙儿 2020-05-09