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++; 
      }));