Like any kind of apps, JavaScript apps also have to be written well.
Otherwise, we run into all kinds of issues later on.
In this article, we’ll look at some best practices we should follow when writing JavaScript code.
Too Many Interactions with the Host
We shouldn’t interact too much with any DOM objects.
They render slowly and we should reduce the number of interactions that are done.
Too Many Dependencies
If we have too many dependencies, then we should reduce them.
Over the years, many things are added to the JavaScript standard library.
So we don’t have to use 3rd party dependencies to do the same thing.
For instance, Lodash array methods can be replaced with built-in array methods.
3rd party HTTP clients can be replaced with the Fetch API.
Poor Event Handling
To improve performance of event handling, we should use them properly.
We should remove unnecessary loops and unbind unused event handlers with jQuery unbind or plain JavaScript’s removeEventListener to remove them.
Unorganized Code
To make our lives easier, we should organize our code into coherent chunks.
This way, we can find the code later.
Use HTTP/2
HTTP/2 is the latest version of JavaScript and provides many enhancements over the original version.
We’ll see speed improvements if we switch to HTTP/2 server for hosting our site.
Use Pointer References
We should catch our DOM objects in a variable so that we don’t have to get them again from the DOM if we need it later.
We just take the variable and use that.
For instance, we can write:
const fooEl = document.querySelector('.foo');
to get the element with the class foo .
Trim our HTML
We can reduce the number of items that needed to be loaded by reducing the elements on our page.
The fewer we have, the less we need to load, and the faster our page will be.
Use document.getElementById()
We can use getElementById .
Getting things by ID is faster since there’s only one element with a given ID on a page.
This means our browser doesn’t have to check all the nodes to find all the items.
For example, we can write:
const button = document.getElementById('window-minimize-button');
Use document.querySelector()
If we only want to get one element with the given selector, we can use querySelector to get the DOM node with the given selector.
The browser stops looking after the first node with the given selector is found, which makes the lookup faster.
For example, we can write:
`const button = document.`querySelector`('#window-minimize-button');`
Batch our DOM Changes
We should batch our DOM changes so that we won’t rerender multiple times.
This way, our web page would feel faster for the user.
Buffer our DOM
If we have scrollable divs, we can use a buffer to remove items from the DOM that aren’t currently visible in the viewport.
This will save memory usage and DOM traversal.
There are many libraries to help us with this like React Virtualized for React apps.
Conclusion
We can apply various techniques to speed up DOM manipulation.
These can make a big difference in performance.
