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/102.0.5005.61 Safari/537.36

Browser: Chrome 102

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
set the same value	3768500.0 Ops/sec
check and set nothing	9809375.0 Ops/sec
check and set a new value	948744.3 Ops/sec
set a new value	2382158.0 Ops/sec
check cache and set nothing	12134330.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); }

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