Array filter vs css selector filter performance

JavaScript performance comparison

Test case created by Carlos Tosta

Preparation code

<!DOCTYPE html>
<html>
  <head>
    <title>Example Page</title>
    <meta charset="utf-8">
  </head>
  <body>
    <div id="test"></div>
  </body>
</html>
      
<script>
Benchmark.prototype.setup = function() {
  for (var i = 0; i < 10000; i++) {
    var link = document.createElement("a");
    link.setAttribute("href", `mailto:user${i}@teste.com`);
    link.innerText = `user${i}@teste.com`;
    document.querySelector("#test").appendChild(link);
  }
  
  

};

Benchmark.prototype.teardown = function() {
  document.querySelector("#test").innerHTML = "";

};
</script>

Preparation code output

<!DOCTYPE html> <html> <head> <title>Example Page</title> <meta charset="utf-8"> </head> <body> <div id="test"></div> </body> </html>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
Array Filter
Array.from(document.querySelectorAll('a')).filter(el => (el.getAttribute('href').indexOf('mailto') >= 0)).map(el => el.getAttribute('href').substring(7)).join('\n');
pending…
CSS Selector Filter
Array.from(document.querySelectorAll('a[href*="mailto"]')).map(el => el.getAttribute('href').substring(7)).join('\n');
pending…

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments

Example Page