Just-in-Time (JiT) vs Ahead-of-Time (AoT) compilation in Angular

B

Benyamin Shoham

JIT - Compile TypeScript just in time for executing it.

Compiled in the browser.

Each file compiled separately.

No need to build after changing your code and before reloading the browser page.

Suitable for local development.

AOT - Compile TypeScript during build phase.

Compiled by the machine itself, via the command line (Faster).

All code compiled together, inlining HTML/CSS in the scripts.

No need to deploy the compiler (Half of Angular size).

More secure, original source not disclosed.

Suitable for production builds.

Also, I experienced very poor performance when using Just-in-Time compilation, especially on older Android devices. Also, the render-gap on first page load is much bigger (On older Android devices up to 10 seconds depending on the size of your project).

Typescript is not compiled just in time, the browser cannot do it. In both case, typescript is compiled during the build process.

@Robouste: This is exactly what confuses me.. What is really compiled ahead of time and just in time.. (if TJS is compiled immediately). When I request a page in the explorer, the javascript will be downloaded and executed in the browser, Does any of the typedJs need to come to the browser ??? no, not at all...So what is being compiled ahead of time and just in time..?? It is actually the angular compiler that is meant. this link will answer all the questions: "angular.io/guide/aot-compiler"

I'm not an expert but when using JIT, Angular sources are send to the browser and it will compile the application. It allows you to have dynamic stuff that need to be compile on runtime. With AOT, everything is pre-compiled so the server is sending a common javascript website. You gain speed execution and lower loading time.

@LucasFowler Your browser will compile Javascript, not Typescript. That's why you still need a ng build to convert TS to JS

C

Community

Although there are some answers but I would like to add some of my findings as well, because I was really confused with what actually is being compiled as in all the cases, TS --> JS conversion happens. I am taking some para from Jeff's blog as a reference.

JIT

The TS code written by the developer is compiled to JS code. Now, this compiled js code is compiled by browser again so that the html can be rendered dynamically as per the user action and accordingly codes for angular ( for components, change detection, Dependency Injection) are also generated at runtime.

(The browser compiler is what takes an application’s directives and components, along with their corresponding HTML and CSS, and creates component factories to quickly stamp out instances with all of their view creation logic.)

When an Angular 2 application is bootstrapped in the browser, the JIT compiler performs a lot of work to analyze the components in the application at runtime and generate code in memory. When the page is refreshed, all the work that has been done is thrown away, and the JIT compiler does the work all over again.

AOT

The TS code written by the developer is compiled to JS code, this js has already been compiled for angular as well. Now, this compiled js code is compiled by the browser again so that the html can be rendered. But, the catch here is that the features of angular have already been taken care of by AOT compiler and hence the browser don't have to worry much about component creation, change detection, Dependency Injection. So, we have :

Faster rendering

With AOT, the browser downloads a pre-compiled version of the application. The browser loads executable code so it can render the application immediately, without waiting to compile the app first.

Fewer asynchronous requests

The compiler inlines external HTML templates and CSS style sheets within the application JavaScript, eliminating separate ajax requests for those source files.

Smaller Angular framework download size

There's no need to download the Angular compiler if the app is already compiled. The compiler is roughly half of Angular itself, so omitting it dramatically reduces the application payload.

Detect template errors earlier

The AOT compiler detects and reports template binding errors during the build step before users can see them.

Better security

AOT compiles HTML templates and components into JavaScript files long before they are served to the client. With no templates to read and no risky client-side HTML or JavaScript evaluation, there are fewer opportunities for injection attacks.

Remaining differences are already covered in bullet points of Benyamin, Nisar & Gaurang.

Feel free to correct me

Thanks. I finally understand after reading your answer and I read a lot of them.

Simply explained. :)

J

Joby Wilson Mathews

JIT (Just-in-Time Compilation)

Just-in-Time (JIT) is a type of compilation that compiles your app in the browser at runtime.

ng build
ng serve

https://i.stack.imgur.com/sRJ7F.jpg

AOT (Ahead-of-Time Compilation)

Ahead-of-Time (AOT) is a type of compilation that compiles your app at build time.

ng build --aot
ng serve --aot

https://i.stack.imgur.com/4UrHQ.jpg

what difference between these 2 figures ? doesn't it need intro ?

So basically Ahead-of-Time is more like Ahead-of-Runtime.

@Mr.AF just noticed that now too, the images are the same.

The images look similar but are different. In the second image, the compilation happens at build time, which is indicated by the vertical line that separates build and runtime stages.

G

Gaurang Patel

Benyamin and Nisar mentioned some good points here. I will add to it.

While theoretically, AOT looks an attractive option than JIT for production purpose but I had my doubt whether AOT really worth it!

Well, I found nice stats by Jeff Cross and it does prove that AOT significantly reduces the bootstrapping time of the app. Below snap from Jeff Cross' post will give you quick idea about it,

https://i.stack.imgur.com/MTDfo.png

v

vivekkurien

JiT (Just in Time) Compilation

The name itself describes the working, It compiles the code just in the time of loading the page in browser. The browser will download the compiler and build the application code and renders it.

It will be good for development environment.

AoT (Ahead of Time) Compilation

It compiles all the code at the time of building the application. So the browser doesn't want to download the compiler and compile the code. In this method browser can easily render the application by just loading the already compiled code.

Can be used in the production environment

We can compare the JiT and AoT compilation as below

https://i.stack.imgur.com/ejDBF.png

Would this mean that the JiT application would load faster the first time but after that the AoT application will always load faster?

Never. JiT loads slower than AoT

AOT is slower than JIT as because it doesn't complie at runtime. you have to change jit and aot titles

p

pk_code

At the end fo the day, AOT(Ahead-of-Time) and JIT(Just-in-Time) do the same things. They both compile your Angular code so it can run in a native environment (aka the browser). The key difference is when the compilation happens. With AOT, your code is compiled before App downloaded in Browser. With JIT, your code is compiled at runtime in the browser.

https://i.stack.imgur.com/CoBK6.png

Benefits of AOT:

Faster startup as Parsing and Compilation doesn’t happen in the Browser.

Templates gets checked during development(which means all the errors which we see in the javascript console in the running apps otherwise will then be thrown in our build process).

Smaller File Size as unused Features can be stripped out and the Compiler itself isn’t shipped.

a

anis programmer

There is actually only one Angular compiler. The difference between AOT and JIT is a matter of timing and tooling. With AOT, the compiler runs once at build time using one set of libraries; with JIT it runs every time for every user at runtime using a different set of libraries.

Could you elaborate on this topic of different sets of libraries?

u

user13601355

JIT compiler we use during development of the angular project. In this compilation(TS to JS conversion) happens during the runtime of the application. Where as AOT is used during building the application code for the deployment of the application in production, that time we build our application code using ng build --prod command which generates a folder called webpack, webpack contains the bundle of all the files(HTML, CSS and typescript) in compressed javascript format.

The size of the webpack folder generated for the production is far less than the folder generated for the development environment (using command ...ng build), because It does not contain the compiler inside the webpack folder, It improves the performance of the application.

Just-in-Time (JiT) vs Ahead-of-Time (AoT) compilation in Angular

Follow WeChat

Want to stay one step ahead of the latest teleworks?

相似问题

Platform

Support

Contact US