前言

“Virtual Dom 的劣势是什么？” 这是一个常见的面试问题，然而答案真的仅仅是简略粗犷的一句“间接操作dom和频繁操作dom的性能很差”就完事了吗？如果是这样的话，无妨持续深刻地问几个问题：

  • 间接操作Dom的性能为什么差？
  • Virtual Dom到底是指什么？它是如何实现的？

  • 为什么Virtual Dom可能防止间接操作dom引起的问题？

如果发现自己对这些问题不(yi)太(lian)确(meng)定(bi)，那么无妨往下读一读。

注释

Virtual Dom，也就是虚构的Dom, 无论是在React还是Vue都有用到。它自身并不是任何技术栈所独有的设计，而是一种设计思路，或者说设计模式。

DOM

在介绍虚构dom之前，首先来看一下与之绝对应的实在Dom:

DOM(Document Object Model)的含意有两层:

  1. 基于对象来示意的文档模型(the object-based representation);
  2. 操作这些对象的API;

形如以下的html代码，

<!DOCTYPE html><html lang="en"><head>    <title>Document</title></head><body>    <h1>Learning Virtual Dom</h1>    <ul class="list">        <li class="list-item">List item</li>    </ul></body></html>

依据DOM会被示意为如下一棵树: 树的每个分支的起点都是一个节点(node)，每个节点都蕴含着对象，蕴含一些节点属性。 这就是基于对象来示意文档。

其次，DOM容许咱们通过一些的api对文档进行操作，例如：

const listItemOne = document.getElementsByClassName("list-item")[0]; // 获取节点listItemOne.textContent = "List item one"; // 批改对应的文本内容const listItemTwo = document.createElement("li"); // 创立一个元素对象listItemTwo.classList.add("list-item"); // 增加子元素listItemTwo.textContent = "List item two";list.appendChild(listItemTwo);

简而言之。DOM的作用就是把web页面和脚本(通常是指Javascript)关联起来。

DOM操作带来的性能问题

那么原生的DOM操作存在哪些问题呢？在此还须要理解到浏览器工作的一些流程，通常来说，一个页面的生成须要经验以下步骤：

  1. 解析HTML，产出对应的DOM树；
  2. 解析CSS, 生成对应的CSS树；
  3. 将1和2的后果联合生成一棵render树；
  4. 生成页面的布局排列(flow)
  5. 将布局绘制到显示设施上(paint)

其中第4步和第5步其实就是常说的页面渲染，而渲染的过程除了在页面首次加载时产生，在后续交互过程中，DOM操作也会引起重新排列和从新绘制，渲染是须要较高性能代价的，尤其是重排的过程。

所以常见的优化思路都会提到一点: 为了尽可能减少重绘和重排次数，尽量把扭转dom的操作集中在一起，因为写入操作会触发重绘或者重排，并且浏览器的渲染队列机制是：当某个操作触发重排或重绘时，先把该操作放进渲染队列，等到队列中的操作到了肯定的数量或者到了肯定的工夫距离时，浏览器就会批量执行。所以集中进行dom操作能够缩小重绘重排次数。

另一方面，对于DOM操作的影响范畴问题：因为浏览器是基于流式布局的，所以一旦某个元素重排，它的外部节点会受到影响，而内部节点（兄弟节点和父级节点等等）是有可能不受影响的，这种部分重排引起的影响比拟小，所以也须要尽可能地每次只改变最须要的节点元素。

Virtual DOM概览

Virtual DOM 就是为了解决下面这个问题而生的，它为咱们操作dom提供了一种新的形式。

virtual DOM 的实质就是实在dom的一个正本，无需应用DOM API,就能够频繁地操作和更新此正本。 对虚构DOM进行所有更新后，咱们能够查看须要对原始DOM进行哪些特定更改，并以针对性和优化的形式进行更改.

这个思路能够参照行军打仗时的沙盘，沙盘的一个作用就是模仿军队的排列散布。构想一下不借助沙盘时的场景：

将军1： 我感觉三队的士兵应该往东边挪动200米，侧翼潜伏，而后传令官跑去告诉三队的士兵，吭哧吭哧跑了200米；

将军2: 我感觉四队的士兵应该往西边挪动200米，和三队造成合围之势，而后传令官持续告诉，四队的士兵也持续奔跑。

将军3：我感觉潜伏的间隔太远了，近一点比拟好， 两队各向两头挪动100米吧。

而后可怜的士兵们持续来回跑....

在这个过程里每次行军挪动都要带来大量的开销，每次都间接用实际行动执行还在切磋中的指令，老本是很高的。实际上在将军们探讨磋商布阵排列时，能够

  • 先在沙盘上进行模仿排列，
  • 等到得出现实方阵之后，最初再告诉到手下的士兵进行对应的调整，

这也就是 Virtual DOM 要做的事。

Virtual DOM 的简化实现

那么 Virtual DOM大略是什么样呢？ 还是依照后面的html文件，对应的virtual dom大略长这样（不代表理论技术栈的实现，只是体现外围思路）：

const vdom = {    tagName: "html",// 根节点    children: [        { tagName: "head" },        {            tagName: "body",            children: [                {                    tagName: "ul",                    attributes: { "class": "list" },                    children: [                        {                            tagName: "li",                            attributes: { "class": "list-item" },                            textContent: "List item"                        } // end li                    ]                } // end ul            ]        } // end body    ]} // end html

咱们用一棵js的嵌套对象树示意出了dom树的层级关系以及一些外围属性，children示意子节点。
在前文咱们用原生dom给ul做了一些更新，当初应用Virtual Dom来实现这个过程：

  1. 针对以后的实在DOM复制一份virtual DOM，以及冀望改变后的virtual DOM;

    const originalDom = {tagName: "html",// 根节点children: [//省略两头节点  {     tagName: "ul",     attributes: { "class": "list" },     children: [         {             tagName: "li",             attributes: { "class": "list-item" },             textContent: "List item"         }     ]  }],}const newDom = {tagName: "html",// 根节点children: [  //省略两头节点   {     tagName: "ul",     attributes: { "class": "list" },     children: [         {             tagName: "li",             attributes: { "class": "list-item" },             textContent: "List item one" //改变1，第一个子节点的文本          },         {// 改变2，新增了第二个节点             tagName: "li",             attributes: { "class": "list-item" },             textContent: "List item two"         }     ]  } ], };

  2. 比对差别

    const diffRes = [ {   newNode:{/*对应下面ul的子节点1*/}，   oldNode:{/*对应下面originalUl的子节点1*/}， }, {   newNode:{/*对应下面ul的子节点2*/}，//这是新增节点，所以没有oldNode },]

  3. 收集差别后果之后，发现只有更新list节点，，伪代码大抵如下：

    const domElement = document.getElementsByClassName("list")[0];diffRes.forEach((diff) => { const newElement = document.createElement(diff.newNode.tagName); /* Add attributes ... */  if (diff.oldNode) {     // 如果存在oldNode则替换     domElement.replaceChild(diff.newNode, diff.index); } else {     // 不存在则间接新增     domElement.appendChild(diff.newNode); }})

    当然，理论框架诸如vue和react里的diff过程不只是这么简略，它们做了更多的优化，例如：

对于有多个项的ul，往其中append一个新节点，可能要引起整个ul所有节点的改变，这个改变老本太高，在diff过程如果遇到了，可能会换一种思路来实现，间接用js生成一个新的ul对象，而后替换原来的ul。这些在后续介绍各个技术栈的文章（可能）会具体介绍。

能够看到，Virtual DOM的外围思路：先让预期的变动操作在虚构dom节点，最初对立利用到实在DOM中去，这个操作肯定水平上缩小了重绘和重排的几率，因为它做到了：

  1. 将理论dom更改放在diff过程之后， diff的过程有可能通过计算，缩小了很多不必要的扭转（如同前文将军3的命令一出，士兵的理论挪动其实就变少了）；

  2. 对于最初必要的dom操作，也集中在一起解决，贴合浏览器渲染机制，缩小重排次数；

    小结：答复结尾的问题

当初咱们回到开篇的问题--“Virtual Dom 的劣势是什么？”

在答复这道题之前，咱们还须要晓得：

  1. 首先，浏览器的DOM 引擎、JS 引擎 互相独立，然而共用主线程；
  2. JS 代码调用 DOM API 必须 挂起 JS 引擎，激活 DOM 引擎，DOM 重绘重排后，再激活 JS 引擎并继续执行；
  3. 若有频繁的 DOM API 调用，浏览器厂商不做“批量解决”优化，所以切换开销和重绘重排的开销会很大；

而Virtual Dom 最要害的中央就是把dom须要做的更改，先放在js引擎里进行运算，等收集到肯定期间的所有dom变更时，这样做的益处是：

  1. 缩小了dom引擎和js引擎的频繁切换带来的开销问题；
  2. 可能在计算比拟后，最终只须要改变部分，能够较少很多不必要的重绘重排；
  3. 把必要的Dom操作尽量集中在一起做，缩小重排次数

总结

本文从一个常见面试问题登程，介绍了Dom 和Virtual Dom的概念，以及间接操作Dom可能存在的问题，通过比照来阐明Virtual Dom的劣势。对于具体技术栈中的Virtual Dom diff过程和优化解决的形式，没有做较多阐明，更专一于论述Virtual Dom自身的概念。

欢送大家关注专栏，也心愿大家对于青睐的文章，可能不吝点赞和珍藏，对于行文格调和内容有任何意见的，都欢送私信交换。