Benchmark: onresize vs onfullscreenchange

Tests:

A
window.onresize = function() { window.A = "ABCD"; }; window.onresize();
B
(window.onresize = function() { window.A = "ABCD"; })();
C
window.onresize = function() { window.A = "ABCD"; }; window.onresize();
D
(window.onresize = function() { window.A = "ABCD"; })();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
A
B
C
D

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36

Browser/OS: Chrome 126 on Windows

View result in a separate tab

Test name	Executions per second
A	320021.5 Ops/sec
B	470819.4 Ops/sec
C	305957.8 Ops/sec
D	463361.6 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.

**What is tested?**

The provided benchmark tests two approaches to setting up an event listener for the `onresize` event on the `window` object:

1. **IIFE (Immediately Invoked Function Expression)**: This approach uses a self-invoking function expression to immediately execute the code, which includes setting up the event listener.
2. **Synchronous assignment**: This approach assigns the event listener function directly to the `window.onresize` property.

**Options compared**

The two approaches have different pros and cons:

*   **IIFE (Immediately Invoked Function Expression)**:
    *   Pros: Prevents pollution of the global scope, ensures the code is executed immediately, and provides better isolation.
    *   Cons: Can be slower due to function creation and invocation overhead. May not be compatible with older browsers or environments that don't support IIFEs.
*   **Synchronous assignment**:
    *   Pros: Faster execution time since there's no additional function creation or invocation overhead.
    *   Cons: Pollutes the global scope, and if not done carefully, can lead to unexpected behavior due to the event listener being set multiple times.

**Library usage**

None of the test cases use any libraries. However, it's worth noting that some browsers may have built-in optimizations for certain types of event listeners, which could affect the results.

**Special JS feature or syntax**

There is a special syntax used in some test cases: **self-invoking function expression (IIFE)**. An IIFE is a function declaration followed immediately by parentheses `()`, creating an anonymous function that's executed right away. This technique helps prevent polluting the global scope and ensures code execution happens at runtime.

**Other alternatives**

If you're interested in exploring alternative approaches or variations, here are some additional options:

*   **Function expression with no parentheses**: You could try setting up the event listener as a simple function expression without immediately invoking it. This might give you an even better understanding of the overhead involved.
*   **Using `addEventListener` and `removeEventListener` instead**: Instead of directly assigning to `window.onresize`, consider using `addEventListener` to attach the event listener. This can be a good practice for managing event listeners in modern JavaScript.

Here is how you could modify one test case to use function expression with no parentheses:

*   Benchmark Definition: "window.onresize = function() {\r\n\twindow.A = \"ABCD\";\r\n};\r\n"
*   Test Name: "E"

Related benchmarks:

onresize vs onfullscreenchange (version: 0)

Comparing performance of: A vs B vs C vs D

Created: one year ago by: Guest

Jump to the latest result

A

B

C

D

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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