jQuery：重複調用時重繪函數極其緩慢

我有一個名爲refreshHistory（）的方法，它基本讀取本地存儲的json列表（使用https://github.com/marcuswestin/store.js/），並按照它們的存儲順序填充列表。jQuery：重複調用時重繪函數極其緩慢

每次發生用戶操作時，都會調用此方法。但是隨着列表越來越大，它會拖慢瀏覽器爬行。

function refreshHistory() { 
    var records = typeof store.get('history') == "undefined" ? 0 : store.get('history').history; 
    ; 
    if (records == 0) { 
     $('#content #historyView').html('<i>history show up here in order.</i>'); 
    } else { 
     var xhistory = '<div id="history">'; 
     for (var i = 0; i < records.length; i++) { 
      var xaction = records[i] 
      xhistory += '<div id="action">' + (i + 1) + '. ' + '<b>' + xaction.action + "</b> " + xaction.caption + '<span class="delaction" id=' + i + ' data-stamp="' + xaction.msg + '" style="color:red;cursor:pointer;">' + '[remove]' + '</span></div>' 
     } 
     xhistory += "</div>" 

     $('#qtip-0-content #historyView').html(xhistory); 

    } 
}

來源

2014-10-28 user299709

我建議用你的問題的簡化版本創建一個[jsfiddle]（http://jsfiddle.com），這樣其他人可以給你更具體的反饋。 – OlliM 2014-10-28 10:44:55

上每一個事件渲染的一切是一個簡單的策略，這是很好的，但它確實碰到你所描述的性能問題。很難給出具體的建議，但你可以：

實現更詳細的渲染邏輯，其中只有新項目被渲染並添加到DOM。
使用ReactJs或Virtual DOM庫，它們允許您的代碼使用render everything模式，但通過執行所需的最低限度來更快地實現DOM的實際更新。

來源

2014-10-28 08:37:54 OlliM

真正做到這一點的唯一方法是以不同的方式實現它。

我一直在使用knockout.js，對此我非常滿意。基本上你寫了一個模板，庫處理DOM節點的變化，只更新需要的部分。你將需要學習如何略有不同的想法，但有一些偉大的tutorials可用。

也就是說，你可以嘗試的一個簡單的技巧是將選擇器移動到函數之外，以便它們只運行一次，而不是每次調用該函數。

爲了理智，我也會保留records變量相同的類型，無論.get('history')是否返回undefined。

var contentHistoryView = $('#content #historyView'); 
var qtipHistoryView = $('#qtip-0-content #historyView'); 
function refreshHistory() { 
    var records = typeof store.get('history') == "undefined" ? [] : store.get('history').history; 
    if (records.length) { 
     contentHistoryView.html('<i>history show up here in order.</i>'); 
    } else { 
     var xhistory = '<div id="history">'; 
     for (var i = 0; i < records.length; i++) { 
      var xaction = records[i] 
      xhistory += '<div id="action">' + (i + 1) + '. ' + '<b>' + xaction.action + "</b> " + xaction.caption + '<span class="delaction" id=' + i + ' data-stamp="' + xaction.msg + '" style="color:red;cursor:pointer;">' + '[remove]' + '</span></div>' 
     } 
     xhistory += "</div>" 

     qtipHistoryView.html(xhistory); 

    } 
}

我懷疑這會產生巨大的影響，因爲我懷疑大部分執行時間都花在循環中。

來源

2014-10-28 08:47:51 xec

jQuery：重複調用時重繪函數極其緩慢

回答

相關問題