爲什麼要jQuery分離提高效率？

對於AJAX結果處理：爲什麼要jQuery分離提高效率？

$('.update-flight-status').on('click', function() { 
    $.getJSON('/status', function(result) { 
    var statusElements = $.map(result, function(status, index) { 
     var listItem = $('<li></li>'); 
     $('<h3>'+status.name+'</h3>').appendTo(listItem); 
     $('<p>'+status.status+'</p>').appendTo(listItem); 
     return listItem; 
    }); 
$('.status-list').html(statusElements); });

AND

$('.update-flight-status').on('click', function() { 
    $.getJSON('/status', function(result) { 
    var statusElements = $.map(result, function(status, index) { 
     var listItem = $('<li></li>'); 
     $('<h3>'+status.name+'</h3>').appendTo(listItem); 
     $('<p>'+status.status+'</p>').appendTo(listItem); 
     return listItem; 
    }); 
    $('.status-list').detach() 
        .html(statusElements) 
        .appendTo('.status'); 
    }); 
});

爲什麼第二示例中，其中，「分離」時，是比第一個更有效率？

來源

2014-03-25 noooooooob

是嗎？ ........ –

@FelixKling我正在做一個來自codeschool.com的教程 – noooooooob

jquery detach與remove相同，只是它通過data或事件處理函數將jQuery特定的賦值保存到該節點。當您計劃將節點重新附加到DOM中的另一個點時，此方法將派上用場。

在第一個版本，你真的不能告訴如果status-list是status的孩子，但在任何情況下，你是不是刪除節點，所以這樣的東西DATAS，事件處理程序，分配類，等...請保持。

在第二個版本中，您從DOM中刪除status-list，然後修改它，然後重新附加。我假設在同一個地方（但缺少代碼，這只是一個瘋狂的猜測）我會說它實際上是SLOWER比第一種情況，因爲第一種情況只是修改HTML內容而不打擾分離/重新附加任何東西。

其中detach將提高效率的情況是，如果您刪除節點，並已高度定製，添加了類，數據等..然後重新接通別處，與刪除節點，重新創建，重新分配所有東西等等。

來源

2014-03-25 01:15:41 rupps

當您特別需要移動元素位置時，分離僅僅是有用且高效的，或者當一次只能看到一個元素時，可以防止渲染1000個項目。

您的示例不會使分離看起來有效，它看起來好像該元素從一開始就被錯誤定位。

來源

2014-03-25 01:15:28 Cyassin

爲什麼要jQuery分離提高效率？

回答

相關問題