Benchmark: getComputedStyle vs matchMedia

HTML Preparation code:

<div class="foo"></div>
<style>
.foo {
  transition: none;  
}
</style>

Tests:

getComputedStyle
var result = window.getComputedStyle(document.querySelector('foo')).getPropertyValue('transition');
matchMedia
var result = window.matchMedia('(prefers-reduced-motion)').matches;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getComputedStyle
matchMedia

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/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
getComputedStyle	0.0 Ops/sec
matchMedia	786513.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**What is being tested?**

The provided benchmark tests two different approaches to retrieve the value of the `transition` CSS property on a web page: using the `getComputedStyle()` method or using the `matchMedia()` API.

In the first test case, "getComputedStyle", the code retrieves the style attribute of an HTML element (`document.querySelector('foo')`) and then extracts the value of the `transition` property from that style attribute. This is a straightforward approach that relies on JavaScript's built-in `getComputedStyle()` method to inspect the element's styles.

In the second test case, "matchMedia", the code uses the `matchMedia()` API to check if the user prefers reduced motion (i.e., whether the browser is in a reduced-motion mode). The value of the `transition` property is not directly accessed here; instead, the result is simply stored as `result` without any further processing.

**Options compared**

The two approaches are compared for their performance. Specifically, we're interested in how many executions per second (EPS) each method achieves on a particular test setup.

**Pros and Cons of each approach:**

1. **getComputedStyle()**
	* Pros:
		+ Directly accesses the `transition` property value.
		+ May be more reliable for certain use cases, as it's not subject to browser performance or API limitations.
	* Cons:
		+ Can be slower due to the overhead of parsing the DOM and accessing the element's styles.
		+ May require more memory allocations if you need to access multiple style attributes.
2. **matchMedia()**
	* Pros:
		+ Often faster than `getComputedStyle()` since it uses a native API designed for performance-critical use cases.
		+ Can be more lightweight, as it doesn't involve parsing the DOM or accessing style attributes.
	* Cons:
		+ May not directly access the `transition` property value (although this is true by design).
		+ Requires specific user agent and device configurations to work correctly.

**Library or API usage**

In neither test case do we see any explicit library or API dependencies being used. However, both methods rely on the browser's native APIs:

* `getComputedStyle()` uses the Web Content Accessibility Guidelines (WCAG) implementation of the CSS styles.
* `matchMedia()` is part of the W3C specification for Media Queries.

**Special JS features or syntax**

There are no specific JavaScript features or syntax being used in this benchmark that aren't already mentioned. If you're interested in exploring other aspects, you might look into:

* How the browsers implement the `getComputedStyle()` method.
* The implementation details of the `matchMedia()` API.
* How different browsers handle reduced-motion mode.

**Other alternatives**

If you're looking for alternative approaches to access the `transition` property value or explore similar performance-critical use cases, consider the following:

* Use a library like `stylelint` or `cssbeautifier` that can parse CSS styles and extract values programmatically.
* Explore other native APIs like `window.getComputedStyle()` alternatives (e.g., `CSSOMView` in Chrome).
* Investigate how different browsers handle CSS styles, transitions, and media queries.

Keep in mind that the specific details of each alternative may vary depending on your use case, browser support, and performance requirements.

Related benchmarks:

getComputedStyle vs matchMedia (version: 0)

Comparing performance of: getComputedStyle vs matchMedia

Created: one year ago by: Guest

Jump to the latest result

getComputedStyle

matchMedia

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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