CODEWITHSUNDEEP
javascriptangularjsperformancegoogle-chromefilter
Amit Anand
Amit Anand

Reputation: 1225

If filtering same data twice, why does Array.filter takes almost 10 times more time than $filter if executed at once?

I am trying to compare the time taken by angular's $filter service and Array.filter method of javascript.

This issue is reproducible in chrome only.

If I run both methods simultaneously then every time one filter takes almost 10 times more time to filter array in comparison to other filter but if I run them separately then both of them take almost equal time.

Using Array.filter method :-

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

Using $filter :-

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

Is here any caching issue(or feature) with filter?

plnkr with working code:- http://plnkr.co/edit/A5UeZK6Jnafp9SkVBxZi

Upvotes: 0

Views: 647

Answers (1)

trincot
trincot

Reputation: 351308

Code optimisation will play a role here. The variant of your code that will come to execute first, will access the returned structure for the first time. Chrome might have saved some resources before that first access actually happens, but once you do make that access, Chrome has to make that data accessible on the fly.

When you change the order of actual execution, for instance by wrapping the Array#filter block in a setTimeout, you will notice that then the $filter method consumes more time, and the Array#filter one wins. So really, the one that executes first has more overhead going on than the second.

For a correct comparison, you'd have to first access the input array and $filter without measuring time, and only then execute the two variants, so they start as much as possible in the same situation.

With the following arrangement, the difference in time consumption is very small:

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;
  });
});

See your updated plunker

Upvotes: 3

Related Questions