CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Birrel
Birrel

Reputation: 4834

JavaScript, Do successive JS and AJAX functions slow page performance over time?

I would like to make a one-page website, where content is collected and presented to the user via AJAX calls. The user could, potentially, spend many hours (or even days) on the one single page, without ever reloading.

If I present all of the content within a single "main div", and regularly change the contents with something like:

$('#maindiv').html(... some content ...); // JQuery

will the page performance (data requests, div content loading, animations, etc) degrade over time?

Variables are cleaned up after use and content is not saved anywhere after it is replaced.

My initial thoughts are no the performance will not suffer, since the contents are replaced (opposed to appended and lengthened), but I cannot find anything to support or refute.

Upvotes: 1

Views: 94

Answers (1)

TeaCoder
TeaCoder

Reputation: 1977

While you can surely code your own solution using jQuery, I would highly recommend using a MV* framework for creating such a single page application. There are many popular ones like Angular, Ember, Backbone etc that make the process much more easier. React can also be a good view component.

The approach that you are taking will soon become very messy and lead to performance issues. Every time you replace the HTML using the .html(... some content ...) method, think what happens to the existing DOM nodes. What happens to all the attached event listeners and all the associated bindings between your JS code and DOM elements.

Upvotes: 2

Related Questions