Question

我正在使用jquery和json对象准备一些动态html。但问题是，当我的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

你可以使用for循环而不是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(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++;
            }));

Answer 3

从使用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 4

尝试使用普通的jQuery.each循环替换for...in。使用jQuery.each会增加您不需要的开销。
不要在循环中连接字符串。相反，.push将它们放到数组变量上并使用.join('')在结尾处一次性构建字符串。
您可能需要将CreateLiWithSpans作为单独的函数取消，以便完全实现（2）。

使用json创建动态html花费了太多时间

4 个答案: