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 则没有什么优势。

posted @ 2022-02-07 20:34  kongshu  阅读(148)  评论(0编辑  收藏  举报