I’ve always been fascinated by the deep abstractions that power modern web apps. But as I increasingly began to understand how JavaScript is executed under the hood, I became interested in an even deeper topic - JavaScript engines; the powerful runtimes that secretly breathe life into your JavaScript code when it’s running in the browser and perform all of those optimizations for you. Lately, I’ve been reading up on their implementations and history and thought I would highlight the most interesting facts.
This post covers how JavaScript engines go from parsing your code to making it sweat for max performance, common design patterns used in engine building (that can often hint why some code performs better than others), as well as other general tips we can borrow from our engine-building counterparts to write better JS.
What is a JavaScript Engine?
At a high level, you could say that a JavaScript engine is a program that takes your JavaScript (JS) code and turns it into something that your computer can actually run. Each browser has their own JavaScript engine, designed to deliver the best performance to their users:
- V8: Powers Google Chrome and Node.js.
- SpiderMonkey: Mozilla Firefox’s engine.
- JavaScriptCore: Used by Safari.
- Chakra: Microsoft Edge’s original engine (prior to adopting Chromium).
These engines are what make your code work, and work well on all sorts of different devices and platforms.
Here’s what happens when you run JavaScript code in a browser, step by step:
- Parsing: The engine first reads (”parses”) the JavaScript code you give it and turns it into a set of instructions the computer can follow. This set of instructions then gets converted into something called an “Abstract Syntax Tree”.
Example: Reading a recipe and breaking it down to the ingredients and steps.
- Compilation: Modern engines don’t run the code directly from the AST, they compile it down into bytecode (a lower-level representation) or even machine code so that it can be executed faster.
Key feature: During runtime engines, use Just-In-Time (JIT) compilation to optimize the code. This means that they will adapt the binary code they execute during runtime in order to make it run faster.
- Execution: Once compiled, the optimized machine code is executed on your hardware with the engine continuing to optimize as it goes along. It applies a lot of advanced optimization techniques on parts of the program which are frequently executed (called hot paths), making them very fast.
Key Optimizations in JavaScript Engines
Modern engines use multiple techniques to make sure your JavaScript runs fast and is memory efficient:
Just-In-Time (JIT) Compilation
JIT compilation refers to the fact that an engine will compile some code while a program is already being executed. It means that the engine has additional knowledge about how your program is actually running and it can therefore optimize it.
Example: If a loop is executed repeatedly, the engine recognizes it as a hot path and optimizes it for faster execution.
Inline Caching
In the process of accessing an object property, Engine checks Cache locations at first, if it is found that will reduce the overall execution time used to lookup for a place where property actually is.
Example: It basically means if you access user.name multiple times, engine will remember object where user data is stored so that next time it does not have to find that object again and it can be directly accessed.
Garbage Collection
JavaScript engines have what is called a Garbage Collector. This is basically a program that frees up memory when it determines an object can no longer be reached or used.
Example: If you create an object in a function and after the function is done, you no longer need it, the engine sees that and simply removes it from memory automatically.
How Browsers Use JavaScript Engines
JavaScript engines run alongside the browser's rendering engine. When you visit a website:
- The browser will first of all fetch HTML, CSS and JavaScript files.
- JavaScript engine in the browser will parse and execute those scripts.
- The rendering engine combines the processed HTML, CSS, and JavaScript to display the webpage.
Example:
When you open any e-commerce website the dynamic functionality like adding items to cart, update pricing, and load product details etc., everything is taken care by JavaScript engine and no page refresh is happening at all.
Tips to write Engine-Friendly Code
Engine friendly code helps you write efficient applications, but they also make them scalable and maintainable. Here is an actionable list with some explanations and examples that will help you squeeze everything out of JavaScript engines.
1. Optimize DOM Manipulations
Frequent and unnecessary DOM manipulations can slow down your app, as each update forces the browser to recalculate styles and re-render elements.
Best Practice:
Minimize direct DOM updates by batching them.
Use document fragments or frameworks like React that handle updates efficiently.
Example: Instead of:
Use a document fragment:
Why it helps: By reducing the number of DOM operations, you minimize reflows and repaints, making your application faster.
2. Avoid Deep Nesting in Loops and Conditions
Engines struggle with deeply nested structures, which can make your code harder to optimize and debug.
Best Practice:
Refactor deeply nested loops or conditions into smaller, reusable functions.
Example: Instead of:
Use:
Why it helps: Reducing nesting improves readability and allows the engine to optimize your code more efficiently.
3. Cache Lengths in Loops
Every time you use array.length inside a loop, the engine recalculates the length. This can lead to performance issues in large arrays.
Best Practice:
Cache the array length before the loop.
Example: Instead of:
Use:
Why it helps: By caching the length, you avoid redundant calculations, making your loop run faster.
4. Use Modern Syntax and Built-In Methods
Modern JavaScript features and methods are often more optimized by engines compared to older techniques.
Best Practice:
- Use let and const instead of var for variable declarations.
- Use array methods like map, filter, and reduce instead of manual iterations where applicable.
Example: Instead of:
Use:
Why it helps: Built-in methods are highly optimized for performance and make your code more concise and readable.
5. Avoid Memory Leaks with Proper Cleanup
Memory leaks occur when objects that are no longer needed are not released, leading to increased memory usage over time.
Best Practice:
- Remove event listeners when they are no longer needed.
- Avoid creating global variables unnecessarily.
Example: Instead of:
Use:
Why it helps: Proper cleanup ensures that unused resources are released, preventing performance degradation over time.
6. Use Lazy Loading for Heavy Assets
Load resources like images, scripts, and data only when they are needed to reduce the initial load time of your application.
Best Practice:
- Use the loading="lazy" attribute for images.
- Dynamically import JavaScript modules when they are required.
Example:
Why it helps: Lazy loading improves performance by deferring the loading of non-essential assets.
7. Avoid Blocking the Main Thread
JavaScript runs on a single thread, so long-running operations can block the UI and make your app unresponsive.
Best Practice:
Use setTimeout, setInterval, or Web Workers for heavy computations.
Example: Instead of:
Use a Web Worker:
Why it helps: Offloading heavy tasks prevents the UI from freezing, ensuring a smooth user experience.
8. Use Inline Caching
JavaScript engines optimize frequently accessed object properties by caching their locations. Ensure objects have a consistent shape for better performance.
Best Practice:
Avoid dynamically adding or deleting properties from objects.
Example: Instead of:
Use:
Why it helps: Engines optimize objects with a predictable structure, speeding up property access.
9. Minimize Redundant Computations
Avoid performing the same calculations multiple times when the result can be cached.
Best Practice:
Use memoization for expensive function calls.
Example: Instead of:
Use:
Why it helps: Memoization reduces redundant computations, improving the performance of recursive functions.
10. Profile and optimize with DevTools
Use the browser’s developer tools to see which parts of your code are slowing it down.
Best Practice:
-Profile your app regularly to see which part of code is slow.
-Optimize based on real-world usage patterns.
Example: Use Chrome DevTools’ Performance tab to identify slow scripts or excessive reflows and adjust your code accordingly.
Why it helps: Profiling will let you have insights driven by data, and allow you to see on which part you should focus your optimization.
Example: V8’s Role in Google Chrome
Google’s V8 engine is one of the most advanced JavaScript engines out there. It powers Chrome and Node.js so that modern web applications like Gmail, Google Maps, or YouTube can run fast and efficiently even on slower machines. V8 applies a lot of performance optimizations like JIT compilation and inline caching to achieve this.
The Evolution of JavaScript Engines
JavaScript engines have travelled a long way since their inception!
- Early Days: In the earlier days, the engines were interpreting the code directly which was making execution slower.
- Introduction of JIT: Later on, Engines started applying JIT compilation technique to get higher runtime performance.
- Current Innovations: Modern engines leverage advanced techniques such as WebAssembly (Wasm) integration and multi-threaded execution for unbeatable performance.
Conclusion:
We spend a lot of our time as developers writing code, but knowing how JavaScript engines execute that code can help us write better, more optimized applications. When you’re aware of the kinds of capabilities JavaScript compilers have, like JIT compilation, garbage collection or inline caching you’re able to design your solutions leveraging those strengths.
I hope this post helped you to understand the magic that goes behind the screens whenever you run JavaScript in a browser. Keep writing cleaner and efficient code and acknowledge the remarkable effort put by these engines to make our applications alive.
Happy coding!!! Cheers to build faster and smoother web 😊
Top comments (8)
Awesome 🎊👌
Thank You!
Good job.👍
Thank you!
Thank you so much.
Super 👍 Good job 👈👈
Thank you!
2 is not quite as straightforward. Nested functions in my tests are 19% slower in Chromium and 69% slower in Firefox for arrays of 1000. For 10,000 elements however, Chromium does the functions faster but Firefox still prefers the loops.
So, I guess the moral is, focus first on good code.
jsbench.me/qsm3xg2lmq/1