怎么理解虚拟 DOM？

Posted 2021-03-30 Java资料站

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了怎么理解虚拟 DOM？相关的知识，希望对你有一定的参考价值。

优质文章，第一时间送达

作者 | liudddd

来源 | urlify.cn/RNJJRz

一、前言

现在web前端的开发，对于MVVM框架的运用，那是信手拈来，用的飞起。一个xxx-cli工具，就能初始化一套模板，再填充业务代码，打包部署即可。但是会用，是一个方面，大家有没有底层深入思考一下，这些框架核心的技术突破点在哪里？解决了哪些问题？作为一个爱主动学习的童鞋，我们得花点小时间稍微去研究一下才行。今天，我们就简单谈谈虚拟dom，来揭开它的神秘面纱。

首先看一道经典的面试题：

“为什么我们需要虚拟 DOM？”。

这个问题比较常见的回答思路是：“DOM 操作是很慢的，而 JS 却可以很快，直接操作 DOM 可能会导致频繁的回流与重绘，JS 不存在这些问题。因此虚拟 DOM 比原生 DOM 更快”

但实际真实这样吗？

二、虚拟dom是什么？what。

虚拟 DOM（Virtual DOM）本质上是JS 和 DOM 之间的一个映射缓存，它在形态上表现为一个能够描述 DOM 结构及其属性信息的 JS 对象。它主要存储在内存中。主要来说：

1.虚拟dom是一个js对象
2.虚拟dom能够描述真实dom（存在一个对应关系）
3.存储在内存之中

以react为例，我们来看看虚拟dom到底长什么样子：

三、为什么会有虚拟dom？why。

首先，我们来看看远古时代（可能就是在7，8年前），我们怎么操作dom的。

1、什么都不用，原生js

来看看原生js下我们怎么查找元素的

// 根据类名查询元素，返回一个满足查询条件数组
document.getElementsByClassName()

// 根据标签名查询元素，返回一个满足查询条件数组
document.getElementsByTagName()

// 根据标签名查询元素，返回一个满足查询条件结果
document.getElementById()

.....

来看看我们怎么动态修改dom的

var displayName = 'hello,admin';
document.getElementById('#id').innerhtml = '<div>' + displayName+'</div>';

window.document.body.append('<div>hahahha</div>');

大家觉得这么操作dom会高效吗？

2、jquery时代

jQuery在操作dom时，对DOM API 封装为了相对简单和优雅的形式，同时一口气做掉了跨浏览器的兼容工作，并且提供了链式 API 调用、插件扩展等一系列能力用于进一步解放生产力。最终达到的效果正是我们喜闻乐见的“写得更少，做得更多”。

jQuery 使 DOM 操作变得简单、快速，并且始终确保其形式稳定、可用性稳定。虽然现在看来并不完美，但是当年能够一统江湖，确实在解放生产力，提高效率方面有极大的促进作用。

$('#id').show();
$('.className').hide().html('xxxxx');

3、模板引擎

我们以Handlebars这个模板为例

<!-- Include Handlebars from a CDN -->
<script src="https://cdn.jsdelivr.net/npm/handlebars@latest/dist/handlebars.js"></script>
<script>
  // compile the template
  var template = Handlebars.compile("Handlebars <b>{{doesWhat}}</b>");
  // execute the compiled template and print the output to the console
  console.log(template({ doesWhat: "rocks!" }));
 

</script>
{
  people: [
    "Yehuda Katz",
    "Alan Johnson",
    "Charles Jolley",
  ],
}
 <ul class="people_list">
  {{#each people}}
    <li>{{this}}</li>
  {{/each}}
</ul>

用模板引擎，来操作js，效率还是挺高的，爽歪歪啊。每次数据发生变化时，我们都不用关心到底是哪里的数据变了，也不用手动去点对点完成 DOM 的修改。只需要关注的仅仅是数据和数据变化本身，DOM 层面的改变模板引擎会帮我们做掉。

类似这种模板引擎，还有很多，我们可以对比一下其性能是怎样的：怎么理解虚拟 DOM？

模板引擎像极了一个只需要接收命令，就能够把活干得漂漂亮亮的“扫地机器人”！可惜的是，模板引擎出现的契机虽然是为了使用户界面与业务数据相分离，但实际的应用场景基本局限在实现高效的字符串拼接这一个点上，因此不能指望它去做太复杂的事情。尤其令人无法接受的是，它在性能上的表现并不尽如人意：由于不够“智能”，它更新 DOM 的方式是将已经渲染出 DOM 整体注销后再整体重渲染，并且不存在更新缓冲这一说。在 DOM 操作频繁的场景下，模板引擎可能会直接导致页面卡死。

也就是说，其实我们想要高效迅速的操作dom，同时还保证一个不错的性能。修改了局部dom就替换局部。而不是整体全部替换。但是如果一直都是操作真实的dom，一直都是存在DOM 整体注销后再整体重渲染的情况，那性能效率方面就大打折扣了。----react团队想了想，我们操作假的dom不就行了吗？