在IE中使用Javascript / jQuery管理大型数据集的最有效方法是什么？ [英] What's the most efficient way to manage large datasets with Javascript/jQuery in IE?

问题描述

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

I have a search that returns JSON, which I then transform into a HTML table in Javascript. It repeatedly calls the jQuery.append() method, once for each row. I have a modern machine, and the Firefox response time is acceptable. But in IE 8 it is unbearably slow.

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

I decided to move the transformation from data to HTML into the server-side PHP, changing the return type from JSON to HTML. Now, rather than calling the jQuery.append() time repeatedly, I call the jQuery.html() method once with the entire table. I noticed Firefox got faster, but IE got slower.

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

These results are anecdotal and I have not done any benchmarking, but the IE performance is very disappointing. Is there something I can do to speed up the manipulation of large amounts of data in IE or is it simply a bad idea to process very much data at once with AJAX/Javascript?

推荐答案

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

As others have mentioned, excessive DOM manipulation kills performance. Creating an HTML string using the aforementioned Array.join('') and setting the innerHTML of a container using the jQuery.html() method is orders of magnitude faster. Be wary of using jQuery.append(html) - this is equivalent to creating all the DOM nodes first and then inserting them!

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

Thing is, even if you optimize the creation of the page node tree, you're still going to hit a ceiling pretty fast with very large datasets. Browsers just can't handle such large and complex DOM trees. First thing you will see slowing down will be the interactions (animations, handlers, etc.) even if you use event delegation. If your dataset is truly large, you will need to do some sort of virtualization to only show what is visible in the viewport (this is what SlickGrid does - http://github.com/mleibman/slickgrid).

或者，您可以提高响应速度和交互时间通过分块你的DOM添加并在一个接一个的超时上执行它们之间的一些暂停让浏览器处理用户事件。

Alternatively, you can improve the responsiveness and "time to interactive" of your page by chunking your DOM additions and executing them on a timeout one after another with some pause in between to let the browser handle user events.

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

Other techniques include rendering the first page worth of data, allocating room for more, but only rendering it when the user starts scrolling towards it. This is what Facebook does.

这篇关于在IE中使用Javascript / jQuery管理大型数据集的最有效方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！