No Time To Wait

As everyone knows, if it doesn’t come back instantaneously or almost instantaneously, a user will probably navigate away from a page. This is why building in function to load content from HTML and CSS quickly is a smart move. With a javascript function like DOMContentLoaded we wait to load some more complex features for the user after the web application has bought some time by giving some content, even if it is just a waiting page or an incomplete page. It is essential to pair down the length of time that a user needs to wait for the content to load.

While developers need to keep their eyes on the time it takes to load, it is tempting to use other functions like node.innerHTML = ` ` to build out a website. Here is a simple comparison of why taking a few more minutes to build the functionality will save your user a lot of time — and keep your users on the page.

Taking the simple example of adding an unordered list (‘ul’) to a specific ‘div’ with javascript, we can see how time adds up. This will compare using a template literal to creating elements with commands.

The objective is simple enough; the website needs to generate the unordered list. However, when doing this once, it will be indistinguishable for the user if the list is created with a template literal or through creating and appending elements on the back end. If we expand the ask to run the function 1000 times, to append 1000 unordered lists of 21 li elements with a p element in each with the text, This is inside ‘P’ we find a vast difference. The difference will make you want to navigate away out of annoyance. The difference is astronomical.

To compare the two ways, each was called the same way and measured with console.time(‘concatenation’) and a start and end time with a little math.

Using the innerHTML configuration and typing in a template literal, the process takes 46686.496826171875 ms.

However, using the commands to create and append the elements one by one, the process takes 60.55712890625 ms.

Although the innerHTML way of populating the page through javascript takes a little shorter for the developer, the load-time is 778 times longer! The “innerHTML +=” rebuilds all elements inside the parent element, in this case it is a <div>. However, using “append” or “appendChild” does not rebuild, thus the process is a lot faster.

Although one will probably say something like, this seems a bit absurd, when will I ever need to print something 1000 times? Nevertheless, throughout your code, using innerHTML several times adds up, as we can see. The simple fact is that as developers, we want to cut out as much as we can to make it simple on the backend; nevertheless, it is not always good to take a shortcut simply because it is available.

Some time on the backend makes the user’s experience much better. Although operations such as innerHTML and the like are tempting to use with interpolation and literals, these can prove detrimental to the user’s experience on the front end.