Updating gigantic HTML table with ajax

问题

Have a table with 2000+ rows and I need to have a single div on each row updated periodically. I hoped to update every 10 seconds, but the page becomes quite sluggish.

The server has 32gb RAM and my laptop has 8gb RAM, both have at least two quad cores.

Here's the div & update call:

<div id='div_$id' name='div_$id'></div>

<script language='javascript'>
    new Ajax.PeriodicalUpdater('div_$id', 'upd.php',{ 
       method: 'post', 
       frequency: 10, 
       decay: 1, 
       parameters: {id:'$id'}}
    );
</script>

I'm using the latest version of Prototype (1.7.0.0). Is there a faster, better way of doing this, or am I going to be forced to roll back the frequency to a minute or more?

回答1:

There are two possible solutions:

Do not use bulk update. Retrieve updated HTML content, and compare two DOM subtrees: current and updated. Do as small changes as possible and only when differences found - text node changed, element inserted/removed. Look at code http://javascripts.svn.sourceforge.net/viewvc/javascripts/javascripts/js.prototype-extensions/js/extensions/element.js?view=markup - function updateSmoothly at the end of file. Each element will have new method Element#updateSmoothly(content), then you can pass additional insertion option to updater:
```
new Ajax.PeriodicalUpdater('div_$id', 'upd.php', { 
  method: 'post', 
  frequency: 10, 
  decay: 1, 
  parameters: {id:'$id'},
  insertion: function(receiver, responseText) {
    receiver.updateSmoothly(responseText);
  }
});
```
This code worked in IE8 updating table with ~1300 rows, and UI was still more or less responsive (CPU Core 2 Duo, RAM 3Gb, OS Vista Home).
Major optimization is possible with use of something similar to endless scroll technique. UI user anyway can't see all 2000+ rows simultaneously on the screen - the biggest part of the table is off the screen. Why you need to download and update something what isn't even visible? Why you need to have in DOM something invisible? Just track which part of the table is currently visible and request from server updates for this only part. Delete rows when they going off the screen and load new rows when they should become visible.

来源：https://stackoverflow.com/questions/13013900/updating-gigantic-html-table-with-ajax

标签

ajax

optimization

prototypejs

updates