-
编译器：将其他语言翻译成机器语言的工具，编译型型语言统一编译，一次执行。
-
编译型语言：如C语言，运行速度快，但任何一个小改动都需要整体重新编译，可脱离编译环境运行，跨平台能力弱。
-
解释器：编译器以解释方式运行时，解释型语言一行一行的翻译，翻译一行就执行一行。
-
解释型语言：如Python语言，运行速度慢，但部分改动不需要整体重新编译，不可脱离解释器环境运行，跨平台能力强。
1 JIT编译器
- JIT编译器（Just-in-time）：动态编译，程序执行时进行编译，将语言转化为机器代码需要解释器的参与。注意，解释器就是将其他语言编译为机器语言的工具，整个编译过程涉及词法分析、语法分析、语义分析，该过程往往由程序员在编译程序时完成。
当你运行 ng build 或 ng serve 这两个 CLI 命令时 JIT 编译是默认选项；要进行 AOT 编译，只要让 ng build 或 ng serve 命令中包含 --aot 标志。
优点：
-
在浏览器中编译，每个文件分别编译。
-
更改代码后和重新加载浏览器页面之前无需构建。
-
适合开发环境。
缺点：
-
编译需要占用运行时资源，导致进程卡顿。
-
编译时间需要占用运行时间，不能支持某些代码的编译优化，需要权衡程序流畅和编译时间。
-
在编译准备和识别频繁使用的方法需要占用时间，使得初始编译不能达到最高性能。
基于Angular的JIT编译器经历步骤：
-
使用Typescript和Angular模板语法编写源代码。
-
用tsc将Typescript代码编译成Javascript代码。
-
打包、混淆、压缩。
-
打包生成的bundle以及其他需要的静态资源部署到服务器。
当用户通过浏览器访我们的应用时：
-
客户端下载bundle，开始执行这些Javascript。
-
Angular启动，Angular调用Angular编译器。angular进入JIT编译模式，开始编译我们应用中的指令或组件，生成相应的js代码。
-
应用完成渲染。
以下是Java源代码进行编译的基本结构图
2 AOT编译器
AOT编译器（Ahead-of-time）：静态编译，程序执行前进行编译。
优点：
-
在程序运行前编译，可以避免在运行时得编译性能消耗和内存消耗。
-
可以在程序运行初期就达到最高性能。
-
可以显著得加快程序的启动。
-
渲染快，异步请求少，提前检测模板错误，安全性高。
缺点：
-
在程序运行前编译会使程序安装的时间增加。
-
牺牲Java的一致性。
-
将提前编译的内容保存会占用更多的外存。
基于Angular的AOT编译器经历步骤：
-
使用Typescript和Angular模板语法编写源代码。
-
用ngc编译应用，包括两部分：将Angular源代码编译，输出Typescript目标代码；ngc调用tsc将应用Typescript代码编译成Javascript代码。
-
摇树优化（Tree shaking），将没有用的代码删掉。
-
打包、混淆、压缩。
-
将得到的bundle以及其他需要的静态资源部署到服务器上。
以下是发生在客户端（用户浏览器）的步骤：
-
客户端下载bundle，开始执行这些JavaScript。
-
Angular启动，由于bundle中已经有了
NgFactories的Javascript代码，因此Angular直接用它们来创建各种组件的实例，产生了我们看到的应用。
3 JIT与AOT的区别与使用
| 编译方式 | 编译平台 | 编译时机 | 构建速度 | 打包大小 | 性能/渲染速度 | 执行性能 | 启动时间 | 模板错误检查时间 | 安全性 |
|---|---|---|---|---|---|---|---|---|---|
| JIT | 浏览器 | app运行时 | 快 | 大 | - | - | - | app运行时 | 低 |
| AOT | 服务器 | app构建时 | 慢 | 小 | 快 | 好 | 短 | app构建阶段 | 高 |
- Angular框架下的编译
/**
main.ts基于JIT编译器的动态引导
*/
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
/*
在main.ts基于AOT编译器的静态引导
*/
import { platformBrowser } from '@angular/platform-browser';
import { AppModuleNgFactory } from './app.module.ngfactory';
platformBrowser().bootstrapModuleFactory(AppModuleNgFactory);
4 参考资料
不断复盘才是最好的学习，笔记只是给我们留下复习的印记，复盘才能使下一次写的更好。技术学得再好，如果不能把它说清楚，把它写明白，你就不会有更大的进步；文章写的再好，如果没有人给你提出指点，也是泯然于人的。
