通过ajax填充表格非常慢答案

【问题标题】：Populating a table by ajax is very slow通过ajax填充表格非常慢
【发布时间】：2010-09-15 14:48:36
【问题描述】：

我编写了一个以 json 格式返回一些数据的 Web 服务。为了在表格中显示这个，我使用了 datatables jquery 插件：

for(var i=0;i<results.length;i++){
       myTable.fnAddData( [
       "<input name='codeSearched' type='radio' value='"+results[i].ID+"' />",
       "<span id='code_"+results[i].ID+"'>"+ results[i].code+"</>",
       results[i].description ] ,true);
}

这个 javascript 似乎会杀死浏览器。（在 Firefox 上 20 多秒，只有几千行）。通过将服务器端呈现为 html 片段并直接插入到 dom 中，我已经将类似数量的数据加载到数据表中，速度提高了几个数量级。

您能推荐一种两全其美的方法吗？（即，调用一个以开放结构化格式提供数据的 ajax Web 服务，同时还能快速解析和呈现？

感谢您的任何建议

【问题讨论】：

您一次显示数千行？那个疯子。并且使用 javascript 来创建一个 dom 结构将比让服务器端应用程序只呈现 html 慢得多。
不显示，但是是的，它们需要在 dom 中才能使数据表分页和搜索客户端。
如你所说，html 片段更快（更简单），可能不值得头疼......
为什么要在客户端做分页和搜索？在服务器上不是更快吗？您可以在客户端上仅显示结果的当前页面。如果需要更多数据，请返回数据库。

标签： javascript html ajax json xhtml

【解决方案1】：

为什么不尝试将最后一个参数设置为“false”？它应该运行得更快，但用户必须等到表格填充完毕。

如果它足够快，您可能希望使其更具交互性，也许您可以将参数设置为“false”，但每 10 或 100 条记录设置为“true”以允许重绘表格。

填写数千个单选按钮列表的原因超出了我的理解......这听起来不像是一个好的用户界面实践，但你必须有你的理由。

祝你好运！

路易斯

【讨论】：

【解决方案2】：

您将希望获得一些时间信息，以了解您的电话回复的速度。

我有两种方法，一种是使用 firebug 来查看它需要多长时间，另一种是在我的通话中设置时间，这样我就可以看到从我开始通话到我真正完成通话的时间.

如果这是可以接受的，那么构建表就是问题所在。

你会想看看这篇文章，以确保你的技术不会在时间上杀死你，因为使用 DOM 函数和 innerHTML 之间存在不同。

http://www.quirksmode.org/dom/innerhtml.html

下一个问题是，如果您尝试完全构建表格，您会发现浏览器在您完成之前不会显示它，这可能是一个杀手。

所以，我过去所做的就是将它分段构建。所以，我构建了大概 100 行，然后使用 setTimeout 以便浏览器可以显示，然后构建下一批，直到完成。

这样用户可以快速看到表格的第一部分，并且应该在他们需要构建整个表格之前完成（例如，如果他们需要查看底行）。

一次构建多少行是用户需求和性能之间的权衡。

【讨论】：

是的，我有萤火虫，ajax 调用只需要大约 1 秒。因此，您认为唯一的方法是重写 javascript 以分块呈现表格？
您需要确保您的构建表的调用不会给您带来问题，然后，作为最后一步，我发现分块构建是避免等待很多秒的唯一真正选择为表。获取数字，以便在优化之前了解每个部分花费了多少时间。