使用jQuery加载大量数据

Question

我有一个返回数据的Web服务，数据集相当大，可能有600行，每行20列。在Jquery代码中，将这些数据加载到HTML表格中的最快，最有效的方法是什么？

我尝试通过循环遍历返回的数据并在字符串内创建表格DOM来创建表格HTML，但循环部分非常缓慢。我听说过Jquery模板，但我不确定这种技术是否足够快速处理大量数据...

谢谢

- sarsnake

Answer 1

您是否可以更改Web服务或有另一个服务调用它并解析数据服务器端并返回HTML？在客户端处理JSON将成为瓶颈。如果您可以让服务将所需的HTML返回给您，那么在客户端上只需使用element.html(data)即可。 编辑：已经在这里详细讨论了返回JSON或HTML以及各自的利弊：1, 2, 3, 4, 5。请注意保留HTML标签。

- v64

---

处理已处理的数据是个好主意，但仍需对数据量做些处理。 - Xaqron

Answer 2

这似乎是一个设计问题。一次加载600 x 20个数据项并不是一个好主意。请考虑像掌上电脑或TC（瘦客户机）这样系统资源较低的客户端访问此类页面会受到影响。

您需要缓存Web服务数据，并根据用户操作以块状方式加载到客户端浏览器中。您可以使用一些Ajax控件来实现。

- Xaqron

---

谢谢，但我想避免使用微软的Ajax。我坚持使用Jquery的简洁方法。你的想法基本上是：“当用户向下滚动”时，我加载更多数据吗？ - sarsnake

正如v64所说，在服务器端渲染数据并返回HTML是一个好主意，但仍然操纵大型数据对象模型（DOM）会消耗CPU资源。个人认为在第一步就要有良好的设计，而不是好的技术。 - Xaqron

延迟不在DOM中，而是在简单的Javascript循环中。我只有一次接触DOM：$("#tableDiv").html(tableHtmlString); 当我循环处理600行数据来构建tableHtmlString时，就会出现延迟。 - sarsnake

所以你正在进行一些CPU密集型的字符串操作。也许在构建表时使用的函数进行修订可以提高性能。 - Xaqron

只需将字符串附加到tableHtml变量中，IE（IE7）的延迟最糟糕（惊讶）。对于660行和14列，它需要15秒钟。 - sarsnake

15秒的时间已经很长了，但660秒更多。没有代码看不出来。你能给一个演示链接吗？ - Xaqron

Answer 3

如果您的目标是让用户尽可能快地与数据进行交互，那么您可能需要考虑类似于无限滚动（也称为连续滚动）模式的东西，这样您可以根据用户的滚动构建网格，而不是花费整个时间渲染网格。

一些链接：

http://www.infinite-scroll.com/

http://net.tutsplus.com/tutorials/javascript-ajax/how-to-create-an-infinite-scroll-web-gallery/

- Jaime

Answer 4

我认为这里可能最好使用JSON DB... 你可以编写一个服务器端页面，以json db格式的数据响应几行... 然后使用自己的ajax代码加载行并在您选择的显示模型中处理它们，例如使用您自己的<table>和"overflow:auto;"添加行到该表中的块中... 或者使用已经建议的“无限滚动”之类的东西。

- user368191