初步理解DOM与Virtual DOM

1

前言

目前主流的前端框架React和Vue中都用到了Virtual DOM这个技术,而Virtual DOM到底是什么,自己也是花了很多时间去查阅相关文章。

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


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

虚拟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树

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

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


3. 什么是Virtual DOM?

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

虚拟DOM


从另一方面来说,也许可以将虚拟DOM视为React的HTML DOM的本地和简化版。 它允许React在这个抽象的世界中进行计算,并跳过“真正的”那些缓慢的DOM操作。
  • React、Vue这样的框架通过模拟真实DOM构造出一个轻量级的虚拟DOM,来简化重量级真实的DOM操作,让开发者用数据逻辑通过虚拟DOM去操控真实DOM,从而让代码更容易维护。

4. Virtual DOM的优点

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

5. 参考链接

你可能感兴趣的

载入中...