Benchmark: scrollY vs pageYOffset

Tests:

pageYOffset
var scrolled = window.pageYOffset;
scrollY
var scrolled = window.scrollY;

Historical Performance Data aggregated from 55 community runs

Desktop Results:

Chrome 44 runs

pageYOffset

1.5M/s

scrollY

1.4M/s

View exact numbers

✓ pageYOffset: 1,456,056 ops/sec
• scrollY: 1,429,817 ops/sec

Firefox 11 runs

pageYOffset

6.2M/s

scrollY

6.0M/s

View exact numbers

✓ pageYOffset: 6,236,414 ops/sec
• scrollY: 6,049,278 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
pageYOffset
scrollY

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 21 days ago)

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

Browser/OS: Chrome 150 on Mac OS X 10.15.7

View result in a separate tab

pageYOffset

4.8M/s

scrollY

4.8M/s

View exact numbers

Test name	Executions per second
✓ pageYOffset	4,831,168 Ops/sec
scrollY	4,824,553 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help explain the benchmark and its results.

**Benchmark Overview**

The benchmark is designed to compare two different ways of accessing the vertical scroll position of an element: `window.scrollY` and `window.pageYOffset`. The goal is to determine which method is faster, more efficient, or has less overhead in terms of performance.

**Script Preparation Code and Html Preparation Code**

Both script preparation code and html preparation code are empty, indicating that no specific setup or initialization code needs to be executed before running the benchmark. This allows users to focus solely on the JavaScript microbenchmark itself.

**Individual Test Cases**

There are two test cases:

1. **`pageYOffset`**: This test case measures the time it takes to access `window.pageYOffset`.
2. **`scrollY`**: This test case measures the time it takes to access `window.scrollY`.

**Library Usage**

Neither of the test cases uses any external libraries, so there's no additional overhead or dependencies to consider.

**Special JS Features/Syntax**

There are two special features/syntax being tested:

1. **`scrollY`**: This is a new API introduced in modern browsers (from version 60) that provides a more efficient and consistent way of accessing the vertical scroll position.
2. **`pageYOffset`**: This is an older, more traditional API for accessing the vertical scroll position.

The choice between `scrollY` and `pageYOffset` depends on the specific use case and browser support requirements. In general, `scrollY` is considered faster and more efficient, but it may not be compatible with older browsers or versions.

**Pros and Cons**

Here are some pros and cons of each approach:

* **`scrollY`**:
	+ Pros:
		- Faster execution times
		- More efficient and consistent API
	+ Cons:
		- Limited browser support (requires Chrome 60+)
* **`pageYOffset`**:
	+ Pros:
		- Broader browser support (works in older browsers, including Internet Explorer)
	+ Cons:
		- Slower execution times compared to `scrollY`

**Other Alternatives**

There are other ways to access the vertical scroll position:

1. **`window.scrollX`**: This property provides access to the horizontal scroll position, not the vertical one.
2. **`document.documentElement.scrollTop`**: This property returns the amount of time that has passed since the document was last scrolled vertically.
3. **`window.getScrollTop()`** (not shown in the benchmark code): This function is not commonly used and may have different behavior or overhead compared to `scrollY` or `pageYOffset`.

In summary, the benchmark provides valuable insights into the performance differences between two popular ways of accessing the vertical scroll position in JavaScript. The results can help developers make informed decisions about which API to use depending on their specific requirements and browser support needs.

scrollY vs pageYOffset (version: 0) Benchmark.js

Comparing performance of: `pageYOffset vs scrollY`

Created: 5 years ago by: Guest

Go to the latest result

pageYOffset

scrollY

Historical Performance Data aggregated from 55 community runs

Desktop Results:

Chrome 44 runs

Firefox 11 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

scrollY vs pageYOffset (version: 0) Benchmark.js

Comparing performance of: pageYOffset vs scrollY

Created: 5 years ago by: Guest

Go to the latest result

pageYOffset

scrollY

Historical Performance Data aggregated from 55 community runs

Desktop Results:

Chrome 44 runs

Firefox 11 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Comparing performance of: `pageYOffset vs scrollY`