Question

我有一个返回JSON的搜索，然后我将其转换为Javascript中的HTML表格。它重复调用jQuery.append（）方法，每行一次。我有一台现代化的机器，Firefox的响应时间是可以接受的。但是在IE 8中它的速度令人难以忍受。

我决定将数据转换为HTML转换为服务器端PHP，将返回类型从JSON更改为HTML。现在，我不是反复调用jQuery.append（）时间，而是使用整个表调用jQuery.html（）方法一次。我注意到Firefox变得更快，但IE变慢了。

这些结果是轶事，我没有做任何基准测试，但IE的表现非常令人失望。我可以做些什么来加快IE中大量数据的操作，或者用AJAX / Javascript一次处理大量数据是一个坏主意吗？

Answer 1

正如其他人所提到的，过多的DOM操作会导致性能下降。使用前面提到的Array.join（''）创建HTML字符串并使用jQuery.html（）方法设置容器的innerHTML要快几个数量级。警惕使用jQuery.append（html） - 这相当于首先创建所有DOM节点然后插入它们！

事实是，即使您优化了页面节点树的创建，您仍然会使用非常大的数据集快速达到上限。浏览器无法处理如此庞大而复杂的DOM树。即使你使用事件委托，你会看到减慢的第一件事是交互（动画，处理程序等）。如果您的数据集非常大，则需要进行某种虚拟化以仅显示视口中可见的内容（这是SlickGrid的作用 - http://github.com/mleibman/slickgrid）。

或者，您可以通过分块添加DOM并在一个接一个的超时时间执行它们，并让浏览器处理用户事件，从而提高页面的响应性和“交互时间”。

其他技术包括渲染第一页的数据，为更多空间分配空间，但仅在用户开始向其滚动时才渲染它。这就是Facebook所做的。

Answer 2

我以前做过这个。由于每次添加后重绘/回流过程都会触发，因此所有DOM操作都会降低速度。

在客户端上将其构建为字符串，使用.html()将字符串插入DOM。

这对我来说非常成功，即使在IE6上也是如此。

Answer 3

多个DOM附加操作会破坏性能。而且你也可能遇到字符串不变性的问题。

保持数据尽可能小（JSON数组很好），并在脚本中构建html，避免javascript字符串连接问题。将html值附加到数组，然后再加入数组。一旦创建了html，就会附加一个DOM。例如

var builder = [];

//Inside a loop
builder.push('<tr><td>');
builder.push(json.value);
builder.push('</tr>');

//Outside the loop
$('div').append(builder.join(''));

Answer 4

我高度推荐jQuery templating plugin,

我一直在使用John Resig的微模板功能几个月。模板插件就是它的演变。我整年都在写作和介绍：）

My Blog

在IE中使用Javascript / jQuery管理大型数据集的最有效方法是什么？

4 个答案: