Array filter vs css selector filter performance

JavaScript performance comparison

Test case created by Carlos Tosta

Preparation code

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


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


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');
CSS Selector Filter
Array.from(document.querySelectorAll('a[href*="mailto"]')).map(el => el.getAttribute('href').substring(7)).join('\n');

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


Example Page