集合中的主幹（客戶端）過濾器性能問題

我正在從骨幹集合中的服務器加載一些初始數據。我設置了一個搜索輸入，它啓動對服務器的AJAX調用，並在每個鍵盤上返回解析的JSON。集合中的主幹（客戶端）過濾器性能問題

我想搜索是在客戶端而不是隻。到目前爲止，我已經設置了驗證碼（功能發生在KEYUP在＃搜尋輸入）：

待辦事項是一個集backbone.marionette

$('.content-search').on('keyup', '#search', function(e){ 
    e.preventDefault(); 
    var search = $('#search').val().toLowerCase(); 
    todos.update(initialData.todos); 
    var json = todos.toJSON(); 
    var filteredJSON = filterJSON(json, search); 
    dcis.update(filteredJSON); 
} 

function filterJSON(arr, part) { 
    return arr.filter(function(obj) { 
     return Object.keys(obj) 
      .some(function(k) { 
       console.log(obj[k]); 
       if(typeof(obj[k]) == 'string'){ 
        return obj[k].toLowerCase().indexOf(part) !== -1; 
       } 
      }); 
    }); 
};

這是非常緩慢的。與過濾客戶端相比，用AJAX調用服務器實際上更快！

任何想法爲什麼我的代碼太慢？該JSON是相當大的（500 +項）

來源

2013-03-19 Lukmo

我會嘗試不使用任何下劃線功能進行過濾和循環，因爲每個功能都需要調用函數（只需使用for循環）。您可能需要針對文本搜索優化一次，而不是每次搜索都需要進行優化。 – WiredPrairie 2013-03-19 10:45:38

你可能只是將console.log包含在你自己的測試中，但是如果它被調用的話會降低整體性能。另外，使用不區分大小寫的RegEx可能會比循環中的LowerCasing（）和索引檢查更快。 – gthmb 2013-03-19 10:58:47

即使有500個條目，我保證最多的工作是不是在過濾JSON。它在瀏覽器中的渲染/繪製循環中，除非您手動更新了DOM，而不是使用骨幹渲染函數。

先嚐試設置console.time('filterMyCollection')對於您撥打filterJSON線之上。之後它和console.timeEnd('filterMyCollection')。

然後做相同的，但在作爲中堅力量的第一行渲染功能和timeEnd作爲最後一道防線。

如果你破壞並重新創建一個模板，是內存，CPU和垃圾收集時間一個巨大的負擔。如果你需要顯示很多元素的幫助，你應該看看它是如何在PerfView中完成的（https://github.com/puppybits/BackboneJS-PerfView）。它能夠在Chrome瀏覽器中以120FPS滾動瀏覽1,000,000個模型。

來源

2013-10-22 05:41:15 puppybits

集合中的主幹（客戶端）過濾器性能問題

回答

相關問題