Benchmark: Which scroll is best?

HTML Preparation code:

<main id="container" style="width: 100px; overflow-x: auto;"></main>

Script Preparation code:

const container = document.getElementById("container");

for (i = 0; i < 1000; i++) {
    const elem = document.createElement('div');
    elem.style.width = "1000px";
    container.appendChild(document.createElement('div'));
}

Tests:

set scrollLeft directly
container.querySelectorAll('div').forEach(element => { element.scrollLeft = 500; });
use scrollTo
container.querySelectorAll('div').forEach(element => { element.scrollTo(500, 0); });

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
set scrollLeft directly
use scrollTo

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 132 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
set scrollLeft directly	3282.5 Ops/sec
use scrollTo	3152.3 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The provided benchmark compares two approaches to scrolling an element with 1000 child div elements: setting the `scrollLeft` property directly and using the `scrollTo` method. The goal is to determine which approach is faster.

**Options Compared**

There are only two options being compared:

1. **set scrollLeft directly**: This involves calling the `scrollLeft` property on each element, effectively setting the horizontal scroll position.
2. **use scrollTo**: This involves using the `scrollTo` method on each element, moving the cursor to a specific horizontal and vertical position.

**Pros and Cons**

**set scrollLeft directly**

Pros:

* More intuitive and familiar for most developers
* Less overhead since it only requires accessing an existing property

Cons:

* May require more calculations or iterations to achieve the desired effect (e.g., calculating the `scrollLeft` value based on the element's width)

**use scrollTo**

Pros:

* Can be faster due to less overhead, as it doesn't require setting a property
* May be more efficient for large numbers of elements

Cons:

* Requires more complex method call and may incur additional function overhead
* Less intuitive for some developers

**Library Usage**

There is no explicit library mentioned in the benchmark setup. However, the `element.scrollTo` method is used, which suggests that it might be a part of a library or framework (e.g., jQuery UI).

**Special JS Feature/Syntax**

None are explicitly mentioned in this example. The use of arrow functions (`=>`) and template literals (`\r\n`) are modern JavaScript features but not critical to understanding the benchmark.

**Other Alternatives**

For a more comprehensive comparison, other approaches could be:

* Using `setInterval` or `setTimeout` with `scrollLeft` setter (more complex and less efficient)
* Implementing custom scrolling logic using CSS animations or Web Animations API
* Utilizing browser-specific optimizations or features (e.g., Chrome's `scrollTo` optimization)

The provided benchmark is a good starting point for exploring the performance differences between these two common scrolling approaches in JavaScript.

Related benchmarks:

Which scroll is best? (version: 0)

Comparing performance of: set scrollLeft directly vs use scrollTo

Created: 4 years ago by: Guest

Jump to the latest result

set scrollLeft directly

use scrollTo

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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