JQuery Caching Ajax Requests in Dom + Performance

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.

Answer 2

Your approach is ok. You can't minimize memory usage for appended dom except to remove it from parent element.

Second part of your concern, regarding infinite scroll, there is a lot of philosophy but point is to cache only enough data to give flawless scrolling experience. But you need to "destroy" previously created dom elments for data representation which is, say, "too far away".

Answer 3

The obvious answer to a general question like this is "it depends". If you are trying to solve a known performance problem, this may be an appropriate solution. Delaying the loading of content can make a website more responsive to users. But the more content loaded into a page, the slower the dom will be, naturally. So an obvious alternative approach is to use separate pages (or page "sections") for each tab. That way, only the visible content is ever loaded at a time. Ajax could be used to render partial content. And remember, both the browser and the server will be caching content too and so additional caching, or lazy loading strategies may be unnecessary. But there are always trade-offs, and so it depends on the nature of the problem you are trying to solve (different solutions will be required in different website scenarios). Maintainability may be another factor in deciding how to partition/load page content.

Answer 4

Though not related to your question, you lose SEO with this approach because you don't have unique urls for each piece of content. If your site is internal, this may not be an issue.