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	3793279.8 Ops/sec
check and skip setting	5599627.5 Ops/sec
check and set a new value	5606462.0 Ops/sec
set a new value	2423777.8 Ops/sec
check cache and skip setting	2447677.5 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