HTML 运行时创建代码非常慢

html runtime create code very slow

本文关键字:非常 代码 创建 运行时 HTML      更新时间:2024-06-29

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

这是我的总数据(3974 行((我正在使用完整的 Mvc 4 c#/框架 4.5 存储过程(没有连接单个表,我正在使用 LOCALHOST( MSSQL 2014 快递但我非常等待(只有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);  

}

原因

之一,这可能非常缓慢,因为您可能正在创建一个大的 HTML 字符串并逐部分连接它。以下示例可以极大地改善此 http://www.codeproject.com/Articles/12375/JavaScript-StringBuilder。

更好的方法是逐渐呈现 HTML(在 while 循环中(,而不是一次在一个巨大的 HTML 字符串中呈现。