Run results for: CanvasWidthTest

Run details:

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

Browser: Firefox 114

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
offsetWidth - Clear	1492.9 Ops/sec
offsetWidth - No Clear	1494.0 Ops/sec
canvas	8992.9 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