Toggle navigation
MeasureThat
.net
Create a benchmark
Tools
Feedback
FAQ
Register
Log In
SP: clientHeight vs offsetHeight vs getComputedStyle
(version: 0)
Comparing performance of:
clientHeight vs offsetHeight vs getComputedStyle
Created:
2 years ago
by:
Registered User
Go to the latest result
HTML Preparation code:
<div id="testelement"><div style="height:123px"></div></div>
Tests:
clientHeight
testelement.clientHeight
offsetHeight
testelement.offsetHeight
getComputedStyle
window.getComputedStyle(testelement).height
Rendered benchmark preparation results:
Suite status:
<idle, ready to run>
Run tests (3)
Previous results
Fork
Test case name
Result
clientHeight
offsetHeight
getComputedStyle
Fastest:
N/A
Slowest:
N/A
Latest run results:
Run details:
(Test run date:
2 years ago
)
User agent:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/123.0.0.0 Safari/537.36
Browser/OS:
Chrome 123 on Windows
View result in a separate tab
Embed
Embed Benchmark Result
<iframe src="https://measurethat.net/Embed?id=516045" width="100%" height="500px"></iframe>
offsetHeight
642K/s
clientHeight
622K/s
getComputedStyle
319K/s
View exact numbers
Test name
Executions per second
✓
offsetHeight
641,661 Ops/sec
clientHeight
621,580 Ops/sec
getComputedStyle
318,585 Ops/sec
Autogenerated LLM Summary
(model
llama3.2:3b
, generated one year ago):
**Benchmark Overview** The provided JSON represents a JavaScript microbenchmark created on MeasureThat.net. The benchmark compares the execution time of three different approaches to retrieve the height of an HTML element: `clientHeight`, `offsetHeight`, and using the `getComputedStyle` method. **Test Cases** There are three test cases: 1. **`clientHeight`**: This test case measures the execution time of accessing the `clientHeight` property directly on the `testelement` DOM node. 2. **`offsetHeight`**: This test case measures the execution time of accessing the `offsetHeight` property directly on the `testelement` DOM node. 3. **`getComputedStyle`**: This test case measures the execution time of using the `getComputedStyle` method to retrieve the `height` property from the computed style of the `testelement` element. **Options Compared** The benchmark compares three options: 1. **Direct Property Access**: `clientHeight` and `offsetHeight` * Pros: Simple, fast, and efficient. * Cons: May not work in all situations (e.g., when the element's parent is transparent). 2. **Using `getComputedStyle`**: `window.getComputedStyle(testelement).height` * Pros: Works in all situations, provides more accurate results, but may be slower due to the additional overhead of accessing the computed style. * Cons: May be slower than direct property access. **Library** None. **Special JS Features/Syntax** The benchmark uses the following feature: * **CSSOM**: The `getComputedStyle` method relies on the CSS Object Model (CSSOM), which provides an interface to access and manipulate the CSS styles of elements. **Benchmark Preparation Code** The preparation code is simple: ```javascript <html> <head></head> <body> <div id="testelement"> <div style="height:123px"></div> </div> </body> </html> ``` This code creates a basic HTML structure with an `<div>` element having a fixed height of `123px`. The `id` attribute is set to "testelement", which will be used by the benchmark. **Other Alternatives** If you wanted to create a similar benchmark, you could consider using other libraries or approaches, such as: * Using a CSS parser like `cssom.js` instead of the native `getComputedStyle` method. * Comparing the performance of different JavaScript engines (e.g., V8, SpiderMonkey) by running the benchmark in multiple environments. * Adding more test cases to compare additional properties or methods, such as `offsetWidth`, `scrollHeight`, or `getBoundingClientRect`. Keep in mind that creating a comprehensive benchmark like this one requires significant expertise and resources. MeasureThat.net's automated testing framework makes it relatively easy to create and run microbenchmarks like this one.
Related benchmarks
clientHeight vs offsetHeight vs window.getComputedStyle
clientHeight vs getComputedStyle().height
clientHeight vs offsetHeight vs getComputedStyle
Comments
Confirm delete:
Do you really want to delete benchmark?