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

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

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

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

使用

$（'#divCont'）.html（htmlTableString）呈现表
持续约20秒，具体取决于web浏览器

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

有没有建议缩短呈现
htmlTableString
的时间？
您真的需要在一次拉伸中显示所有表值吗。如果没有，您可以设置分页。因此，您可以一次获取所需的数据计数。
2mb，只需2秒钟？那相当快。您是在本地工作还是在正常部署的服务器上工作

在你的位置上，我会把这个请求分成许多小的请求。并使用appendChild和.setTimeout追加它们，以便浏览器不会锁定

例如，您可以进行渐进式追加，而不是锁定20秒而没有任何进展，这样最终可能需要80秒，但不会锁定
 如果可以，就限制它。2MB真的很大。我认为这取决于您的计算机组件。
这个问题位于一个大约9KB的网页上。您的2MB HTML字符串几乎要大228倍

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

相反，请考虑不要这样做。页面显示结果等等。
无论您优化了多少，表格呈现始终是一个问题。IE在找到表结束标记之前不会呈现表。如果您没有使用任何客户端分页（TableSorter），那么我建议使用Div而不是Table。如果您需要使用表，那么我建议使用服务器端和客户端分页的混合方式（在页面中包含数字的客户端…服务器使用下一批或类似的方式）

HTH
以json编码的格式发送整个数据，并使用html对其进行解析

用javascript解析那么多数据需要时间。因此，将数据作为拆分的json代码发送

JSON将节省大量内存

如果您使用的是
PHP
json\u encode（$data）

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

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



将其添加到
正文
的末尾，可以填充DOM。将其添加到
头部
会延迟DOM加载，直到加载完此js。
我认为唯一合理的解决方案是：


在JSON中按块抓取数据（例如每请求100行）
在可能的情况下，使用DocumentFragment将其插入表中
处理滚动事件并在用户需要时加载更多数据（滚动到表的末尾）
我喜欢将请求分解为许多较小的请求，并将其分解为客户端

问题只是找到一种聪明的方法来拆分一个大字符串（只有一行）
分块，以便使用
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}
}
$.ajax({
url:“我的url”，
是的，
async:true，
成功：功能（数据）{
SetContentintable（数据）；
}
});
函数setContentintable（数据）{
var-chunkLength=2500；
var chunkNum=Math.floor（data.length/chunkLength）；
对于（var i=0，i小于chunkNum+1；i++）{
var contentChunk=iovContent.slice（开始、停止）；
设置超时（函数（x）{
$（'.myTable01'）。追加（x）；
contentChunk，300*i}
}
fast？什么是fast？你有1M internet吗？2mb ajax调用只需2秒钟？真的吗？服务器需要从数据库中获取数据，对吗？它是表格数据。而不是像那样提供的图像。@genesis:8MBit/s还不错。在典型的web部署中，你不会想到它。别忘了服务器处理开销，这可能是响应速度的瓶颈。@Tomalak：我知道不是。但我认为服务器只是踢出一些数据，因为我没有读第一行-我需要显示一个巨大的表“使用html解析”？呃，嗯？“JSON将节省大量内存”怎么做？您仍然在向DOM添加；您只是添加了一个额外的步骤，这将花费更多的时间。JSON将节省内存。不需要传输xhtml标记名。它将只是一个深度为3的树，必须进行解析。解析还涉及到您如何有效地使用对目标节点的引用。我希望看到一些benchmarks.那么深度3是从哪里来的呢？如果我的数字错了，我很抱歉..第一级表-s分成n个数字；第二级表-tr；第三级表-tr的td…；结果将是一个3d数组…表[0][0][0]将给出td的第一个内部HTML。