Benchmark: classList.contains vs Custom Loop vs .matches()

HTML Preparation code:

<div id="test-el" class="btn primary active large loading"></div>

Script Preparation code:

// Define the custom function
Element.prototype.classCheck = function(classArray) {
  for (let i = 0; i < classArray.length; i++) {
    if (!this.classList.contains(classArray[i])) {
      return false;
    }
  }
  return true;
};

// Select the element once so we aren't benchmarking DOM selection
var el = document.getElementById('test-el');
var classesToTest = ['primary', 'loading'];
var selectorToTest = '.primary.loading';

Tests:

Chained Native `contains`
return el.classList.contains('primary') && el.classList.contains('loading');
Custom .classCheck()
return el.classCheck(classesToTest);
Native .matches()
return el.matches(selectorToTest);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Chained Native `contains`
Custom .classCheck()
Native .matches()

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 3 months ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/144.0.0.0 Safari/537.36 Edg/144.0.0.0

Browser/OS: Chrome 144 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Chained Native `contains`	12997635.0 Ops/sec
Custom .classCheck()	12874950.0 Ops/sec
Native .matches()	23203904.0 Ops/sec

Related benchmarks:

classList.contains vs Custom Loop vs .matches() (version: 1)

Comparing performance of checking multiple classes using native chaining, a custom prototype function with a `for` loop, and the `matches()` selector method.

Comparing performance of: Chained Native `contains` vs Custom .classCheck() vs Native .matches()

Created: 3 months ago by: Registered User

Jump to the latest result

Chained Native `contains`

Custom .classCheck()

Native .matches()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A