Benchmark: scrollY vs pageYOffset

Tests:

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

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: 6 months ago)

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

Browser/OS: Chrome 141 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
pageYOffset	3113715.0 Ops/sec
scrollY	3169390.0 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.

Related benchmarks:

scrollY vs pageYOffset (version: 0)

Comparing performance of: pageYOffset vs scrollY

Created: 5 years ago by: Guest

Jump to the latest result

pageYOffset

scrollY

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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