Angular 中增量 DOM 和虚拟 DOM 的区别

Posted

技术标签:

【中文标题】Angular 中增量 DOM 和虚拟 DOM 的区别【英文标题】:Difference between incremental DOM and virtual DOM in Angular 【发布时间】:2020-04-08 16:59:22 【问题描述】:

我有两个关于角度的问题。我已经尝试阅读一些文章,但我无法理解, 什么是增量 DOM? 增量 DOM 和虚拟 DOM 有什么区别?

【问题讨论】:

【参考方案1】:

增量 DOM 是一个用于构建 DOM 树并在数据更改时就地更新它们的库。它与已建立的虚拟 DOM 方法的不同之处在于不创建中间树(现有树在原地发生变异)。这种方法显着减少了对 DOM 树的增量更新的内存分配和 GC 抖动,因此在某些情况下显着提高了性能。

https://github.com/google/incremental-dom

虚拟 DOM 将新的整个虚拟 DOM 与之前的虚拟 DOM 进行比较(差异)以进行更改,然后将这些更改应用到实际 DOM。 - 这种方法会创建一个新的虚拟 DOM 来确定更改(内存很重)。

增量 DOM 有一个虚拟 DOM,沿着树遍历查找更改,然后对虚拟 DOM 进行变异,然后将这些更改应用到实际 DOM -(减少内存大小和垃圾收集)。

Virtual DOM - 占用大量内存,因为它需要留出空间来应对“可能”发生在虚拟 DOM 上的更改。

增量 DOM - 不需要这么大的占用空间,因为内存只分配给更改。

测试表明,即使没有虚拟 DOM,增量 DOM 也足够快。

【讨论】:

以上是关于Angular 中增量 DOM 和虚拟 DOM 的区别的主要内容,如果未能解决你的问题,请参考以下文章

Web技术858- 增量 DOM 与虚拟 DOM 的对比使用

第2163期增量 DOM 与虚拟 DOM 的对比使用

Blazor 使用虚拟 DOM 还是增量 DOM?

Angular 是不是具有与 React 的虚拟 DOM 相当的功能?

我由Angular转向React,为啥

虚拟DOM简介