View Engine vs ivy

Angular 编译器 ViewEngine vs ivy

ViewEngine 也称为 renderer2,从 release4 发布。ivy 新一代的编译器，Angular9 作为默认编译器，

为什么 Angular 要推出 ivy?

提高性能，减少打包的 bundle 体积。

这两种编译器的差别在哪里，ivy 是如何提高性能的。

• ViewEngine 编译过程包括：Template HTML, Template Data, Angular Interpreter,Dom.
  而 ivy 只包含三步，省略了 Angular Interpreter
• ivy 两个显著的特点,
  • TreeShakable： 每个组件内部引用 Angular runtime 的 API, 而不是将整个 Angular runtime 打包到工程里面。也就是在静态编译阶段就完成了摇树的工作。
  • Incremental DOM: 不需要构建 Virtual DOM,减少对内存的消耗，尤其针对移动设备。

Incremental DOM vs Virtual DOM

Virtual DOM 需要新旧两颗 Virtual DOM, 通过 diff 算法找到差异，然后作用于 DOM。这种方式的好处是： 1. 方便调试测试。2. 每次 diff 完都会得到一个结果。带来的问题是，当 SPA 的组件数量比较大时，比较耗内存。特别对于移动设备。
Incremental DOM 则是每次 run ChangeDetect 的时候，遍历 DOM 树的时候，直接修改 DOM。因为对于组件而言，哪些 DOM 需要修改，在编译的时候就已经知道了。所以，非常节省内存。只有添加/删除 DOM 的时候才会额外分配内存。
Google 的分析，大部分的 SPA 应用，组件都是以 update 为主。所以，它主推 Incremental DOM。当然对于那些有大量 add/remove 的 SPA,Incremental DOM 相对于 Virtual DOM 则没有什么优势。

• 链接 1
• 链接 2