Angular 2:即时(JiT)与时间(AoT)编译
Gau*_*tel 90 compilation angular
我在引用这个文档时遇到了编译概念.可以使用JIT或AOT编译.但是,我发现它非常简短,需要详细了解以下几点,
- 这两种技术之间的差异
- 关于何时使用什么的建议
Ben*_*ham 127
JIT - 及时编译TypeScript以执行它.
- 在浏览器中编译.
- 每个文件单独编译.
- 更改代码后和重新加载浏览器页面之前无需构建.
- 适合当地发展.
AOT - 在构建阶段编译TypeScript.
- 由机器本身编译,通过命令行(更快).
- 所有代码编译在一起,在脚本中内联HTML/CSS.
- 无需部署编译器(角度大小的一半).
- 更安全,原始来源未披露.
- 适合生产构建.
- 打字稿不及时编译,浏览器无法做到.在这两种情况下,typescript都是在构建过程中编译的. (29认同)
- 我不是这方面的专家，但我认为这个答案并不准确。许多细节似乎不正确或具有误导性。Typescript *不*在浏览器中编译，根据 Angular 团队的说法，AOT *适用于本地和生产构建，Typescript *确实*需要在刷新浏览器之前在 JIT 中重新编译，仅举几例。 (3认同)
- 另外，在使用即时编译时，我的性能非常差，尤其是在较旧的Android设备上。此外，首页加载时的渲染间隙要大得多（在较旧的Android设备上，最长可达10秒，具体取决于项目的大小）。 (2认同)
- @Robouste:这正是让我困惑的事情..什么是提前编译的,及时的...(如果TJS是立即编译的).当我在资源管理器中请求页面时,javascript将被下载并在浏览器中执行,是否有任何类型的j需要进入浏览器？不,一点也不......那么提前编译的是什么,及时... 它实际上是角度编译器.此链接将回答所有问题:"https://angular.io/guide/aot-compiler" (2认同)
- 我不是专家,但在使用JIT时,Angular源被发送到浏览器,它将编译应用程序.它允许您拥有需要在运行时编译的动态内容.使用AOT,一切都是预编译的,因此服务器正在发送一个通用的JavaScript网站.您可以获得速度执行和更短的加载时间. (2认同)
- @LucasFowler 你的浏览器将编译 Javascript，而不是 Typescript。这就是为什么你仍然需要一个“ng build”来将 TS 转换为 JS (2认同)
Sha*_*vek 45
虽然有一些答案,但我想补充一些我的发现,因为我真的很困惑实际编译的所有情况,TS- > JS转换发生.我将Jeff的博客作为参考.
JIT
该TS开发者编写的代码被编译到JS代码.现在,这个编译的js代码再次由浏览器编译,以便html可以根据用户操作动态呈现,因此angular 在运行时也会生成(对于组件,更改检测,依赖注入)的代码.
(浏览器编译器接受应用程序的指令和组件及其相应的HTML和CSS,并创建组件工厂以快速压缩具有其所有视图创建逻辑的实例.)
当Angular 2应用程序在浏览器中引导时,JIT编译器执行大量工作以在运行时分析应用程序中的组件并在内存中生成代码.刷新页面时,所有已完成的工作都将被丢弃,JIT编译器将重新完成工作.
AOT
该TS开发者编写的代码被编译到JS代码,这js
已经被编译为角以及.现在,这个编译的 js代码再次被浏览器再次编译,以便html可以呈现.但是,这里的问题是编译器angular已经完成了功能,AOT因此浏览器不必担心组件创建,更改检测,依赖注入.所以,我们有:
更快的渲染
使用AOT,浏览器会下载应用程序的预编译版本.浏览器加载可执行代码,以便它可以立即呈现应用程序,而无需先等待编译应用程序.
更少的异步请求
编译器在应用程序JavaScript中内联外部HTML模板和CSS样式表,从而消除了对这些源文件的单独的ajax请求.
较小的Angular框架下载大小
如果已经编译了应用程序,则无需下载Angular编译器.编译器大约是Angular本身的一半,因此省略它会大大降低应用程序的有效负载.
提前检测模板错误
AOT编译器在构建步骤中检测并报告模板绑定错误,然后用户才能看到它们.
安全性更好
AOT在将HTML模板和组件提供给客户端之前很久就将其编译为JavaScript文件.由于没有可读取的模板且没有冒险的客户端HTML或JavaScript评估,因此注入攻击的机会较少.
Benyamin,Nisar和Gaurang的要点已经涵盖了剩余的差异.
随意纠正我
- 谢谢。阅读您的答案后，我终于明白了，并且阅读了很多。 (3认同)
Gau*_*tel 22
Benyamin和Nisar在这里提到了一些好处.我会补充一下.
虽然从理论上讲,AOT在生产方面看起来比JIT更具吸引力,但我怀疑AOT是否真的值得!
好吧,我发现杰夫克罗斯很好的统计数据,它确实证明AOT显着减少了应用程序的自举时间.从杰夫克罗斯的帖子下面发布的帖子会让你快速了解它,
viv*_*ien 13
JiT(及时)编译
名称本身描述了工作,它只是在浏览器中加载页面时编译代码.浏览器将下载编译器并构建应用程序代码并呈现它.
这对开发环境有利.
AoT(提前)编译
它在构建应用程序时编译所有代码.所以浏览器不想下载编译器并编译代码.在这种方法中,浏览器只需加载已编译的代码即可轻松呈现应用程序.
可以在生产环境中使用
我们可以比较JiT和AoT编译如下
Job*_*ews 11
JIT（及时编译）
AOT（提前编译）
- 这两个数字有什么区别？不需要介绍吗？ (3认同)
- 所以基本上 Ahead-of-Time 更像是 Ahead-of-Runtime。 (2认同)
- 这些图像看起来相似但有所不同。在第二张图中，编译发生在构建时，这由分隔构建和运行时阶段的垂直线表示。 (2认同)
在一天结束时，AOT（提前）和JIT（及时）执行相同的操作。它们都编译您的Angular代码，因此它可以在本机环境（也称为浏览器）中运行。关键区别在于编译发生的时间。使用AOT，您的代码将在应用程序下载到浏览器之前进行编译。使用JIT，您的代码将在运行时在浏览器中进行编译。
比较如下：
AOT的好处：
- 浏览器中不会发生解析和编译，因此启动速度更快。
- 在开发过程中会检查模板（这意味着我们在正在运行的应用程序的javascript控制台中看到的所有错误，否则将在构建过程中抛出）。
- 较小的文件大小，因为可以删除未使用的功能，并且不提供编译器本身。
| 归档时间： |
|
| 查看次数： |
56489 次 |
| 最近记录： |