Vue.js 虚拟DOM原理（DOM是如何更新的）

作者:神秘网友发布时间:2020-09-05 17:14:10

Vue.js 虚拟DOM原理（DOM是如何更新的）

一、什么是DOM？DOM的作用？

文档对象模型（Document Object model，简称DOM）是针对HTML和XML文档的一个API（应用程序编程接口）。

也就是说：DOM是一个接口，一个API,我们可以通过DOM这个接口来对文档进行修改。

DOM会把文档表示为一棵树，这里以（HTML）为例：

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My title</title>
</head>
<body>
    <a href="https://www.baidu.com/">My link</a>
    <h1>My header</h1>
</body>
</html>

对应的DOM Tree:

Vue.js 虚拟DOM原理（DOM是如何更新的）

在DOM中，文档是由节点构成的集合。（节点类型：元素节点(element)、文本节点(text)、属性节点(attribute)）

元素节点：就是HTML中的标签，如：<html>、<head>、<body>、<title>、<a>、<h1>等

文本节点：如上图中的"My title"、"My link"等

属性节点：如上图中的"href"，以及我们在html中经常使用的"class"、"title"等

DOM的出现就是为了能够操作HTML中的元素：举个栗子

<p id="writing" title="文字">这是一段文字</p>

var wriText = document.getElementById("writing");
wriText.setAttribute("title","this is writing");

getElementById() 就是DOM的一个方法；

setAttribute() 方法添加指定的属性，并为其赋指定的值（若属性已存在，就是更改/设置值）。

DOM修改前：

Vue.js 虚拟DOM原理（DOM是如何更新的）

DOM修改后：

Vue.js 虚拟DOM原理（DOM是如何更新的）

二、浏览器解析DOM的运行机制？

https://www.cnblogs.com/yaya-003/p/12855846.html

JS或JQ操作DOM时，浏览器会从构建DOM树开始从头到尾执行一遍流程。在一次操作中，我需要更新10个DOM节点，浏览器收到第一个DOM请求后并不知道还有9次更新操作，因此会马上执行流程，最终执行10次。例如，第一次计算完，紧接着下一个DOM更新请求，这个节点的坐标值就变了，前一次计算为无用功。计算DOM节点坐标值等都是白白浪费的性能，频繁操作还是会出现页面卡顿，影响用户体验。

Vue.js 虚拟DOM原理（DOM是如何更新的）