Benchmark: matchMedia vs clientWidth vs innerWidth

HTML Preparation code:

Test

Tests:

clientWidth
document.documentElement.clientWidth > 640;
matchMedia
window.matchMedia("(min-width: 640px)").matches;
innerWidth
window.innerWidth > 640

Historical Performance Data aggregated from 69 community runs

Desktop Results:

Chrome 62 runs

innerWidth

2.7M/s

clientWidth

1.7M/s

matchMedia

657K/s

Fastest: innerWidth (4.1x faster)

View exact numbers

✓ innerWidth: 2,675,787 ops/sec
• clientWidth: 1,730,468 ops/sec
• matchMedia: 657,201 ops/sec

Firefox 7 runs

innerWidth

8.2M/s

clientWidth

6.6M/s

matchMedia

1.2M/s

Fastest: innerWidth (7.0x faster)

View exact numbers

✓ innerWidth: 8,241,021 ops/sec
• clientWidth: 6,630,034 ops/sec
• matchMedia: 1,171,019 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
clientWidth
matchMedia
innerWidth

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 months ago)

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

Browser/OS: Chrome 145 on Mac OS X 10.15.7

View result in a separate tab

innerWidth

5.3M/s

clientWidth

3.3M/s

matchMedia

752K/s

View exact numbers

Test name	Executions per second
✓ innerWidth	5,319,714 Ops/sec
clientWidth	3,335,460 Ops/sec
matchMedia	751,677 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 JSON data to understand what is being tested on MeasureThat.net.

**Benchmark Definition**

The benchmark definition specifies that three different approaches are being compared:

1. `clientWidth`: Tests whether the `clientWidth` property of the `document.documentElement` returns a value greater than 640.
2. `matchMedia`: Tests whether the `matches()` method of the `window.matchMedia()` object returns true for a media query with a minimum width of 640px.
3. `innerWidth`: Tests whether the `innerWidth` property of the `window` object returns a value greater than 640.

**Options Compared**

The three approaches are being compared to determine which one is the fastest and most efficient. The benchmark is designed to measure the performance difference between these three approaches in terms of execution speed.

**Pros and Cons of Each Approach**

1. **clientWidth**: This approach checks the width of the document element, which can be affected by various factors such as font sizes, margins, and padding. It may not always return a precise value for the screen width.
2. **matchMedia**: This approach uses a media query to check if the screen width is greater than 640px. It provides a more accurate representation of the screen size but requires more processing power compared to `clientWidth`.
3. **innerWidth**: This approach simply checks the inner width of the window, which may not account for other factors that affect the screen width.

**Library and Purpose**

The `window.matchMedia()` function is part of the W3C Web APIs specification and provides a way to check the media query matches for various conditions, including screen size. In this benchmark, it's used to test the performance of matching media queries.

**Special JS Feature or Syntax (None)**

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

**Alternative Approaches**

Other approaches to compare screen width could include:

1. `getComputedStyle()`: This method returns a CSSStyleDeclaration object that contains various properties, including `width`, which can be used to check the screen width.
2. `navigator.userAgent` and `screen.width`: These properties provide more information about the user's device but may not always return accurate values.

In conclusion, this benchmark compares three approaches to determine the fastest and most efficient way to test whether the screen width is greater than 640px: `clientWidth`, `matchMedia`, and `innerWidth`.

matchMedia vs clientWidth vs innerWidth (version: 0)

Comparing performance of: `clientWidth vs matchMedia vs innerWidth`

Created: 6 years ago by: Guest

Go to the latest result

clientWidth

matchMedia

innerWidth

Historical Performance Data aggregated from 69 community runs

Desktop Results:

Chrome 62 runs

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

matchMedia vs clientWidth vs innerWidth (version: 0)

Comparing performance of: clientWidth vs matchMedia vs innerWidth

Created: 6 years ago by: Guest

Go to the latest result

clientWidth

matchMedia

innerWidth

Historical Performance Data aggregated from 69 community runs

Desktop Results:

Chrome 62 runs

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `clientWidth vs matchMedia vs innerWidth`