classList.contains vs.

6 months ago
User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36
Test name Executions per second
Use hasClass shorthand 7729117.5 Ops/sec
Use classList 7416455.5 Ops/sec
HTML Preparation code:
AخA
 
1
<div id="foo" class="bar baz"></div>
Script Preparation code:
 
var test_element = document.getElementById("foo");
Tests:
  • Use hasClass shorthand

    x
     
    function hasClass(element, classes) {
        classes = classes.split(' ');
        for (var i = 0; i < classes.length; i++) {
            if (!element.classList.contains(classes[i])) {
                return false;
            }
        }
        return true;
    };
    hasClass(test_element, "bar baz");
  • Use classList

     
    test_element.classList.contains("bar");
    test_element.classList.contains("baz");
Open this result on MeasureThat.net