Glimmer VM 与虚拟 dom 有何不同?

How is Glimmer VM different from a virtual dom?

所以我最近开始研究 ember js,尤其是它的 glimmer 渲染引擎,并试图了解它是如何工作的。

所以我的理解是 Glimmer VM 是一个模拟实际 DOM 并执行功能以对其进行更新的虚拟机。虽然 vdom 维护 DOM 状态的内部表示,但 glimmer VM 没有这样的状态,相反,它执行两组线性指令 - 一组进行模板的初始渲染,第二组进行更新要素。这种方法的主要好处是,这样我们就可以完全绕过 JS 的 parse/compile 瓶颈,只需将二进制文件发送到客户端,然后由 glimmer vm 执行。我做对了吗?

如果只是将模板的语言从 JS 或文本更改为二进制字节码,Glimmer 不会绕过 download/parse/compile,因此下载它要小得多,下载速度也更快 parse/compile由 Glimmer VM 而不是 JS VM 完成,语法简单,解析和执行速度非常快,而且在未来 VM 可以移动到 WebAssembly 以使其更快。

Glimmer VM 只是执行字节码的 VM,但它是处理状态的 VM,因此当它想要呈现一个组件时,它采用该组件模板并在 VM 中执行模板字节码。呈现模板程序并生成更新程序字节码,并将其与组件关联存储,因此当组件需要重新呈现时,仅更新程序在 VM 中执行。 在虚拟 Dom 环境更新调用函数修改虚拟 dom 然后,立即或当绘制系统滴答(批量更新)时,它会将虚拟 dom 与之前的进行比较一个并更新需要更新的节点。

虚拟 DOM 在反应中很有意义,因为它不使用模板,组件 JSX 被转换为使用反应 api 与 [=30= 交互的 JS 代码](检查 this)。

Angular Ivy(Angular 的新视图引擎)似乎与 Glimmer 相似,因为它确实创建了某种 Ivy 代码而不是完整的 JS,但它不创建更新编程为 Glimmer。 (不太确定这是我从周围发现的常春藤文章中得到的)。

Glimmer 和 Angular 做一些类似于 Virtual DOM 的事情,但在组件级别,它们控制更改并且只重新渲染已更改其数据的组件。主要区别在于 Glimmer 已经知道绘制的内容并执行先前生成的更新模板字节码,而不是拆解和完整渲染。