发布于: 性能

在循环外部追加

操作 DOM 是有代价的。如果您要向 DOM 追加大量元素，您会希望一次性追加所有元素，而不是一个接一个地追加。当在循环中追加元素时，这是一个常见的问题。

1
2
3
4
5
6
7
 
$.each( myArray, function( i, item ) {
 
    var newListItem = "<li>" + item + "</li>";
 
    $( "#ballers" ).append( newListItem );
 
});

一种常见的技术是利用文档片段（document fragment）。在循环的每次迭代中，您将元素追加到片段而不是 DOM 元素。循环结束后，只需将片段追加到 DOM 元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
var frag = document.createDocumentFragment();
 
$.each( myArray, function( i, item ) {
 
    var newListItem = document.createElement( "li" );
    var itemText = document.createTextNode( item );
 
    newListItem.appendChild( itemText );
 
    frag.appendChild( newListItem );
 
});
 
$( "#ballers" )[ 0 ].appendChild( frag );

另一种简单的技术是在循环的每次迭代中构建一个字符串。循环结束后，只需将 DOM 元素的 HTML 设置为该字符串。

1
2
3
4
5
6
7
8
9
 
var myHtml = "";
 
$.each( myArray, function( i, item ) {
 
    myHtml += "<li>" + item + "</li>";
 
});
 
$( "#ballers" ).html( myHtml );

当然还有其他技术您可以尝试。测试这些性能的一个好方法是通过一个名为 jsperf 的网站。该网站允许您对每种技术进行基准测试，并直观地查看它在所有浏览器上的表现。