millionJs 的原理与块虚拟 DOM MillionJS 是一个用来优化 React 性能的框架,它使用了一种块虚拟 DOM方案,在某些情况下,会比常规的虚拟 DOM 性能更好
虚拟 DOM 是为了解决频繁操作真实 DOM 所引起的性能问题而创建的。它是真实 DOM 的轻量级、内存中的表示,可以作为更新实际网页的参考。
使用像 Svelte 这样的新框架,由于性能开销,甚至不使用虚拟 DOM。相反,Svelte 使用一种称为“脏检查”的技术来确定发生了什么变化。像 SolidJS 这样的细粒度响应性框架更进一步,精确定位到底发生了什么变化,并仅更新 DOM 的该部分。
块虚拟 DOM 使用了不同的差异比较方法,分为两个部分:
- 第一步: 静态分析,对虚拟 DOM 进行分析,将树的动态部分提取到“编辑映射”中,或者将虚拟 DOM 的动态部分映射到状态的列表中。
- 第二步:脏检查,通过比较状态而不是虚拟 DOM 树来确定发生了什么变化,如果状态发生了变化,通过编辑映射直接更新 DOM
- 脏检查示例所需的计算量比差异检查步骤少得多。这是因为脏检查步骤只关注状态,而不关注虚拟 DOM,因为每个虚拟节点可能需要多层递归来确定是否发生了变化,而状态只需要进行浅层相等性检查。
块虚拟 DOM 的适用场景?
块虚拟 DOM 并不是万能的优化方案,使用的时候需要注意块虚拟 DOM 在静态内容较多、动态内容较少的情况下最为适用。块虚拟 DOM 的最大优势在于它不需要考虑虚拟 DOM 的静态部分,因此如果能够跳过大量的静态内容,它可以非常快速。但是如果组件的动态内容较多,那么使用块虚拟 DOM 可能看不出性能差异,而且还可能比常规虚拟 DOM 性能更差