Benchmark: getComputedStyle vs matchMedia (javi 4)

HTML Preparation code:

<div class="foo"></div>
<style>
.foo {
  transition: none;  
  color: red;
  display: block;
  padding: 20px;
  background-color: blue;
  text-decoration: none;
}
  
.foo:focus {
  text-decoration: underline;
}
</style>

Tests:

getComputedStyle
var el = document.querySelector('.foo'); var result = window.getComputedStyle(el).getPropertyValue('transition');
matchMedia
var el = document.querySelector('foo'); 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 (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	494222.0 Ops/sec
matchMedia	315051.1 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 JSON represents a JavaScript benchmark test case on MeasureThat.net, which compares the performance of two methods: `getComputedStyle` and `matchMedia`. The test measures the time taken to execute these functions in a specific HTML setup.

**What is tested?**

1. **getComputedStyle**: This function returns an object containing CSS properties for a given DOM element. In this case, it's used to retrieve the value of the `transition` property from the `.foo` class.
2. **matchMedia**: This function checks if a media query matches the current viewport. In this test, it's used to check if the device prefers reduced motion.

**Options compared**

The two options being compared are:

1. `getComputedStyle`: Retrieves the CSS properties of an element using the `window.getComputedStyle()` method.
2. `matchMedia`: Checks if a media query matches the current viewport using the `window.matchMedia()` method.

**Pros and Cons of each approach**

1. **getComputedStyle**:
	* Pros: More readable, as it directly accesses the CSS properties of an element.
	* Cons: May be slower due to the overhead of creating a computed style object.
2. **matchMedia**:
	* Pros: More concise, as it uses a single method to check for media queries.
	* Cons: May require more setup and parsing effort, especially when dealing with complex media queries.

**Library usage**

In this test case, no external libraries are used. The `window.getComputedStyle()` and `window.matchMedia()` methods are part of the W3C standard.

**Special JS features or syntax**

There are no special JavaScript features or syntax used in this benchmark.

**Other alternatives**

If you were to rewrite this benchmark using different approaches, here are some alternatives:

1. Using a library like **css-utilities** to retrieve CSS properties might be faster than `getComputedStyle`.
2. Implementing your own media query parser to compare with `matchMedia` could provide more control over the comparison.
3. Using a browser's native API, such as **MediaQueryList**, which is similar to `matchMedia`, but provides more features and flexibility.

Keep in mind that these alternatives might change the performance characteristics of the benchmark and may not be representative of real-world usage scenarios.

**Benchmark preparation code**

The provided HTML setup includes:

* A `<div>` element with the class `.foo`.
* An `<style>` block defining the CSS rules for the `.foo` class.
* The `:focus` pseudo-class is also defined to apply additional styles.

This setup is used to test the performance of `getComputedStyle` and `matchMedia` in a controlled environment.

Related benchmarks:

getComputedStyle vs matchMedia (javi 4) (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):