前端抽象世界之DOM与Virtual DOM

2019年9月15日 151次阅读 来源: 江樱

前言

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

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

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

《前端抽象世界之DOM与Virtual 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与Virtual DOM》

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

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

3. 什么是Virtual DOM？

首先，虚拟DOM不是由React发明的，但是React使用它并免费提供它。

虚拟DOM是HTML DOM的抽象。 它是轻量级的，与特定于浏览器的实现细节分离。 由于DOM本身已经是抽象，因此虚拟DOM实际上是抽象的抽象。

《前端抽象世界之DOM与Virtual DOM》

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

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

4. Virtual DOM的优点

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

5. 参考链接

    原文作者：江樱
    原文地址: https://segmentfault.com/a/1190000017038987
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞