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: 2 years ago

Test name	Executions per second
set the same value	3808355.8 Ops/sec
check and set nothing	9823631.0 Ops/sec
check and set a new value	9822617.0 Ops/sec
set a new value	2414916.8 Ops/sec
check cache and set nothing	12106906.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