Question

我在一些代码中使用this for循环。此代码将“左数组”中存在的所有元素附加到表中，并为它们分配一个唯一的rowID，它正常工作。

问题：当“左”数组的长度为5000时，执行此循环大约需要9秒，但当“左”数组的长度为10000和15000时，需要27秒54分别为秒。我猜这是一个模糊的行为，时间应该随着迭代次数的增加而线性增加。如果有人能告诉我这个问题的原因和解决方案，我会很高兴。

提前致谢。 :)

$("body").append('<p id = "p1">table1</p>')
table = $('<table id="first-table">');
div = $('<div ></div>');
$(div).append(table);
$('body').append(div);

for (var rowID = 0, l = left.length; rowID < l; rowID++) {

    if (left[rowID] != null) {
        var tr = $('<tr>');
        table.append(tr);
        tr.append('<td class="cell" id="a' + rowID + '">' + left[rowID] + '</td>');
    }
}

Answer 1

单独追加N个元素会导致最多N reflow个。由于要添加的元素数量增加会降低性能。

您可以重构代码，在内存中创建DOM片段和节点，然后使用单个append()

//Createing Nodes in memory
var table = $('<table id="first-table">');
for (var rowID = 0, l = left.length; rowID < l; rowID++) {
    if (left[rowID] != null) {
        $('<tr>').append('<td class="cell" id="a' + rowID + '">' + left[rowID] + '</td>')
                 .appendTo(table);
    }
}

var div = $('<div ></div>').append(table);
var paragraph = $('<p id = "p1">table1</p>');

//Append to DOM     
$("body").append(paragraph.add(div))

好读What is DOM reflow?

javascript中for循环所用的时间随着迭代次数的增加呈指数级增长

1 个答案: