<body style="height: 999999px;">
TEST_Body_DOM = document.body;
window.scrollTo(0, 999999);
window.scrollTo(0, 499999);
window.scrollTo(0, 0);
TEST_Body_DOM.scrollTop = 999999;
TEST_Body_DOM.scrollTop = 499999;
TEST_Body_DOM.scrollTop = 0;
TEST_Body_DOM.scrollTo(0, 999999);
TEST_Body_DOM.scrollTo(0, 499999);
TEST_Body_DOM.scrollTo(0, 0);
TEST_Body_DOM.scroll(0, 999999);
TEST_Body_DOM.scroll(0, 499999);
TEST_Body_DOM.scroll(0, 0);
window.scroll(0, 999999);
window.scroll(0, 499999);
window.scroll(0, 0);
window.scrollBy(0, 999999);
window.scrollBy(0, -499999);
window.scrollBy(0, -500000);
TEST_Body_DOM.scrollBy(0, 999999);
TEST_Body_DOM.scrollBy(0, -499999);
TEST_Body_DOM.scrollBy(0, -500000);
--enable-precise-memory-info
flag.
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 |
Test name | Executions per second |
---|---|
window.scrollTo | 11454.6 Ops/sec |
TEST_Body_DOM.scrollTop = | 9869.1 Ops/sec |
TEST_Body_DOM.scrollTo | 12815.0 Ops/sec |
TEST_Body_DOM.scroll | 12676.1 Ops/sec |
window.scroll | 14923.6 Ops/sec |
window.scrollBy | 13199.6 Ops/sec |
TEST_Body_DOM.scrollBy | 13037.2 Ops/sec |
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:
window.scrollTo(x, y)
: Scrolls the window by x
units horizontally and y
units vertically.window.scrollBy(x, y)
: Scrolls the window by x
units horizontally and y
units vertically, but does not update the scroll position.TEST_Body_DOM.scrollTop = value
: Sets the top scroll position of an element to a given value.TEST_Body_DOM.scroll(x, y)
: Scrolls an element by x
units horizontally and y
units vertically.TEST_Body_DOM.scrollTo(x, y)
: Scrolls an element to a specific position (x, y)
.Pros and Cons of Each Approach
window.scrollTo(x, y)
: This approach is simple and widely supported, but it can be slow due to the window's scrolling mechanism.window.scrollBy(x, y)
: This approach is faster than window.scrollTo
because it updates the scroll position only when necessary, reducing unnecessary computations.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.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
.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: