使用Ajax更新巨大的HTML表

Question

有一个带有2000 行的表，我需要在每行上有一个DIV定期更新。我希望每10秒更新一次，但是页面变得非常缓慢。

服务器具有32GB RAM，我的笔记本电脑具有8GB RAM，都至少有两个四核心。

这是Div＆amp;更新电话：

<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>

我正在使用最新版本的原型（1.7.0.0）。是否有一种更快，更好的方法来做到这一点？

Answer 1

有两个可能的解决方案：

1. 请勿使用批量更新。检索更新的HTML内容，并比较两个DOM子树：当前和更新。进行尽可能小的更改，并且仅在发现差异时才进行 - 更改文本节点，插入/删除元素。查看代码http://javascripts.svn.sourceforge.net/viewvc/javascripts/javascripts/js.prototype-extensions/js/extensions/extensions/extensions/element.js?view=markup-在文件的终结中函数mothly在文件的结尾上更新。每个元素将具有新方法Element#updateSmoothly(content)，然后您可以将其他insertion选项传递给更新：

   new Ajax.PeriodicalUpdater('div_$id', 'upd.php', { 
     method: 'post', 
     frequency: 10, 
     decay: 1, 
     parameters: {id:'$id'},
     insertion: function(receiver, responseText) {
       receiver.updateSmoothly(responseText);
     }
   });
   

   此代码在IE8更新表中使用了〜1300行，UI或多或少响应（CPU Core 2 Duo，RAM 3GB，OSVISTA HOME）。

2. 使用类似于无尽的滚动技术的东西，可以进行重大优化。无论如何，UI用户无法在屏幕上同时看到所有2000 行 - 表的最大部分是在屏幕上。为什么您需要下载和更新某些内容，甚至不可见？为什么您需要在DOM中有一些看不见的东西？只需跟踪当前可见表的哪一部分，并仅此部分从服务器更新中请求。当它们从屏幕上删除行并在应该看到新行时删除行。