Benchmark: Window test - MeasureThat.net

HTML Preparation code:

<!doctype html>

<html lang="en">
<body>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
</body>
</html>

Script Preparation code:

function test1($) {
    var $body = $('body'),
        scrollTop = $(window).scrollTop(),
        $innerWidth = $(window).innerWidth();

    $body.addClass('prevent-scroll-y');
    $innerWidth = $(window).innerWidth() - $innerWidth;
    $body.css('padding-right', $innerWidth).css({
        'top': -scrollTop
    });
    $body.attr({
        'data-scroll': scrollTop,
        'data-scrollbar': $innerWidth
    });
}

function test2($) {
    var $body = $('body'),
        $window = $(window),
        scrollTop = $window.scrollTop(),
        $innerWidth = $window.innerWidth();

    $body.addClass('prevent-scroll-y');
    $innerWidth = $window.innerWidth() - $innerWidth;
    $body.css('padding-right', $innerWidth).css({
        'top': -scrollTop
    });
    $body.attr({
        'data-scroll': scrollTop,
        'data-scrollbar': $innerWidth
    });
}

Tests:

test1
test1($);
test2
test2($);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
test1
test2

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark definition and explain what's being tested.

**Benchmark Overview**

The test measures the performance of two JavaScript microbenchmarks, `test1` and `test2`, which are related to scrolling and window manipulation in web browsers.

**Benchmark Definitions**

The two benchmark definitions, `test1` and `test2`, differ in how they manipulate the browser's scroll position and inner width. Here's a brief description of each:

### test1

In `test1`, the script:

1. Gets the current scroll top position (`scrollTop`) and inner width (`innerWidth`) of the window using jQuery.
2. Adds a class `"prevent-scroll-y"` to the body element.
3. Calculates the new inner width by subtracting the original inner width from the current window's inner width.
4. Sets the `padding-right` CSS property to the new calculated value, effectively "pushing" the content away from the right edge of the viewport.
5. Sets the `top` CSS property to `-scrollTop`, which positions the body element relative to the scroll top position.

### test2

In `test2`, the script is similar to `test1`, but with a few differences:

1. Uses `$window` instead of `$body` to get the window object.
2. Calculates the new inner width in a different order, which may affect performance.

**Options Comparison**

The two benchmark definitions compare different approaches to manipulating browser scrolling and window properties:

Pros of `test1`:

* Simplistic approach: uses jQuery's built-in methods for getting scroll top and inner width.
* Easy to understand and maintain.

Cons of `test1`:

* May have performance implications due to the repeated use of jQuery's DOM manipulation functions.

Pros of `test2`:

* Different calculation order may reduce memory allocations or improve caching.
* Possibly more efficient than `test1`, but this is speculative without benchmarking data.

**Library**

Both benchmark definitions rely on jQuery, a popular JavaScript library for DOM manipulation and event handling. The script includes the jQuery library, which is loaded from a CDN.

**Special JS Feature/Syntax**

Neither of the benchmark definitions utilizes any special JavaScript features or syntax beyond standard ECMAScript 5 (ES5) and ES6 (ECMAScript 2015) features.

**Alternatives**

Other alternatives for measuring browser performance could include:

* Using V8's built-in `performance` API to measure execution time.
* Utilizing WebAssembly (WASM) benchmarks, which can provide a more accurate measurement of JavaScript engine performance.
* Implementing custom microbenchmarks that exercise specific browser features or engines.

However, these alternatives may require significant changes to the benchmark definitions and testing infrastructure.

Related benchmarks:

Window test (version: 0)

Comparing performance of: test1 vs test2

Created: 4 years ago by: Guest

Jump to the latest result

test1

test2

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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