【面试题】虚拟DOM和真实DOM的区别

bug收集：专门解决与收集bug的网站

网址：www.bugshouji.com

下面主要从查和增删改两个角度来分析。

一、查

真实DOM操作：

document.get...查询的是整个节点树。 ParentNode.querySelector()和ParentNode.querySelectorAll()是有范围地查询ParentNode下的节点，过程中是需要根据传入的参数来比对节点上的属性。

虚拟DOM操作：

this.$refs.refName查询的是当前组件实例上的属性$refs对象中key为refName的属性。 观察一下当前组件实例：console.log(this)

二、增删改

普通的真实dom作增删改时会引起浏览器的重排和重绘。

old：在虚拟dom出现之前, 比较好的操作是在文档片段 createDocumentFragment 或者拷贝节点 cloneNode中一次性把需要的增删改都做好，再把这个片段或节点放到页面中。

// bad
let ul = document.querySelector('#mylist');
ul.append(li)
ul.append(li)
ul.append(li)


// good，两次重排重绘
let ul = document.querySelector('#mylist');
ul.style.display = 'none'; // 减少重绘
ul.append(li)
ul.append(li)
ul.append(li)


// better，一次重排重绘
let fragment = document.createDocumentFragment();
fragment .append(li)
fragment .append(li)
fragment .append(li)
ul.appendChild(fragment);

new：现在几大主流框架都实现了虚拟dom，并且实现了新旧节点比较，这就解决了以前多次重排重绘的问题，且减少了代码量。

性能损耗计算：

真实DOM操作：真实DOM增删改 + （可能较多节点）重排与重绘

直接使用真实DOM的损耗计算：

总损耗 = 真实DOM完全增删改 + （可能较多的节点）排版与重绘

虚拟DOM操作：虚拟DOM增删改 + 真实DOM差异增删改（这与Diff算法效率有关） + （较少节点）重排与重绘

使用虚拟DOM的损耗计算：

总损耗 = 虚拟DOM增删改 + （与Diff算法效率有关）真实DOM差异增删改 + （较少的节点）排版与重绘

为什么在vue中会用到虚拟dom?

有两点好处:

1. 虚拟dom比真实dom体积小,操作时相对来说消耗性能少,如果在页面中删除一个dom,会引起重绘,影响后边元素的布局

1) 虚拟Dom不会进行回流和重绘操作

2) 虚拟dom进行频繁的修改, 然后一次性比较并修改真实DOM中需要改的部分,最后并在真实DOM中进行回流和重绘, 减少过多DOM节点的回流和重绘

3) 真实Dom频繁的回流和重绘效率非常低

2. 虚拟dom可能跨端(在服务器端也可以使用vue技术), 跨平台, 如果直接操作真实的dom, 则与浏览器强制绑定在一起

苟有恒 , 何必三更眠五更起