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: one year ago

check cache and set nothing

162.3M/s

check and set nothing

52.6M/s

set the same value

12.1M/s

check cache and set a new value

4.7M/s

set a new value

4.7M/s

check and set a new value

2.0M/s

View exact numbers

Test name	Executions per second
✓ check cache and set nothing	162,269,200 Ops/sec
check and set nothing	52,614,056 Ops/sec
set the same value	12,066,628 Ops/sec
check cache and set a new value	4,710,133 Ops/sec
set a new value	4,683,159 Ops/sec
check and set a new value	2,026,021 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); }