Angular2的AoT (Ahead of Time)编译是如何工作的?



Angular 2引入了一个名为提前(AoT)的新特性。但是读了一些之后,我仍然不能真正理解它。它是如何工作的?它将如何带来更好的性能?它与JIT有什么不同?

谢谢。

Angular在视图和模块、指令、管道上的装饰器中使用声明式绑定,这些都需要JS在浏览器中解释才能完成它们的目的。

脱机模板编译器用生成的静态代码替换声明式绑定和装饰符。

这使得Angular2组件的实例化和初始化更快,因为JS要做的工作更少。在应用程序提供给客户端之前,组件的"编译"已经完成。

如果你不使用运行时需要它的其他特性,platform-browser-dynamic可以省略,根本不需要加载到浏览器中。

关于生成的代码是否会超过浏览器动态平台的大小有一些讨论,但据我所知,Angular2团队做了大量的实验和基准测试,以确保最佳的性能。

选自AoT食谱

Angular组件由标准html和Angular混合组成语法(如ngIf, ngFor)。

ngIfngFor这样的表达式是特定于Angular的,所以浏览器没有办法直接执行它们。

在浏览器能够渲染应用之前,Angular特定的代码和模板必须被转换成常规的可执行文件JavaScript。我们把这个步骤称为编译。

默认情况下,编译由浏览器在运行时执行即所谓的即时编译(JIT)。它的名字叫"刚进来"Time",因为编译是在应用程序加载时动态进行的。

JIT编译的缺点是运行时性能损失。由于编译步骤的缘故,视图呈现所需的时间更长。它还强制我们在下载应用的同时下载Angular编译器因为我们将在运行时需要编译器。

最新更新