Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
Run results for:
offsetWidth vs getBoundingClientRect()
Go to the benchmark
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=570392" width="100%" height="500px"></iframe>
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 year ago
Offscreen
25K/s
OffscreenByOffsetWidth
24K/s
View exact numbers
Test name
Executions per second
✓
Offscreen
24,651 Ops/sec
OffscreenByOffsetWidth
24,191 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);