html运行时创建代码很慢

Question

我制作了一个电子表格 示例图像 http://www.jqwidgets.com/wp-content/uploads/2012/08/jquery-spreadsheet.png

这是我的总数据（3974 行）（我使用的是entitiy Mvc 4 c#/framework 4.5 存储过程）没有加入单个表，我使用的是 LOCALHOST）mssql 2014 express 但我非常等待（仅 html 创建）没有数据（平均 2 分钟仅加载）并且当我单击单元格（输入）等待 8 秒

3.794 行来自服务器的快速仅 html 创建慢

如何加快速度？如果不可能.. 或者你能给我推荐一个电子表格吗？ 或客户端缓存或mvc数据缓存哪个有用？ 谢谢

function GridEstimation() {

var estimationModel = GetEstimations();  3.974 ROWS
var GridEstimation = document.getElementById('GridEstimation');

var dynamicNav = "";
if (estimationModel != "undefined") {

    dynamicNav += '<div class="table-wrapper">';
    dynamicNav += '<div class="table-scroll">';
    dynamicNav += '<table class="tftable" border="1">';

24 船行

    dynamicNav += '<tr>'
    dynamicNav += '<th>Invoice Item</th>' 
    for (var i = 0; i < estimationModel.Vessels.length; i++) { 

        dynamicNav += '<th id=' + estimationModel.Vessels[i].VesselID + '>' + estimationModel.Vessels[i].VesselName + '</th>'

    }
    dynamicNav += '</tr>'

158 项（库存）行

    for (var m = 0; m < estimationModel.Items.length; m++) {

      dynamicNav += '<tr>';
        dynamicNav += '<td>' + estimationModel.Items[m].InvoiceItemName + '</td>';

3.792 单元格输入行

  for (var n = 0; n < estimationModel.Estimations.length; n++) {
            dynamicNav += '<div><input type="text" id=' + estimationModel.Estimations[n].EstimationID + '/></div>';

        }

        dynamicNav += '</tr>'
    }

    dynamicNav += '</tr>'
    dynamicNav += '</table>'
    dynamicNav += '</div>';
    dynamicNav += '</div>';
} 

$("#GridEstimation").append(dynamicNav);  

}

Answer 1

其中一个可能会非常缓慢的原因是您正在创建一个潜在的大型 HTML 字符串并将其部分连接起来。下面的例子可以大大改善这一点http://www.codeproject.com/Articles/12375/JavaScript-StringBuilder。

然后，更好的方法是逐步渲染 HTML（在 while 循环中），而不是在一个巨大的 HTML 字符串中一次全部渲染。