Run results for: Setting the same value with setAttribute()

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/135.0.0.0 Safari/537.36

Browser: Chrome 135

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 8 days ago

Test name	Executions per second
set the same value	11957576.0 Ops/sec
check and set nothing	51463064.0 Ops/sec
check and set a new value	1991300.0 Ops/sec
set a new value	4642188.0 Ops/sec
check cache and set nothing	167591792.0 Ops/sec
check cache and set a new value	4640350.0 Ops/sec
check and set the same value	7037838.0 Ops/sec

HTML Preparation code:

<svg version="1.1"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <rect id="rect1" width="100" height="100" fill="red" />
</svg>

Script Preparation code:

var rect = document.getElementById('rect1');
var width = Number(rect.getAttribute('width'));

Tests:

set the same value
rect.setAttribute('width', width);
check and set nothing
if (rect.getAttribute('width') !== `${width}`) { alert('this code does not run'); }
check and set a new value
if (rect.getAttribute('width') !== `${++width}`) { rect.setAttribute('width', width); }
set a new value
rect.setAttribute('width', ++width);
check cache and set nothing
const cache = width; if (cache !== width) { alert('this code does not run'); }
check cache and set a new value
const cache = width; if (cache !== ++width) { rect.setAttribute('width', width); }
check and set the same value
if (rect.getAttribute('width') === `${width}`) { rect.setAttribute('width', width); }

Run results for: Setting the same value with setAttribute()

Is checking the current value of an attribute with getAttribute() better than setting the same value with setAttribute() over and over.

set the same value

check and set nothing

check and set a new value

set a new value

check cache and set nothing

check cache and set a new value

check and set the same value