Javascript html运行时创建代码的速度非常慢

Javascript html运行时创建代码的速度非常慢,javascript,html,asp.net-mvc,caching,client-side,Javascript,Html,Asp.net Mvc,Caching,Client Side,我做了一个电子表格 示例图像 这是我的总数据3974行,我使用的是entitiy Mvc 4 c/framework 4.5存储过程无连接单表,我使用的是LOCALHOST mssql 2014 express 但我非常等待只有html创建无数据平均2分钟只加载,当我点击cellinput时等待8秒 3.794来自服务器的快速行仅html创建慢速 我怎样才能加快速度?如果不可能的话。。 或者你能给我推荐一份电子表格吗? 或者客户端缓存或者mvc数据缓存哪个有用? 多谢各位 function G

我做了一个电子表格 示例图像

这是我的总数据3974行,我使用的是entitiy Mvc 4 c/framework 4.5存储过程无连接单表,我使用的是LOCALHOST mssql 2014 express 但我非常等待只有html创建无数据平均2分钟只加载,当我点击cellinput时等待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排船舶

158个项目库存行

3.792单元格输入行


}其中一个原因是,您可能正在创建一个大的HTML字符串,并将其一部分一部分地连接起来。下面的示例可以大大改进这一点


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

您是否验证了Javascript代码是瓶颈,而不是服务器端代码?此外,这是一个非常长的数据列表,您可以将其更改为使用服务器端分页,一次只加载几行。您不能将那么多行加载到内存中,并期望它是优雅的。我会考虑全面地考虑你的设计,或者考虑实现无限卷轴或类似的东西。您需要考虑销毁屏幕上没有的dom对象。内存是你的敌人你好谢谢大家我想使用数据缓存但不要使用我的方法参数我想使用VaryByParam我该怎么办?[OutputCacheDuration=int.MaxValue,VaryByParam=VesselID]GetVessers;如果实际输出是在客户机上生成的,并且正如您所提到的,服务器端不是性能问题的根源,那么您确实需要将精力集中在JavaScript方面,并确保优化那里的代码。此外,当大部分标记由JS生成时,缓存输出也没有帮助。
    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>'
    for (var m = 0; m < estimationModel.Items.length; m++) {

      dynamicNav += '<tr>';
        dynamicNav += '<td>' + estimationModel.Items[m].InvoiceItemName + '</td>';
  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);