While most of us write React or other high-level TypeScript code nowadays, there are still times that you have to venture into the dark nether region of the F12 console and JavaScript runtime in the browser.
In this article, I'll cover some key concepts you need to understand that can and most likely will help you build much faster pages.
1) 🔁 Event loop
JavaScript is single-threaded, which means that the language itself can only perform one task at a time. To get around this limitation browsers provide an "event loop" mechanism.
For example, when you use the "setInterval" function, the browser maintains a timer in the background and when the interval has expired, the callback function is then pushed onto the event loop.
Meanwhile, any JavaScript code that does not use an asynchronous browser API will just execute top to bottom one after the other. When the main thread is not doing any work, the browser then pulls a task from the event loop and runs it.
2) 👷 Background workers
When dealing with intensive operations that take a long to execute, say 500ms+, you definitely do not want to run this on the main thread as it's going to make the UI sluggish.
This is where web workers come in handy; web workers run on a separate thread from the main browser thread, so tasks running here won't affect your page load speeds.
A good use case would be for example: when you have time-series data for complex charts that contain thousands of records to parse, and do calculations on. You can just show a loader and do the chart calculations in a web worker, then update the DOM once it is ready.
3) ⏸️ Delay none-essentials
Since JavaScript is single-threaded, you should delay as much as you can to free up your main thread. Thus, the best place to start is core web vitals, which are essential SEO metrics to help you identify slow code that can be delayed.
You can then use event listeners such as scroll, load, DOMContentLoaded, etc... to delay the execution of code.
Usually, this is used to delay page tracking, load widgets below the fold, load graphs, and make other API calls that fall below the main fold.
Example:
document.addEventListener('DOMContentLoaded',function() {
// Slow code here.
});
ℹ️ DOMContentLoaded: will wait for the entire HTML document to be parsed first including none async JS scripts but does not wait for external resources like images, CSS files, iframes, and so forth. The "load" event is similar except it waits for everything to load including CSS, iframes, and images.
Another handy web API is the Intersection Observer. This allows you to trigger code based on the visibility of elements, super useful for minimizing API calls when the user scrolls past a certain DOM element (think infinite pagination).
4) 🖼️ OffscreenCanvas
Similar to web workers you can push intensive canvas-related operations onto their own thread as a background task, using a browser API known as "OffscreenCanvas".
This is useful for real-time visualizations, image manipulation, games, video editing, etc...
5) ⏳ Run tasks when the browser is not busy
Very similar to the event loop, except tasks run with "requestIdleCallback" have a very low priority and will therefore only run when the browser is idle.
This is ideal for running non-critical tasks such as logging and caching for offline access in a PWA.
📖 MDN Web Docs [Bonus - helpful resource]
https://developer.mozilla.org/en-US/
I know you probably using Claude or some LLM for this, but AI hallucination is a problem and will at times give you wrong information, so it's always nice to have a solid written reference guide you can trust.
MDN is open-source and managed by Mozilla, hands down it's the best web resource for learning about the different JavaScript, CSS, and HTML browser API's. I frequently have used this throughout my career and still do today.
PS: for more in-depth web dev, AI, Linux tutorials and guides, you can check my blog at: KevinCoder
Top comments (0)