Benchmark: getBoundingClientRect vs getAttribute

HTML Preparation code:

<div id="test" data-height="20"></div>

Tests:

getBoundingClientRect
let element = document.getElementById('test'); let rect = element.getBoundingClientRect(); let height = rect.height;
getAttribute
let element = document.getElementById('test'); let heightAttr = element.getAttribute('data-height'); let height = (heightAttr && Number.parseInt(heightAttr, 10)) || 0;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getBoundingClientRect
getAttribute

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: an hour ago)

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

Browser/OS: Chrome 147 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
getBoundingClientRect	2376060.2 Ops/sec
getAttribute	17833210.0 Ops/sec

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

LLMs can make mistakes. Check important info.

The benchmark titled "getBoundingClientRect vs getAttribute" compares two different methods for retrieving height information from an HTML element. In particular, it looks at:

1. **getBoundingClientRect() Method**: 
   - This method returns a DOMRect object providing information about the size and position of the element relative to the viewport. In this benchmark, it specifically retrieves the height of the element by accessing the `height` property of the DOMRect object returned.
   - **Pros**:
     - Provides precise information including the element's visible geometry and position on the screen.
     - Useful in responsive design or when dealing with elements affected by CSS transformations, scrolls, or other visual layouts.
   - **Cons**:
     - It may involve more overhead since it computes layout properties and requires the browser to perform more calculations, which can impact performance.
  
2. **getAttribute() Method**:
   - This method retrieves the value of a specified attribute from an HTML element. In this benchmark, it is used to get the `data-height` attribute, which is then converted to a number.
   - **Pros**:
     - Directly retrieves the attribute value, which is generally a faster operation since it doesn't require any layout calculations.
     - More straightforward if you simply need the value stored in the attribute without concern for visual layout.
   - **Cons**:
     - Does not account for how an element is rendered on the page; for example, if CSS affects the height, you won’t get that information from the attribute alone.

### Performance Results
Looking at the benchmark results, the test for `getAttribute` achieved **12,648,179 executions per second**, significantly outperforming `getBoundingClientRect`, which reached **1,829,231 executions per second**. This performance discrepancy highlights the overhead associated with layout calculations that `getBoundingClientRect` performs compared to the straightforward attribute retrieval of `getAttribute`.

### Other Considerations
When choosing between these methods, developers should consider the specific requirements of their application. If accurate layout data is crucial (e.g., when implementing drag-and-drop functionality or animations that depend on precise positions), `getBoundingClientRect` may be warranted despite its performance cost. Conversely, if the height is simply being stored and doesn't depend on current layout details, `getAttribute` is a more efficient choice.

### Alternatives
Other alternatives for obtaining height or dimensional data from elements could include:

- **offsetHeight**: Retrieves the height of an element including padding and borders, but not margins. This property is read-only and provides a more straightforward and faster option than `getBoundingClientRect` without needing to manipulate attribute data.
- **clientHeight**: Similar to `offsetHeight`, retrieves the inner height of an element in pixels, including padding but excluding borders and margins.
- **CSS values retrieved via `getComputedStyle()`**: This can provide dynamic values of CSS properties if you are looking for height that might be affected by styles rather than attributes.

In summary, this benchmark effectively illustrates trade-offs between two key approaches for accessing height information in web applications, guiding developers to make informed choices based on their specific use cases.

Related benchmarks:

getBoundingClientRect vs getAttribute (version: 1)

Comparing performance of: getBoundingClientRect vs getAttribute

Created: one year ago by: Guest

Jump to the latest result

getBoundingClientRect

getAttribute

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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