在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一次处理大量数据是一个坏主意吗？

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

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

或者,您可以通过分块添加DOM并在一个接一个的超时时间执行它们来改善页面的响应性和"交互时间",并在两者之间暂停以让浏览器处理用户事件.

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