Benchmark: window.getComputedStyle vs. getBoundingClientRect vs. window.getComputedStyle without getters

HTML Preparation code:

<div id="foo"></div>

Tests:

getComputedStyle
var i = 5000; while (i--) { checkDisplay('foo'); } function checkDisplay(id) { return window.getComputedStyle(document.getElementById(id), null).getPropertyValue("display") === "none"; }
getBoundingClientRect
var i = 5000; while (i--) { checkDisplay('foo'); } function checkDisplay(id) { return document.getElementById(id).getBoundingClientRect().width === 0; }
getComputedStyle without getters
var i = 5000; while (i--) { checkDisplay('foo'); } function checkDisplay(id) { return window.getComputedStyle(document.getElementById(id), null); }
getElementById
var i = 5000; while (i--) { checkDisplay('foo'); } function checkDisplay(id) { return document.getElementById(id); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getComputedStyle
getBoundingClientRect
getComputedStyle without getters
getElementById

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
getComputedStyle	331.5 Ops/sec
getBoundingClientRect	231.4 Ops/sec
getComputedStyle without getters	586.3 Ops/sec
getElementById	2136.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The provided benchmark measures the performance of three different approaches for checking if an element's display property is set to "none":

1. `window.getComputedStyle(document.getElementById(id), null).getPropertyValue("display") === "none"`
2. `document.getElementById(id).getBoundingClientRect().width === 0`
3. Direct access to the element without getters: `window.getComputedStyle(document.getElementById(id))`

**Options Compared**

The benchmark compares the performance of these three approaches:

* `window.getComputedStyle` with and without getters (property accessors) for getting the computed style values.
* `document.getElementById` followed by checking the element's bounding rectangle width.

**Pros and Cons of Each Approach:**

1. **`window.getComputedStyle` with getters:**
	* Pros:
		+ More precise and accurate, as it returns the actual computed style value, including any vendor prefixes.
		+ Allows for easier access to specific styles, like `display`, using the property accessor syntax (`window.getComputedStyle(document.getElementById(id), null).getPropertyValue("display")`).
	* Cons:
		+ May be slower due to the additional function calls and potential overhead of computing the style values.
2. **`window.getComputedStyle` without getters:**
	* Pros:
		+ Faster, as it avoids the overhead of property accessor functions.
	* Cons:
		+ Less precise, as it returns a string representation of the computed style value, which may not include vendor prefixes or other details.
3. **`document.getElementById` followed by `getBoundingClientRect().width === 0`:**
	* Pros:
		+ Simple and straightforward, avoiding any potential overhead of computing style values.
	* Cons:
		+ Less accurate, as it relies on the bounding rectangle width being a reliable indicator of the display property value.

**Library Used:**

None. This benchmark only uses built-in JavaScript functions and DOM API methods.

**Special JS Feature/Syntax:**

None mentioned in the provided code.

**Other Considerations:**

When deciding which approach to use, consider the trade-offs between precision, performance, and simplicity:

* If accuracy is crucial, using `window.getComputedStyle` with getters might be the best choice.
* For faster execution, using `window.getComputedStyle` without getters or relying on `getBoundingClientRect()` might be more suitable.
* In cases where only the display property value needs to be checked, a simpler approach like direct element access might be sufficient.

**Alternatives:**

Other approaches for checking if an element's display property is set to "none" could include:

1. Using CSS media queries or conditional statements to test the display property in different contexts.
2. Leveraging browser-specific APIs or experimental features (e.g., `cssom`) for more efficient styling and layout management.
3. Employing alternative techniques, like using a custom library or utility functions, that provide improved performance or accuracy.

Keep in mind that each approach has its strengths and weaknesses, and the chosen method will depend on the specific requirements of your use case.

Related benchmarks:

window.getComputedStyle vs. getBoundingClientRect vs. window.getComputedStyle without getters (version: 0)

Comparing performance of: getComputedStyle vs getBoundingClientRect vs getComputedStyle without getters vs getElementById

Created: 3 years ago by: Guest

Jump to the latest result

getComputedStyle

getBoundingClientRect

getComputedStyle without getters

getElementById

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):