Run results for: offsetWidth vs getBoundingClientRect()

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36 Edg/131.0.0.0

Browser: Chrome 131

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one month ago

Test name	Executions per second
OffscreenByOffsetWidth	24190.7 Ops/sec
Offscreen	24651.2 Ops/sec

Tests:

OffscreenByOffsetWidth
function getOffscreenContainer() { let offscreenContainer = document.getElementById('offscreen-container'); if (!offscreenContainer) { // If the offscreen container doesn't exist, create it offscreenContainer = document.createElement('div'); offscreenContainer.id = 'offscreen-container'; offscreenContainer.style.position = 'absolute'; offscreenContainer.style.visibility = 'hidden'; offscreenContainer.style.whiteSpace = 'nowrap'; // Explicity set display to flex and flexWrap to nowrap to ensure that the elements are measured in a single line offscreenContainer.style.display = 'flex'; offscreenContainer.style.flexWrap = 'nowrap'; document.body.appendChild(offscreenContainer); } return offscreenContainer; } function offscreenElementMeasure( innerHtml, useExperimentalOffsetWidth = false ) { const offscreenContainerElement = getOffscreenContainer(); // Insert the innerHtml into the offscreen div offscreenContainerElement.innerHTML = innerHtml; // Measure the elements const elementWidths = Array.from(offscreenContainerElement.children).map((element) => useExperimentalOffsetWidth ? element.offsetWidth : element.getBoundingClientRect().width ); // Clear the offscreen div offscreenContainerElement.innerHTML = ''; return { elementWidths, sumOfElementWidths: elementWidths.reduce((a, b) => a + b, 0) }; } const string = '<div id="el"><h2>Lorem ipsum dolor sit amet</h2><h2>Lorem ipsum dolor sit amet</h2><h2>Lorem ipsum dolor sit amet</h2></div>'; offscreenElementMeasure(string, true);
Offscreen
function getOffscreenContainer() { let offscreenContainer = document.getElementById('offscreen-container'); if (!offscreenContainer) { // If the offscreen container doesn't exist, create it offscreenContainer = document.createElement('div'); offscreenContainer.id = 'offscreen-container'; offscreenContainer.style.position = 'absolute'; offscreenContainer.style.visibility = 'hidden'; offscreenContainer.style.whiteSpace = 'nowrap'; // Explicity set display to flex and flexWrap to nowrap to ensure that the elements are measured in a single line offscreenContainer.style.display = 'flex'; offscreenContainer.style.flexWrap = 'nowrap'; document.body.appendChild(offscreenContainer); } return offscreenContainer; } function offscreenElementMeasure( innerHtml, useExperimentalOffsetWidth = false ) { const offscreenContainerElement = getOffscreenContainer(); // Insert the innerHtml into the offscreen div offscreenContainerElement.innerHTML = innerHtml; // Measure the elements const elementWidths = Array.from(offscreenContainerElement.children).map((element) => useExperimentalOffsetWidth ? element.offsetWidth : element.getBoundingClientRect().width ); // Clear the offscreen div offscreenContainerElement.innerHTML = ''; return { elementWidths, sumOfElementWidths: elementWidths.reduce((a, b) => a + b, 0) }; } const string = '<div id="el"><h2>Lorem ipsum dolor sit amet</h2><h2>Lorem ipsum dolor sit amet</h2><h2>Lorem ipsum dolor sit amet</h2></div>'; offscreenElementMeasure(string, false);

Run results for: offsetWidth vs getBoundingClientRect()

OffscreenByOffsetWidth

Offscreen