什么是Angular中的AOT和JIT编译器

一个angular应用程序主要由HTML模板组成，其组件包括各种TypeScript文件。还有一些单元测试和配置文件。每当我们运行一个应用程序时，浏览器不能直接理解代码，因此我们必须编译我们的代码。

什么是AOT（Ahead of Time）编译器？

超前的所有技术是一个将高级语言或中间语言编译成本地机器代码的过程，这取决于系统。

简单地说，当你服务/构建你的angular应用程序时，超前编译器会在你的浏览器下载和运行该代码之前的构建时间内转换你的代码。从Angular 9开始，对于超前编译器，默认编译选项被设置为true。

为什么要使用Ahead of Time编译器？

• 当你使用Ahead of Time Compiler时，编译只发生一次，当你构建你的项目时。
• 我们不必在每次进入一个新的组件时都要运送HTML模板和Angular编译器。
• 它可以最大限度地减少你的应用程序的大小。
• 浏览器不需要在运行时编译代码，它可以直接立即渲染应用程序，而不需要先等待编译应用程序，因此，它提供了更快的组件渲染。
• Ahead of time编译器可以更早地检测到模板错误。它在构建步骤中检测并报告模板绑定错误，然后用户才能看到它们。
• AOT提供了更好的安全性。它在将HTML组件和模板送入客户端显示之前，早已将它们编译成JavaScript文件。因此，没有模板需要阅读，也没有危险的客户端HTML或JavaScript评估。这将减少注入攻击的机会。

“提前 “是如何运作的？

我们使用Typescript、HTML、style-sheets来开发Angular项目，并使用ng build -prod或ng build将我们的源代码构建成捆，其中包括JS文件、index.html、style-sheets和assets文件。

现在Angular使用angular编译器（无论你选择哪一个）来构建源代码，他们分三个阶段进行，即代码分析、代码生成和模板类型检查。在这个过程结束时，bundle大小将比JIT编译器的bundle大小小得多。

之后，AOT将其构建成一个war文件，可以直接通过Heroku或JBoss或其他任何支持Node的主机进行部署。然后，我们通过使用CNAME将这个主机映射到域名上。

现在，客户可以通过域名访问你的Web应用程序。浏览器将下载所有必要的文件，如HTML、样式表和JavaScript，这是默认视图所需要的。最后，你的应用程序将获得bootstrap并被渲染。

如何在超前编译器中编译你的应用程序：对于在超前编译器中编译你的应用程序，你不需要做太多，因为从angular 9默认的编译选项被设置为超前。只需在ng serve -aot的末尾添加-AoT。

什么是准时制（JIT）编译器？

及时编译器在程序的执行过程中，在执行前的运行时间提供编译。简单地说，代码在需要时得到编译，而不是在构建时。

为什么以及什么时候应该使用即时编译器？

• 及时编译器分别编译每个文件，而且大多是在浏览器中编译的。你不必在改变代码后再次构建你的项目。
• 大多数编译工作是在浏览器端完成的，所以会花费较少的编译时间。
• 如果你有一个大的项目，或者你的一些组件在大部分时间内不被使用，那么你应该使用及时编译器。
• 当你的应用程序在本地开发时，及时编译器是最好的。

及时编译器如何工作？

最初，编译器负责将高级语言转换为机器语言，然后将其转换为可执行代码。

及时编译器，在运行时编译代码，这意味着它不是在构建时解释字节码，而是在该组件被调用时编译字节码。

几个重要的观点：

• 在Just in time的情况下，不是所有的代码都在初始阶段被编译。只有在你的应用程序开始时需要的必要组件才会被编译。然后，如果你的项目需要某种功能，但它不在编译的代码中，该功能或组件将被编译。
• 这个过程将有助于减少CPU的负担，使你的应用程序快速渲染。
• 更有趣的是，你可以在检查模式下看到并链接到你的源代码，因为Just in Time，用JIT模式和一个地图文件编译你的代码。

AOT和JIT之间的比较 –

结论：你可以用两种方式编译你的angular应用程序。JIT和AOT。两者都适用于不同的场景，比如你可以在开发模式下使用JIT，而AOT在生产模式下更好。在JIT模式下实现功能和调试很容易，因为你必须映射文件，而AOT没有。然而，AOT为生产模式的angular开发者提供了很大的好处，它可以减少包的大小，使你的应用程序渲染得更快。