Question

我需要显示一个巨大的表（包含数百条记录）。

该表由具有XmlHttpRequest调用的服务器获取。

XmlHttpRequest请求持续约2秒（字符串约为2MB）。

使用$('#divCont').html(htmlTableString);呈现表格持续约20秒，具体取决于网络浏览器。

$.ajax({
  url: "/getTable",
  success: function(data){
    $('#divCont').html(data);
  }
});

是否有任何建议可以缩短呈现htmlTableString的时间？

Answer 1

2秒2mb？那很快。您是在本地工作还是在正常部署的服务器上工作？

在你的位置，我会将请求分解为许多较小的请求。并使用appendChild和.setTimeout附加它们，以便浏览器不会锁定。

例如，代替锁定20秒而没有进展，你可以逐步进行追加，这样最终它可能需要80秒但是没有锁定。

Answer 2

你真的需要在一个范围内显示所有表值。如果没有，你可以把分页。因此，您可以一次获取所需的数据。

Answer 3

如果可以的话，限制它。 2MB真的很大。我认为这取决于您的计算机组件。

Answer 4

这个问题出现在大约9KB的网页上。您的2MB HTML字符串几乎要大228倍。

我认为20秒是非常合理的解析它，将其插入DOM并以图形方式呈现它。

相反，请考虑不要这样做。选择结果或其他内容。

Answer 5

无论您优化多少，表格渲染始终都是一个问题。 IE特别是在找到表结束标记之前不会呈现表。如果您没有使用任何客户端分页（TableSorter），那么我建议使用Div而不是使用Table。如果你需要使用表格，那么我会建议服务器和客户端分页的混合（客户端与页面中的数字....服务器使用下一批或类似的东西）

HTH

Answer 6

我认为唯一合理的解决方案是：

在JSON
使用DocumentFragment将其插入表格（
处理滚动事件并在用户需要时加载更多数据（滚动到表格的末尾）。

Answer 7

我喜欢将请求分解为许多较小的请求到客户端部分。

问题只是找到一种分割大字符串的智能方法（只需一行）使用appendChild和.setTimeout逐步将记录添加到表格中。

此代码总结了解决方案：

$.ajax({
        url: "myUrl",
        cache: true,
        async: true,
        success: function(data){
            setContenentInTable(data);
        }
});

function setContenentInTable(data){
var chunkLength             =   2500;
var chunkNum                =   Math.floor(data.length/chunkLength);
for(var i=0,i less chunkNum+1;i++){
     var contentChunk   =   iovContent.slice(start,stop);
     setTimeout(function(x){
         $('.myTable01').append(x);
     contentChunk, 300*i}
}

Answer 8

以json编码格式发送整个数据并使用html解析它。

在javascript中解析大量数据需要时间。所以将数据作为拆分的json代码发送。

JSON将节省大量内存。

如果您使用的是PHP，请使用json_encode（$ data）;

另外，为了优化数据加载，请将js元素添加到body标记的末尾。就在/身体之前。

<script src="mydata.js"></script>
</body>

在body的末尾添加它，使DOM可以填充。将它添加到head延迟DOM加载，直到加载了这个js。

使用.html（htmlString）的性能问题

8 个答案: