javascript - Angular2 提前 (AoT) 编译如何工作?

标签 javascript performance angular

Angular 2 带有称为提前 (AoT) 的新功能。但是看了一番,还是不能真正理解。它是如何工作的?它将如何带来更好的性能?它与 JIT 有何不同?

谢谢。

最佳答案

Angular 在模块、指令和管道的 View 和装饰器中使用声明式绑定(bind),这些需要由浏览器中的 JS 解释以执行它们的预期目的。

离线模板编译器用生成的静态代码替换声明式绑定(bind)和装饰器。

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

如果您不使用其他在运行时需要它的功能,则可以省略 platform-b​​rowser-dynamic 并且根本不需要加载到浏览器中。

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

来自 AoT 食谱

Angular components consist of a mix of standard html and Angular syntax (e.g. ngIf, ngFor).

Expresions like ngIf and ngFor are specific to Angular, so there is no way for the browser to execute them directly.

Before the browser can render the application, Angular specific code and templates have to be converted to regular executable JavaScript. We refer to this step as compilation.

By default compilation is executed by the browser at runtime, during what is called Just in Time compilation (JIT). It's called "Just in Time" since compilation happens on the fly as the application loads.

The downside to JIT compilation is a runtime performance penalty. Views take longer to render because of the compilation step. It also forces us to download the Angular compiler along with our application code since we will need the compiler at runtime.

关于javascript - Angular2 提前 (AoT) 编译如何工作?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39464319/

相关文章:

angular - 如何在 Angular2 中进行嵌套的 Observable 调用

javascript - 缩小窗口大小后网页无法正常显示

visual studio c 中每个函数的自定义序言

performance - OpenCL 内核上的 GPU 性能缓慢

java - 可读性与性能

javascript - Angular 无法找到模块,直到重建

angular - Kendo Sortable for Angular - 获取新的索引位置

javascript - HTML 中的 UINavigationController 类型菜单

javascript - 动态创建的 iframe 未加载

javascript - 在 Chrome 扩展中执行使用 AJAX 检索到的 javascript