Run results for: CssText vs Styling vs classList add

Run details:

User agent: Mozilla/5.0 (Linux; arm_64; Android 11; RMX2002) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/106.0.0.0 YaApp_Android/22.110.1 YaSearchBrowser/22.110.1 BroPP/1.0 SA/3 Mobile Safari/537.36

Browser: Chrome 106

Operating system: Android 22.110.1

Device Platform: Mobile

Date tested: 2 years ago

Test name	Executions per second
csstext	71225.5 Ops/sec
styling	165354.8 Ops/sec
classList add	421131.4 Ops/sec

HTML Preparation code:

<div id="myid">hi</div>
<style>
    .wide {
      width: 100px;
    }
    .long {
      left: 100px;
      height: 100px;
    }
    .blue {
      top: 100px;
    }
</style>

Script Preparation code:

var a = document.getElementById("myid");
a.style.position = "absolute";

Tests:

csstext
a.style.cssText += "left: 100px ;top: 100px; width: 100px; height: 100px";
styling
a.style.left = "100px" a.style.top = "100px" a.style.width = "100px" a.style.height = "100px"
classList add
a.classList.add('wide','long','blue')

Run results for: CssText vs Styling vs classList add

csstext

styling

classList add