Save or destroy data items / DOM? Which requires more resources?

Question

I am developing more and more high-level applications using JavaScript / jQuery. I tried to learn more about JavaScript and dive into some of the more complex features. I just read an article on memory leak when I read this section of the article.

JavaScript is a garbage collection, meaning that memory is allocated to objects when they are created and restored by the browser when there are no more links to them. Although there is nothing wrong with the JavaScript garbage collection mechanism, this contradicts the way some browsers handle memory allocation and recovery for DOM objects.

It made me think about some of my coding habits. For some time, I was very focused on minimizing the number of requests that I send to the server, which I consider to be just good practice. But I wonder if sometimes I haven’t gone too far. I am very unaware of any performance issues / bottlenecks that come with the JavaScript language.

Example

I recently created an application for managing a towing company. I used the jQuery UI dialog box widget and populated the datagrid with specific ticket data. Now it sounds very simple on the surface ... but there are a lot of them.

(and now for the question ... drum please ...)

I am wondering what are the pros and cons for each of the following options.

1) Make only one request for this ticket and save it permanently in the DOM . Just showing / hiding the modal window, this means that only one request is sent per ticket.

2) Fulfill the request every time the ticket is open and destroys it when it is closed.

---

My natural tendency was to store tickets in the DOM , but I am worried that this will eventually start to punish a ton of memory if the application lasts a long time without being reset (which will).

I'm really just looking for the pros and cons for both of these options (or something neat that I haven't even heard of = P).

Answer 1

The solution here depends on the specifics of your problem, since the answer "right" will vary depending on the length of time, the page remains open, the size of the DOM elements, and a delay request. Here are a few more things to keep in mind:

• Keep only the newest n items in the cache. This works well if you can most likely re-render items in a short amount of time.
• Store data for each element instead of the DOM element and restore the DOM on each display.
• Use HTML5 storage to store data instead of the DOM or variable storage. This has the added benefit that data can be stored in page requests.

Any caching strategy should consider when it is necessary to invalidate the cache and re-request updated data. Depending on your strategy, you will have to handle conflicts arising from multiple editors.

The best way is to start using the simplest method and add complexity to increase speed only where necessary.

Answer 2

The third way should be to store the data associated with the ticket in JS, and create and destroy DOM nodes when the modal window is called / rejected (jQuery templates can be a natural solution here.)

However, the main reason you avoid network traffic seems to be the user interface (the network is slower than RAM, always). But this experience may not actually deteriorate, making a request every time, if that is what user intuition involves loading data.

Answer 3

I would say number 2 would be better. Because if the ticket changes after it is opened, this change will appear the second time the ticket is opened.

Answer 4

One of the important factors is the number of redraws / recounts that are started for manipulating the DOM. It is much more efficient to create content changes and insert them at a time than to do it gradually, since each increment causes redrawing / payment.

See: http://www.youtube.com/watch?v=AKZ2fj8155I for a better understanding of this.