Benchmark: offsetWidth vs getBoundingClientRect()

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);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
OffscreenByOffsetWidth
Offscreen

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
OffscreenByOffsetWidth	26391.5 Ops/sec
Offscreen	27279.5 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):

LLMs can make mistakes. Check important info.

The benchmark titled "offsetWidth vs getBoundingClientRect()" compares two methods of measuring the width of elements in the DOM: using the `offsetWidth` property and the `getBoundingClientRect()` method.

### Test Cases & Definitions
1. **Offscreen Measurement with `offsetWidth`**:
   - **Test Name**: OffscreenByOffsetWidth
   - **Functionality**: This test measures the widths of child elements placed in an offscreen container using the `offsetWidth` property. This property reflects the layout width of an element, including padding, borders, and scrollbars, but not margins.
   - **Implementation**:
     - The function `getOffscreenContainer()` creates an offscreen `div` if it doesn’t already exist.
     - The inner HTML is injected into this `div`, and widths are measured using `element.offsetWidth`.
     - After measuring, the inner HTML is cleared.

2. **Offscreen Measurement with `getBoundingClientRect()`**:
   - **Test Name**: Offscreen
   - **Functionality**: This test measures the widths using the `getBoundingClientRect().width` method. This method returns a `DOMRect` object providing information about the size of an element and its position relative to the viewport.
   - **Implementation**: Similar to the first test, but it retrieves width using `element.getBoundingClientRect().width`.

### Comparison of Approach
**Pros and Cons**:

1. **Using `offsetWidth`**:
   - **Pros**:
     - Fast and straightforward access to the width.
     - Provides a simple integer value that includes padding and borders.
   - **Cons**:
     - Not as precise for visibility on partially obscured elements, since it does not account for transformations or rotations.
     - Does not include the effects of margins, which may lead to some inaccuracies in layout calculations.

2. **Using `getBoundingClientRect()`**:
   - **Pros**:
     - Offers more comprehensive measurements, capturing the full dimensions of the visible area of an element, including transformations.
     - Accounts for fractional pixels, which can be crucial in high-DPI environments and with CSS transforms.
   - **Cons**:
     - Slightly more computationally intensive than `offsetWidth`, as it computes the bounding box for the element in relation to the viewport.

### Performance Considerations
The benchmark results show that "Offscreen" using `getBoundingClientRect()` achieved about 27,279 executions per second, while "OffscreenByOffsetWidth" using `offsetWidth` had around 26,391 executions per second. This indicates that while both methods perform well, `getBoundingClientRect()` performs slightly better under the specific testing conditions.

### Libraries and Features
In this benchmark, there are no specific external libraries involved; it utilizes core JavaScript functions and properties of the DOM.

### Alternatives
There are other approaches to measure element dimensions, such as:
- **CSS `getComputedStyle()`**: This could return the computed CSS values for an element, including computed width but involving more overhead and complexity in parsing CSS.
- **Using framework or library utilities**: For example, libraries like jQuery have other dimension methods, but they introduce additional overhead due to extra abstraction layers.

In summary, this benchmark provides a clear insight into measuring element widths offscreen using two primary properties in the DOM — `offsetWidth` and `getBoundingClientRect()`. Software engineers should consider the trade-offs related to performance and accuracy based on the requirements of their applications.

Related benchmarks:

offsetWidth vs getBoundingClientRect() (version: 1)

Comparing performance of: OffscreenByOffsetWidth vs Offscreen

Created: one year ago by: Guest

Jump to the latest result

OffscreenByOffsetWidth

Offscreen

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one year ago):