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

我有一个返回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(''); builder.push(json.value); builder.push(''); //Outside the loop $('div').append(builder.join('')); 

Answer 4

我非常推荐jQuery模板插件，

我一直在使用John Resig的微模板function几个月。 模板插件就是它的演变。 我整年都在写作和展示:)

我的博客