Run results for: classList.contains vs Custom Loop vs .matches()

Run details:

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: Chrome 144

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 6 months ago

Native .matches()

23.2M/s

Chained Native `contains`

13.0M/s

Custom .classCheck()

12.9M/s

View exact numbers

Test name	Executions per second
✓ Native .matches()	23,203,904 Ops/sec
Chained Native `contains`	12,997,635 Ops/sec
Custom .classCheck()	12,874,950 Ops/sec

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

Run results for: classList.contains vs Custom Loop vs .matches()

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

Chained Native `contains`

Custom .classCheck()

Native .matches()