In our digital world, speed isn't just a convenience... It's a necessity.
We all know the frustration of a slow-loading page, and in todayâs web environment, even a few extra seconds can make a huge difference in user satisfaction and business outcomes.
If youâre using JavaScript, there are several straightforward strategies you can employ to supercharge your site's performance.
In this article, Iâll walk you through some simple yet effective tweaks that can help speed up your site, making your users happier and possibly boosting your search engine rankings.
Ready to upgrade your website? đđđ Letâs dive in!
Minimizing DOM Manipulation
The Document Object Model (DOM) is critical in web development, but excessive or improper DOM manipulation can severely impact performance.
Optimize Selectors: Use the most efficient selectors possible for manipulating or querying the DOM. For instance, getElementById() is faster than querySelector().
Batch Your DOM Changes: Minimize reflows and repaints by batching DOM changes. Modify the DOM offscreen and append the changes in a single operation.
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const element = document.createElement('div');
fragment.appendChild(element);
}
document.body.appendChild(fragment);
- Use Virtual DOM or Web Components: Libraries like React use a virtual DOM to minimize direct DOM manipulation, which can greatly improve performance.
Enjoying the article?
Join our Newletter for weekly updates!
Efficient Event Handling
Improper handling of events, especially in complex applications, can lead to slow performance and unresponsive interfaces.
- Event Delegation: Instead of attaching events to individual elements, use event delegation to manage events at a higher level.
document.getElementById('parent').addEventListener('click', function(event) {
if (event.target.tagName === 'BUTTON') {
console.log('Button clicked!');
}
});
- Throttle and Debounce: For events that fire frequently, such as resize or scroll, throttle or debounce your handlers to limit the rate at which the event handler is executed.
// Throttle example
function throttle(func, limit) {
let lastFunc;
let lastRan;
return function() {
const context = this;
const args = arguments;
if (!lastRan) {
func.apply(context, args);
lastRan = Date.now();
} else {
clearTimeout(lastFunc);
lastFunc = setTimeout(function() {
if ((Date.now() - lastRan) >= limit) {
func.apply(context, args);
lastRan = Date.now();
}
}, limit - (Date.now() - lastRan));
}
}
}
window.addEventListener('resize', throttle(function() {
console.log('Resize event');
}, 200));
Did you learn something new?
Join our Newletter for weekly learning crumbs đȘ!
Optimizing Loops and Logic
JavaScriptâs performance can often be bottlenecked by inefficient code structures, particularly loops and complex logic.
- Optimize Loop Performance: Reduce the workload inside loops, cache lengths in loops, and avoid high-cost operations within loops.
const items = getItems(); // Assume this returns an array
const length = items.length; // Cache the length
for (let i = 0; i < length; i++) {
process(items[i]); // Minimize what happens here
}
- Avoid Unnecessary Computations: Store computed values when possible instead of recalculating them.
Speed matters in todayâs web.
Enhancing your JavaScript performance doesnât require rewriting your entire application. Implementing these tips can boost your siteâs responsiveness and user satisfaction.
Start with one area, see the improvements, and gradually apply more optimizations as needed.
Share your results or additional tips in the comments below.
Thanks for reading,
Pachi đ
P.S. Have you give us a GitHub Star yet? â
Top comments (8)
Nice suggestions of possible performance improvements but where is you evidence. Many of the points such as the DOM manipulation are well known issues. However, I was informed some time ago that caching the array length is no longer required.
It would be nice to see some evidence.
Caching array length is no longer required for most JavaScript engines but I still do it because somehow I find it more readable.
Very nice article and apt statment âsimole yet effectiveâ. Caching array lenth, store computation results once and use it instead of recalculating. Use correct dom selector, batch the dom changes and append them to avoid repainting web page for everry single dom chamge. Event delhation to parent, use throttlr or debounce for frequently fire event
document.createDocumentFragment() is a great tip!
Using Virtual DOM doesn't lead to better performance. See Solidjs which uses real DOM:
solidjs.com/
Absolutely agree!
Usefull information. Thankyou dev team
A client(individual) of mine wanted client-side encryption(front end). It's quite odd because it's usually a server side thing, But in business the client is always right. So I did the encryption using argon2 for kdf function, with web crypto api for data encryption and decryption.
This takes a toll on the main thread. I mean really taking a toll, I work with an nvidia gtx + core i5 pc its quite fast, but when testing client side encryption it was so freaking slow. So it had me thinking. if this is slow on my pc, how about people with much slower computers?
So I read a bit on web workers, turns out all apis I needed were also available on the web worker (self).
This significantly helped free up the main thread. The whole encryption and decryption functionalities ran in the background.
So web workers is a way to optimise your website(only in certain scenarios).