Question

I am creating an application where when a tab is clicked its content is loaded via ajax. The reason for this is to speed up the initial page load, and not to load unnecessary tab content. The tabs contain form items, where values can be changed.

To prevent the data from being lost, When a tab is loaded I am giving it an extra class of “ajaxed”. When the tabs are clicked if the class “ajaxed” does not exist, then the content is loaded via ajax, otherwise the content previously loaded is simply presented to the user.

Quesiton:
Does caching lots of HTML in the dom slow down performance?
Is this bad practice? This applies to infinite scroll and other types of pages where you simply keep appending more and more html. What are the drawbacks of this approach?

Thanks in advance.

Answer 1

it depends on the area of your application. It surely does not hurt to cache the content of some tabs in the DOM providing that the number of dom elements in those tabs is somewhat limited.

It is a fact that scripts that use selectors to find elements in your DOM will be slower the more elements there are. This will be even more visible to your visitors when they use a browser with a crappy JavaScript engine like in older versions of Internet Explorer. Also the memory consumption will increase with the number of DOM elements. So you don’t want to add an infinite number of items to your DOM.

For infinite scroll a good practice would be to unload/remove items when you scroll down too far and re-add them when you scroll up again.