发布在：性能

在循环外追加

触碰 DOM 会产生成本。如果你要向 DOM 追加大量元素，你应该一次性全部追加，而不是一次追加一个。当在循环内追加元素时，这是一个常见问题。

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

一种常见技术是利用文档片段。在循环的每次迭代中，你将元素追加到片段而不是 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 的网站。此网站允许你对每种技术进行基准测试，并直观地看到它们在所有浏览器中的表现。