Angular AOT vs JIT
Angular code must be compiled before it can be interpreted and run in the browser. While Angular has traditionally relied on just in time (JIT) compilation to achieve this, tools like the Angular CLI now make it easy to use ahead of time (AOT) compilation. AOT provides some clear advantages over JIT for optimizing your app to run in the browser. In this article, we discuss the difference between JIT and AOT including the benefits of AOT and how AOT works with Angular.
What is JIT
JIT stands for just in time compilation. JIT is the default method Angular uses to compile Angular code for the browser. Specifically, JIT runs before the app is run in the browser. When a user visits your web URL, all of the JavaScript assets are first retrieved from the server. Once the browser has everything it needs, it compiles the JavaScript code into a binary format which can then be executed by the browser's interpreter. In this sense, JIT compiles the program as it is being delivered to your browser. For these reasons, we refer to this as JIT because everything happens in the browser.
What is AOT
AOT stands for ahead of time compilation. AOT is not specific to Angular and simply refers to the act of compiling a higher-level language into a binary format that can be executed natively. Using AOT, code is compiled before it is run. This takes a significant amount of work off the runtime engine as the interpreter doesn't need to worry about compiling any assets before the content is ultimately rendered.
AOT vs JIT
At the end fo the day, AOT and JIT 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 hand. With JIT, your code is compiled at runtime in the browser.
The Benefits of AOT over JIT
Smaller payloads
With JIT, the Angular compiler must ship with your JavaScript bundle so your code can be compiled by the browser. Since AOT compiles code before it is shipped, the Angular compiler is no longer needed with the resulting bundle. This drastically reduces the size of the bundle file that gets delivered to the browser and significantly cuts down on page load time.Performance
Since the browser doesn't have to worry about compiling any Angular code, it can jump straight to rendering views. This makes for faster load times and dramatically improves performance. Additionally, since AOT ultimately reduces the amount of JavaScript code shipped, script execution time sees an improvement as well. Not only do pages load faster, they operate faster too!
Conclusion
There is little doubt that AOT is the preferred method for compiling and deploying Angular apps. While JIT remains the default method for parsing your Angular code, the performance benefits experienced with AOT along with it's integration into the Angular CLI project make it hard not to use AOT moving forward.
