JIT vs AOT
When working with Angular, you encounter these two compilation methods AOT and JIT, but when working with React they’re not mentioned. Is this unique to NG? Of course not, Java also mentions JIT. Here I’ll discuss the differences between the two.
If there are any errors, welcome corrections.
Definitions
Here taking an explanation from Angular:
JIT：just-in-time
Just-in-Time (JIT), which compiles your app in the browser at runtime.
AOT: ahead of time
Ahead-of-Time (AOT), which compiles your app and libraries at build time.
Example Analysis
Using an NG demo as an example to illustrate:
JIT compiled code is different from AOT compiled code. JIT compiled code is not JS that browser engines can execute normally. As mentioned in the definition, JIT requires runtime compilation. For example, Angular syntax is not understood by browsers, so a built-in compiler is needed. Therefore, JIT compiled code is generally larger, largely due to the built-in compiler.
For example, with an NG directive like routerLink, in JIT compiled code we can still see code blocks like this:
But in AOT compiled code, such code doesn’t exist.
React, Java
React not mentioning JIT and AOT doesn’t mean there’s no need for this. For high-level language compilation, both modes exist as choices. React doesn’t mention it because React itself doesn’t provide both methods simultaneously. Compilation and packaging will compile JSX to JS, so it can be said React only has AOT compilation.
Java is actually JIT compiled. When we package a Spring WEB application, it generates a jar or war package. After decompression, you’ll see a bunch of class files, but these files are not machine code - they are Java bytecode, an intermediate form between Java files and machine code. In theory, JIT compilation should be slow, but in actual operation, aside from initial slow loading, it doesn’t feel slow later. This is because JVM has algorithms that compile frequently executed bytecode into machine code, ensuring faster execution response.
