Benchmark: scrollTop vs scrollTo vs scrollBy vs scroll

HTML Preparation code:

<body style="height: 999999px;">

Script Preparation code:

TEST_Body_DOM = document.body;

Tests:

window.scrollTo
window.scrollTo(0, 999999); window.scrollTo(0, 499999); window.scrollTo(0, 0);
TEST_Body_DOM.scrollTop =
TEST_Body_DOM.scrollTop = 999999; TEST_Body_DOM.scrollTop = 499999; TEST_Body_DOM.scrollTop = 0;
TEST_Body_DOM.scrollTo
TEST_Body_DOM.scrollTo(0, 999999); TEST_Body_DOM.scrollTo(0, 499999); TEST_Body_DOM.scrollTo(0, 0);
TEST_Body_DOM.scroll
TEST_Body_DOM.scroll(0, 999999); TEST_Body_DOM.scroll(0, 499999); TEST_Body_DOM.scroll(0, 0);
window.scroll
window.scroll(0, 999999); window.scroll(0, 499999); window.scroll(0, 0);
window.scrollBy
window.scrollBy(0, 999999); window.scrollBy(0, -499999); window.scrollBy(0, -500000);
TEST_Body_DOM.scrollBy
TEST_Body_DOM.scrollBy(0, 999999); TEST_Body_DOM.scrollBy(0, -499999); TEST_Body_DOM.scrollBy(0, -500000);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
window.scrollTo
TEST_Body_DOM.scrollTop =
TEST_Body_DOM.scrollTo
TEST_Body_DOM.scroll
window.scroll
window.scrollBy
TEST_Body_DOM.scrollBy

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 7 hours ago)

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

Browser/OS: Chrome 131 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
window.scrollTo	434943.7 Ops/sec
TEST_Body_DOM.scrollTop =	316997.5 Ops/sec
TEST_Body_DOM.scrollTo	359135.0 Ops/sec
TEST_Body_DOM.scroll	367087.7 Ops/sec
window.scroll	422884.8 Ops/sec
window.scrollBy	399814.8 Ops/sec
TEST_Body_DOM.scrollBy	364784.1 Ops/sec

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

LLMs can make mistakes. Check important info.

**Overview**

The provided JSON represents a JavaScript microbenchmark test case on the MeasureThat.net website. The benchmark compares the performance of different ways to scroll or adjust the position of an element in a DOM (Document Object Model).

**Tested Options**

The following options are compared:

1. `window.scrollTo(x, y)`: Scrolls the window by `x` units horizontally and `y` units vertically.
2. `window.scrollBy(x, y)`: Scrolls the window by `x` units horizontally and `y` units vertically, but does not update the scroll position.
3. `TEST_Body_DOM.scrollTop = value`: Sets the top scroll position of an element to a given value.
4. `TEST_Body_DOM.scroll(x, y)`: Scrolls an element by `x` units horizontally and `y` units vertically.
5. `TEST_Body_DOM.scrollTo(x, y)`: Scrolls an element to a specific position `(x, y)`.

**Pros and Cons of Each Approach**

1. `window.scrollTo(x, y)`: This approach is simple and widely supported, but it can be slow due to the window's scrolling mechanism.
2. `window.scrollBy(x, y)`: This approach is faster than `window.scrollTo` because it updates the scroll position only when necessary, reducing unnecessary computations.
3. `TEST_Body_DOM.scrollTop = value`: This approach is specific to Internet Explorer and other older browsers that don't support the more modern `scrollTo` method. It's not widely supported and might be slower due to its use of DOM manipulation.
4. `TEST_Body_DOM.scroll(x, y)`: This approach is similar to `window.scrollTo` but uses a native DOM method, making it faster and more efficient than using `window.scrollBy`.
5. `TEST_Body_DOM.scrollTo(x, y)`: This approach is specific to older browsers that don't support the modern `scrollTo` method. It's not widely supported and might be slower due to its use of DOM manipulation.

**Library Usage**

None of the provided test cases uses any external libraries or frameworks beyond the standard JavaScript DOM API.

**Special JS Features/Syntax**

The test case doesn't reference any special JavaScript features or syntax, such as `async/await`, Promises, or modern language features like arrow functions.

**Other Alternatives**

Alternative approaches to compare could include:

* Using a virtual DOM (like React's) instead of a real DOM
* Implementing a custom scrolling algorithm or library
* Comparing performance on different browsers or platforms

Related benchmarks:

scrollTop vs scrollTo vs scrollBy vs scroll (version: 0)

Comparing performance of: window.scrollTo vs TEST_Body_DOM.scrollTop = vs TEST_Body_DOM.scrollTo vs TEST_Body_DOM.scroll vs window.scroll vs window.scrollBy vs TEST_Body_DOM.scrollBy

Created: one year ago by: Guest

Jump to the latest result

window.scrollTo

TEST_Body_DOM.scrollTop =

TEST_Body_DOM.scrollTo

TEST_Body_DOM.scroll

window.scroll

window.scrollBy

TEST_Body_DOM.scrollBy

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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