Run results for: CanvasWidthTest

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:109.0) Gecko/20100101 Firefox/115.0

Browser: Firefox 115

Operating system: Windows

Device Platform: Desktop

Date tested: 8 months ago

Test name	Executions per second
offsetWidth - Clear	699.3 Ops/sec
offsetWidth - No Clear	756.3 Ops/sec
canvas	7237.0 Ops/sec

HTML Preparation code:

<div id="testDiv"></div>

Script Preparation code:

const canvas = document.createElement('canvas')
window.context = canvas.getContext('2d')
window.globalThis.str0 = "Hello0";
window.globalThis.str1 = "Hello1";
window.globalThis.iterations = 100;
window.globalThis.d = document.getElementById("testDiv");

Tests:

offsetWidth - Clear
for (let i = 0; i < window.globalThis.iterations; i++){ if(i % 2 == 0){ window.globalThis.d.innerText = window.globalThis.str0; } else { window.globalThis.d.innerText = window.globalThis.str1; } const w = d.offsetWidth; window.globalThis.d.innerText = ""; }
offsetWidth - No Clear
for (let i = 0; i < window.globalThis.iterations; i++){ if(i % 2){ window.globalThis.d.innerText = window.globalThis.str0; } else { window.globalThis.d.innerText = window.globalThis.str1; } const w = window.globalThis.d.offsetWidth; }
canvas
for (let i = 0; i < window.globalThis.iterations; i++){ const s = i % 2 ? window.globalThis.str0 : window.globalThis.str1; const w = window.context.measureText(s).width; }

Run results for: CanvasWidthTest

offsetWidth - Clear

offsetWidth - No Clear

canvas