Benchmark: getComputedStyle vs clientWidth

HTML Preparation code:


<div id='test'></div>
<style>
  #test {
  	width: 100px;
  	height: 100px;
  	backgroundColor: black;
  }
</style>

Tests:

getComputedStyle
let style = getComputedStyle(document.getElementById("test")); let width = parseInt(style).width; let height = parseInt(style).height;
clientWidth
let container = document.getElementById("test"); let width = container.clientWidth; let height = container.clientHeight;

Rendered benchmark preparation results:

Previous results

Test case name	Result
getComputedStyle
clientWidth

ⓘ Get performance results from real users on your website with Request Metrics.

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.107 Safari/537.36 Edg/92.0.902.55

Browser/OS: Chrome 92 on Windows

Test name	Executions per second
getComputedStyle	184881.1 Ops/sec
clientWidth	212067.9 Ops/sec

getComputedStyle vs clientWidth (version: 7)