MeasureThat.net

Run results for: window.getComputedStyle vs. className vs. className / contains

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36
Chrome 75
Windows
Desktop
5 years ago
Test name Executions per second
getComputedStyle 201.3 Ops/sec
className 924.6 Ops/sec
classList.contains 800.2 Ops/sec
HTML Preparation code:
AخA
 
1
<div id="foo"></div>
Tests:

  • getComputedStyle

    ​x
     
    var i = 3000;
    while (i--) {
        chekele('foo');
    }
    ​
    function chekele(element) {
        return window.getComputedStyle(document.getElementById(element), null).getPropertyValue("display").indexOf('none') === -1;
    }

  • className

     
    var i = 3000;
    while (i--) {
        chekele('foo');
    }
    ​
    function chekele(element) {
        return document.getElementById(element).className.indexOf('hide') === -1;
    }
    ​

  • classList.contains

     
    var i = 3000;
    while (i--) {
        chekele('foo');
    }
    ​
    function chekele(element) {
        return document.getElementById(element).classList.contains('hide');
    }
    ​