HTML 运行时创建代码非常慢

html runtime create code very slow

提问人:mustafa cansu 提问时间:2/27/2015 最后编辑:mustafa cansu 更新时间:2/27/2015 访问量:146

问:

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

这是我的总数据(3974 行)(我正在使用 entitiy Mvc 4 c# / framework 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);  

}

JavaScript HTML ASP.NET-MVC 缓存 客户端

评论

0赞 Chris Pietschmann 2/27/2015
您是否验证过 Javascript 代码是瓶颈,而不是某个地方的服务器端代码?此外,这是一个非常长的数据列表,您可以将其更改为使用服务器端分页,一次仅加载几个。
0赞 2/27/2015
您不能将那么多行加载到内存中,并期望它是优雅的。我会考虑从整体上看你的设计,或者考虑实现无限滚动或类似的东西。您需要考虑销毁不在屏幕上的 dom 对象。记忆是你的敌人

答:

0赞 Martin Zikmund 2/27/2015 #1

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

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

评论

0赞 mustafa cansu 2/27/2015
您好,谢谢大家,我想使用数据缓存,但不要使用我的方法参数,我想使用 VaryByParam 我该怎么办?[OutputCache(Duration = int.MaxValue, VaryByParam = “VesselID”)] GetVessels();
0赞 Martin Zikmund 2/27/2015
如果实际输出是在客户端上生成的,并且正如您提到的,服务器端不是性能问题的根源,那么您确实需要专注于 JavaScript 方面的事情,并确保在那里优化代码。此外,当大多数标记是由 JS 生成时,缓存输出也无济于事。