在循环外使用 append
Prev Chapter 9. 性能调优的最佳实践 Next

在循环外使用 append

进行 DOM 操作是有代价的,如果需要往 DOM 中添加大量元素, 你应该一次批量完成,而不是一次一个。

// 别这样...
$.each(myArray, function(i, item) {
   var newListItem = '<li>' + item + '</li>';
   $('#ballers').append(newListItem);
});

// 好的做法是这样的
var frag = document.createDocumentFragment();

$.each(myArray, function(i, item) {
    var newListItem = '<li>' + item + '</li>';
    frag.appendChild(newListItem);
});
$('#ballers')[0].appendChild(frag);

// 或者这样的
var myHtml = '';

$.each(myArray, function(i, item) {
    html += '<li>' + item + '</li>';
});
$('#ballers').html(myHtml);

Copyright Rebecca Murphey, released under the Creative Commons Attribution-Share Alike 3.0 United States license.


Prev Up Next
Chapter 9. 性能调优的最佳实践 Home 保持 DRY