Ahead of Time Compiling for a Better Site Experience

Ahead of Time (AOT) compiling and traditional Just in Time (JIT) compiling are two ways to compile JavaScript to run in a browser. JIT compiles JavaScript as it’s called in the browser during execution time, then it runs it. AOT compiles JavaScript before it runs, therefore it’s already compiled and ready to run when called by the browser.

Clearly, AOT is faster because it eliminates having to compile JavaScript just before running. However, with advances in V8 and Spider Monkey JavaScript engines, what does this mean for real-time applications? AOT improves load times of single page applications (SPAs) by approximately 4x the speed of JIT compiling. This means if your SPA takes approximately 500 milliseconds to load and initialize, it will take approximately 100-150 milliseconds under perfect conditions.

For client side rendered SPAs, this won’t improve the performance and page responsiveness much since the whole application still needs to download and initialize. Therefore, the average website visitor won’t notice the performance improvement.

The true benefit of AOT compiling is on the server side rendered SPA, which improves load and initialization from an average of 100-150 milliseconds to less than 25-40 milliseconds under perfect conditions. Or compared to JIT compiling, from 400-500 milliseconds to 25-40 milliseconds. A huge performance boost!

But how does this work? Server side rendering relies on rendering, then downloading the assets. So, what you need to see is initially rendered and loaded into the browser while the SPA lazy loads the rest of the JavaScript and assets like CSS and images.

AngularJS 4 has a unique method called the PreBoot processor, which handles client side processing, so you can interact with the page while everything else is lazy loading into the browser. PreBoot records client side events and JavaScript functions, so even though the application is server side rendered, it behaves much like a SPA. The lazy loading process is invisible to the end user so the effect is the SPA is immediately available and the user can browse products, load the cart, and even check out while the rest of the SPA is downloading in the background – resulting in a much better overall site experience.