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);

Historical Performance Data aggregated from 130 community runs

Desktop Results:

Chrome 103 runs

window.scrollTo

161K/s

window.scroll

157K/s

window.scrollBy

145K/s

TEST_Body_DOM.scrollTo

142K/s

TEST_Body_DOM.scrollBy

141K/s

TEST_Body_DOM.scroll

138K/s

TEST_Body_DOM.scrollTop =

118K/s

Fastest: window.scrollTo (1.4x faster)

View exact numbers

✓ window.scrollTo: 161,312 ops/sec
• window.scroll: 157,062 ops/sec
• window.scrollBy: 145,147 ops/sec
• TEST_Body_DOM.scrollTo: 142,180 ops/sec
• TEST_Body_DOM.scrollBy: 140,606 ops/sec
• TEST_Body_DOM.scroll: 137,646 ops/sec
• TEST_Body_DOM.scrollTop =: 118,411 ops/sec

Firefox 15 runs

TEST_Body_DOM.scrollTop =

81K/s

TEST_Body_DOM.scrollTo

80K/s

TEST_Body_DOM.scroll

80K/s

TEST_Body_DOM.scrollBy

79K/s

window.scroll

77K/s

window.scrollTo

76K/s

window.scrollBy

75K/s

View exact numbers

✓ TEST_Body_DOM.scrollTop =: 80,556 ops/sec
• TEST_Body_DOM.scrollTo: 79,524 ops/sec
• TEST_Body_DOM.scroll: 79,516 ops/sec
• TEST_Body_DOM.scrollBy: 79,382 ops/sec
• window.scroll: 76,729 ops/sec
• window.scrollTo: 75,795 ops/sec
• window.scrollBy: 75,419 ops/sec

Safari 7 runs

TEST_Body_DOM.scrollTop =

40K/s

TEST_Body_DOM.scrollTo

39K/s

window.scrollBy

38K/s

TEST_Body_DOM.scroll

37K/s

window.scroll

37K/s

window.scrollTo

37K/s

TEST_Body_DOM.scrollBy

36K/s

Fastest: TEST_Body_DOM.scrollTop = (1.1x faster)

View exact numbers

✓ TEST_Body_DOM.scrollTop =: 39,885 ops/sec
• TEST_Body_DOM.scrollTo: 38,647 ops/sec
• window.scrollBy: 37,591 ops/sec
• TEST_Body_DOM.scroll: 37,212 ops/sec
• window.scroll: 37,040 ops/sec
• window.scrollTo: 36,687 ops/sec
• TEST_Body_DOM.scrollBy: 35,717 ops/sec

Mobile Results:

Chrome 5 runs

window.scrollTo

28K/s

window.scroll

27K/s

window.scrollBy

25K/s

TEST_Body_DOM.scrollTo

24K/s

TEST_Body_DOM.scroll

23K/s

TEST_Body_DOM.scrollBy

23K/s

TEST_Body_DOM.scrollTop =

21K/s

Fastest: window.scrollTo (1.3x faster)

View exact numbers

✓ window.scrollTo: 27,961 ops/sec
• window.scroll: 27,236 ops/sec
• window.scrollBy: 24,624 ops/sec
• TEST_Body_DOM.scrollTo: 23,624 ops/sec
• TEST_Body_DOM.scroll: 23,459 ops/sec
• TEST_Body_DOM.scrollBy: 23,342 ops/sec
• TEST_Body_DOM.scrollTop =: 21,289 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
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 months ago)

User agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:6.7) Goanna/6.7 PaleMoon/33.6.1

Browser/OS: Pale Moon (Firefox Variant) 33 on Windows 7

View result in a separate tab

TEST_Body_DOM.scrollTop =

13K/s

TEST_Body_DOM.scroll

13K/s

TEST_Body_DOM.scrollTo

13K/s

TEST_Body_DOM.scrollBy

13K/s

window.scroll

13K/s

window.scrollTo

13K/s

window.scrollBy

12K/s

View exact numbers

Test name	Executions per second
✓ TEST_Body_DOM.scrollTop =	13,178 Ops/sec
TEST_Body_DOM.scroll	13,074 Ops/sec
TEST_Body_DOM.scrollTo	13,058 Ops/sec
TEST_Body_DOM.scrollBy	13,000 Ops/sec
window.scroll	12,577 Ops/sec
window.scrollTo	12,559 Ops/sec
window.scrollBy	12,384 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year 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

scrollTop vs scrollTo vs scrollBy vs scroll (version: 0) Benchmark.js

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: 3 years ago by: Guest

Go 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

Historical Performance Data aggregated from 130 community runs

Desktop Results:

Chrome 103 runs

Firefox 15 runs

Safari 7 runs

Mobile Results:

Chrome 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

scrollTop vs scrollTo vs scrollBy vs scroll (version: 0) Benchmark.js

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: 3 years ago by: Guest

Go 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

Historical Performance Data aggregated from 130 community runs

Desktop Results:

Chrome 103 runs

Firefox 15 runs

Safari 7 runs

Mobile Results:

Chrome 5 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: `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`