JavaScript Best Practices — Performance Improvements

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.

Excess Optimizations

We shouldn’t optimize our code too much.

If there aren’t obvious performance issues then we can leave it.

And if it makes our code harder to work it, we shouldn’t make the change.

Causing Excessive Document Reflows

DOM modification is slow since our browser has to rebuild the DOM tree and recalculate all the dimensions to see how they fit together.

It’s more of a problem if elements have the default static positioning or relative.

So we should keep DOM modifications to a minimum.

To reduce the operations, we should batch our DOM manipulation.

For example, we can write:

let div = $('<div></div>');

$('body').append(div);

for (let i = 0; i < 10000; i++) {
  $('div').append(
    '<p>foo</p>'
  );
}

We append to p elements to the div 1000 times.

This is obviously going to be very slow.

Instead, we should only call append on the body one time:

let div = $('<div></div>');

for (let i = 0; i < 10000; i++) {
  $('div').append(
    '<p>foo</p>'
  );
}

$('body').append(div);

In the code above, we call append to append the p elements to the div, which isn’t in the DOM yet.

So we won’t be changing the DOM 10000 times.

The only change is the last line where we append the div to the body.

Going Overboard with File Concatenation

We shouldn’t concatenate everything into one big file.

One big request may be slower than multiple smaller requests.

This is because once a request is made for the resource, it’ll be cached until it’s updated again.

Having multiple smaller files can take advantage of that.

If we have one big file, then we can’t take advantage of the caching.

The best way to combine the code is to have one common file that’s used everywhere.

And then we have page-specific files that are only used on the page requested.

Really Long Function Chains

Function chains can be handy.

But we should be aware that we may have null or undefined returned in the middle of the chain.

For example, if we have:

$('.el').click(handleClick).parents('.container')[0].slideDown();

then any of the methods could return those values and crashing our app.

Flash of Unstyled Content (FOUC) Because of Late-Loading JavaScript

We may see unsettled content for a brief period before showing the right design.

The best way to improve the situation is to reduce the amount of DOM manipulation on the initial load.

Also, we should specify the height and width of the pages in our HTML instead of JavaScript so that we don’t have to wait for JavaScript to load to set them.

Another way to deal with it is to mask the problem with CSS or JavaScript animations.

We can also block rendering until all content on the page has been loaded.

The offending JavaScript can be inlined and put beneath the affected DOM element.

This way, the code loads immediately when the element is loaded.

However, this is hard to maintain and should be used sparingly.

We can write:

<div class="fouc-element">
  <script>
    // ...
  </script>
  ...
</div>

to do that.

Conclusion

We can improve performance with various optimizations.