如果兩次過濾相同的數據，為什么一次執行Array.filter比$ filter花費將近十倍的時間？

Question

我正在嘗試比較angular的$ filter服務和javascript的Array.filter方法所花費的時間。

此問題僅在Chrome中可重現。

如果同時運行這兩種方法，則每次使用一個過濾器比使用其他過濾器多花費近10倍的時間來過濾數組，但是如果我分別運行它們，則它們所花費的時間幾乎相等。

使用Array.filter方法：-

arr.filter(function(a){
    return ((a.buyout - 33333333) === 0);
});

使用$ filter：-

$filter('filter')(resp.alliance.auctions, function(data){
      return ((data.buyout - 33333333) === 0);
});

這里有過濾器的任何緩存問題（或功能）嗎？

與工作代碼plnkr： - http://plnkr.co/edit/A5UeZK6Jnafp9SkVBxZi

Answer 1

代碼優化將在這里發揮作用。 將首先執行的代碼變體將首次訪問返回的結構。 Chrome瀏覽器可能會節省一些資源第一次訪問實際發生之前，但一旦你做作出這樣的訪問，瀏覽器必須隨時進行數據訪問。

當您更改實際執行的順序時，例如通過將Array#filter塊包裝在setTimeout ，您會注意到$filter方法會消耗更多時間，而Array#filter會贏。 因此，實際上，第一個執行的開銷比第二個執行的開銷大。

為了進行正確的比較，您必須先訪問輸入數組和$filter而不用測量時間，然后才執行這兩個變量，因此它們在相同情況下盡可能多地啟動。

通過以下安排，時間消耗的差異非常小：

angular.module('myApp', []).controller('myCtrl', function($filter, $http, $scope){
  $http.get('https://cors-anywhere.herokuapp.com/https://auction-api-eu.worldofwarcraft.com/auction-data/258993a3c6b974ef3e6f22ea6f822720/auctions.json').success(function(resp){
    // Perform a dry run to make sure all resources are loaded:
    var result = resp.alliance.auctions.filter(function(a){
      return ((a.buyout - 33333333) === 0);
    });
    result = $filter('filter')(resp.alliance.auctions, function(a){
      return ((a.buyout - 33333333) === 0);
    });
    var start = performance.now(), diffArrayFilter = 0, diff$filter = 0;

    // Now start the real measurement
    start = performance.now();
    result = $filter('filter')(resp.alliance.auctions, function(a){
      return ((a.buyout - 33333333) === 0);
    });
    diff$filter = performance.now() - start;

    start = performance.now();
    result = resp.alliance.auctions.filter(function(a){
      return ((a.buyout - 33333333) === 0);
    });
    diffArrayFilter = performance.now() - start;

    $scope.time = 'Time taken by $filter: '+diff$filter.toFixed(2)+' ms';

    document.getElementById('aLength').innerHTML = 'Array Length: '+resp.alliance.auctions.length;
    document.getElementById('fTime').innerHTML = 'Time taken by Array.filter: '+diffArrayFilter.toFixed(2)+' ms';
    document.getElementById('fLength').innerHTML = 'Filtered Array Length: '+result.length;
  });
}); 

查看您更新的插件