前端抽象世界之DOM与Virtual DOM

时间 2019-11-07

标签前端抽象世界 dom virtual 栏目 HTML 繁體版

原文原文链接

前言

目前主流的前端框架React和Vue中都用到了Virtual DOM这个技术，而Virtual DOM究竟是什么，可能不少人和我同样，概念上仍是模糊。

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

如下的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的方法react

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树表示：
web

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 更快，为何？---尤雨溪的回答 - 知乎

1. 探索Virtual DOM的前世今生
2. 探索Virtual DOM的前世此生
3. 前端之BOM与DOM
4. Virtual DOM
5. 前端——BOM与DOM
6. python-day54--前端之js-DOM对象
7. 实现Virtual Dom
8. 浅谈Virtual DOM
9. 【转】Virtual DOM
10. 浅谈 Virtual DOM
更多相关文章...
• XML DOM - CDATASection 对象 - XML DOM 教程
• XML DOM - Comment 对象 - XML DOM 教程
• 使用阿里云OSS+CDN部署前端页面与加速静态资源
• Docker容器实战(一) - 封神Server端技术