Question

我正在准备一些动态的html与jQuery和json对象。但问题是，当我的JSON对象有大约1500行时，需要加载时间。

有没有办法更快地加载东西。

部分代码。

 $(jQuery.each(jsonObject.AvailableColumns, function (i, l) { 
       if (type == "manual") { 
        innerList1 += '<li newText="" valueFormat="' + l.ValueFormat + '" scaleID="' + l.ScaleID + '" scaleType="' + l.ScaleType + '" hasWeights="' + l.HasWeights + '" customColumnType="' + l.CustomColumnType + '" class="" id="li_' + controlId + '"><span id="span_' + controlId + '" title = "' + l.QuestionText + '">' + getDisplayString(l.QuestionText) + '</span><a class="actionLeft"></a></li>'; 
       } 
       else if (type = "exportall") { 
        innerList2 += CreateLiWithSpans('li_' + controlId, l.QuestionText, true, false, l.ScaleID, l.ScaleType, l.HasWeights, l.CustomColumnType, l.ValueFormat); 
       } 
       controlId++; 
      })); 
    $("#itemList").html(innerlist1); 

编辑：createliwithspan方法

function CreateLiWithSpans(id, html, isLeft, isAddAll, scaleID, scaleType, hasWeights, customColumnType, valueFormat, newText) { 
    var ancClass = isLeft ? 'actionRight' : 'actionLeft'; 
    var liObject = ""; 

    if (newText == null) { 
     newText = ""; 
    } 
    if (isLeft) { 
     liObject = '<li newtext="' + newText + '" valueFormat="' + valueFormat + '" scaleID="' + scaleID + '" scaleType="' + scaleType + '" hasWeights="' + hasWeights + '" customColumnType="' + customColumnType + '" class="" id="' + id + '"><span id="span_' + id + '" title = "' + html + '">' + getDisplayString(html) + '</span><span style="margin:0 10px 0 20px;pagging:0"><input title = "' + (newText == "" ? html : newText) + '" type="text" id="' + id + 'displayText" value="' + (newText == "" ? html : newText) + '" /><span style="color:Red; width:100%;" id="' + id + 'displayTextError"></span></span><span style="float:left">' + CreateDropDown('ddl_' + id, valueFormat, hasWeights) + '</span><a class="' + ancClass + '"></a></li>'; 
    } 
    else { 
     liObject = '<li newtext="' + newText + '" valueFormat="' + valueFormat + '" scaleID="' + scaleID + '" scaleType="' + scaleType + '" hasWeights="' + hasWeights + '" customColumnType="' + customColumnType + '" class="" id="' + id + '"><span id="span_' + id + '" title = "' + html + '">' + getDisplayString(html) + '</span><a class="' + ancClass + '"></a></li>'; 
    } 
    return liObject; 
} 

Answer 1

你可以使用循环，而不是jQuery.each，那会更快。循环之前存储ITEMCOUNT，并使用：

itemCount = jsonData.items.length; 
for(var i = 0; i < itemCount; i++) { 
... 

您还可以使用使用数组，而不是字符串连接，就像这样：

var innerList = []; 
... // inside the loop 
innerList.push(CreateLiWithSpans('li_' + controlId, l.QuestionText, true, false, l.ScaleID, l.ScaleType, l.HasWeights, l.CustomColumnType, l.ValueFormat)); 
... // after the loop 
$("#itemList").html(innerList.join('')); 

这将是IE速度更快，我不确定其他js引擎。

这两种方法不会产生显着差异，因此您应该尝试从json实施客户端分页。 （不是通过隐藏和显示div，只需在DOM中渲染可见页面）。

Answer 2

从使用jQuery.each转换为标准的javascript for循环应该加快一点。请确保您的长度保存到变量这样虽然：

for(var i = 0, len = jsonObject.AvailableColumns.length; i < len; i++){ 
    var l = jsonObject.AvailableColumns[i]; 
    // Continue with rest of code 
} 

可能不会大幅增加，但每一个小小的帮助。

也尝试降低您所做的函数调用次数，因为这些函数调用会增加开销（通常不是问题，但在大循环中它可以提供帮助）。除非代码在函数之间共享，否则请尝试使用内联代码并查看加速代码的速度。

Answer 3

1. 尝试用普通旧for...in循环代替jQuery.each。使用jQuery.each会增加您不需要的开销。
2. 不要连接循环内的字符串。而是将.push转换为数组变量，并使用.join('')在最后一次构建字符串。
3. 为了完全实现（2），您可能需要将CreateLiWithSpans作为单独的函数来消除。

Answer 4

而不是等待循环结束追加数据，为什么不在处理它时主动追加数据。这将允许用户获得即时反馈，而不是等待整个事情处理。除此之外，我会坚持我的原始评论来分页数据。

$(jQuery.each(jsonObject.AvailableColumns, function (i, l) { 
       if (type == "manual") { 
        $("#itemList").append('<li newText="" valueFormat="' + l.ValueFormat + '" scaleID="' + l.ScaleID + '" scaleType="' + l.ScaleType + '" hasWeights="' + l.HasWeights + '" customColumnType="' + l.CustomColumnType + '" class="" id="li_' + controlId + '"><span id="span_' + controlId + '" title = "' + l.QuestionText + '">' + getDisplayString(l.QuestionText) + '</span><a class="actionLeft"></a></li>'); 
       } 
       else if (type = "exportall") { 
        $("#itemList2").append(CreateLiWithSpans('li_' + controlId, l.QuestionText, true, false, l.ScaleID, l.ScaleType, l.HasWeights, l.CustomColumnType, l.ValueFormat)); 
       } 
       controlId++; 
      }));