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

HTML Preparation code:

<div id="container">
  <div class="btn primary loading"></div>
  <div class="btn secondary active"></div>
  <div class="btn primary hidden"></div>
  <div class="btn large primary loading"></div>
</div>

Script Preparation code:

Element.prototype.classCheck = function(classArray) {
  for (let i = 0; i < classArray.length; i++) {
    if (!this.classList.contains(classArray[i])) return false;
  }
  return true;
};

const elements = Array.from(document.querySelectorAll('#container div'));
const classesToTest = ['primary', 'loading'];
const selectorToTest = '.primary.loading';
let counter = 0;

Tests:

Chained Native `contains`
const el = elements[counter++ % elements.length]; return el.classList.contains('primary') && el.classList.contains('loading');
Custom .classCheck()
const el = elements[counter++ % elements.length]; return el.classCheck(classesToTest);
Native .matches()
const el = elements[counter++ % elements.length]; 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: 6 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

Native .matches()

8.2M/s

Chained Native `contains`

6.9M/s

Custom .classCheck()

6.5M/s

View exact numbers

Test name	Executions per second
✓ Native .matches()	8,243,504 Ops/sec
Chained Native `contains`	6,882,659 Ops/sec
Custom .classCheck()	6,516,034 Ops/sec

classList.contains vs Custom Loop vs .matches() v2 (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: 6 months ago by: Registered User

Go to the latest result

Chained Native `contains`

Custom .classCheck()

Native .matches()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

classList.contains vs Custom Loop vs .matches() v2 (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: 6 months ago by: Registered User

Go to the latest result

Chained Native `contains`

Custom .classCheck()

Native .matches()

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks