虚拟DOM和真实DOM的区别

·  阅读 3152

DOM

DOM意思是文档对象模型(Dcoument Object Model),它是一个结构化文本的抽象

操作DOM

所以,只要我们想要动态修改网页的内容的时候,我们就修改DOM。

var item = document.getElementById("myLI");
item.parentNode.removeChild(item);
复制代码

而getElementById,parentNode和emoveChild则是HTML DOM API中的方法。

Shadow DOM

Shadow DOM是浏览器提供的一个可以允许将隐藏的DOM树添加到常规的DOM树中——它以shadow root为起始根节点,在这个根节点的下方,可以是任意元素,和普通的DOM元素一样。

虚拟dom Virtual DOM

Virtual DOM 只是js模拟的DOM结构。 虚拟DOM是HTML DOM的抽象 。

虚拟DOM是由js实现的避免DOM树频繁更新,通过js的对象模拟DOM中的节点,然后通过特定的render方法将它渲染成真实的节点,数据更新时,渲染得到新的 Virtual DOM,与上一次得到的 Virtual DOM 进行 diff,得到所有需要在 DOM 上进行的变更,然后在 patch 过程中应用到 DOM 上实现UI的同步更新。

虚拟DOM与真实DOM的区别(注意:需不需要虚拟DOM,其实与框架的DOM操作机制有关):

1、虚拟DOM不会进行排版与重绘操作

2、虚拟DOM进行频繁修改,然后一次性比较并修改真实DOM中需要改的部分(注意!),最后并在真实DOM中进行排版与重绘,减少过多DOM节点排版与重绘损耗

3、真实DOM频繁排版与重绘的效率是相当低的

4、虚拟DOM有效降低大面积(真实DOM节点)的重绘与排版,因为最终与真实DOM比较差异,可以只渲染局部(同2)

使用虚拟DOM的损耗计算:

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

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

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

总结

一切为了减弱频繁的大面积重绘引发的性能问题,不同框架不一定需要虚拟DOM,关键看框架是否频繁会引发大面积的DOM操作。 虚拟DOM是由js实现的避免DOM树频繁更新,通过js的对象模拟DOM中的节点,然后通过特定的render方法将它渲染成真实的节点,数据更新时,渲染得到新的 Virtual DOM,与上一次得到的 Virtual DOM 进行 diff,得到所有需要在 DOM 上进行的变更,然后在 patch 过程中应用到 DOM 上实现UI的同步更新

分类:
前端
标签:
分类:
前端
标签: