Benchmark: Event listener anonymous function vs named inline function vs external function

HTML Preparation code:

<div id="element"></div>

Script Preparation code:

var element	  = document.getElementById('element');
var iterations  = 100;
var dummyString = 'Hello';

Tests:

Anonymous function
for (var i = 0; i < iterations; i++) { element.addEventListener('click', function() { element.textContent = dummyString; }); }
Named function as parameter
for (var i = 0; i < iterations; i++) { element.addEventListener('click', function setText() { element.textContent = dummyString; }); }
External function
function setText() { 'use strict'; element.textContent = dummyString; } for (var i = 0; i < iterations; i++) { element.addEventListener('click', setText); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Anonymous function
Named function as parameter
External function

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 months ago)

User agent: Mozilla/5.0 (Linux; Android 8.1.0; ASUS_X00HD) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.7103.125 Mobile Safari/537.36

Browser/OS: Chrome Mobile 136 on Android 8.1.0

View result in a separate tab

Test name	Executions per second
Anonymous function	5.0 Ops/sec
Named function as parameter	1.8 Ops/sec
External function	2.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its options.

**Benchmark Description**

The test compares the performance of three different approaches to add an event listener to an HTML element:

1. **Anonymous Function**: Passing an anonymous function as the second argument to `addEventListener()`.
2. **Named Inline Function**: Passing a named inline function as the second argument to `addEventListener()`, like this: `function setName(){...}`
3. **External Function**: Declaring a separate external function and passing its name as the second argument to `addEventListener()`.

**Options Compared**

The benchmark is comparing three options:

* Anonymous function
* Named inline function (with a named function declared inside the script)
* External function (with a separate function declared beforehand)

**Pros and Cons of Each Approach:**

1. **Anonymous Function**: Easy to use, no declaration overhead. However, this approach may lead to slower performance due to the creation of a new scope on each iteration.
2. **Named Inline Function**: Easy to read and maintain, as the function name is declared inside the script. The performance difference might be negligible compared to the anonymous function.
3. **External Function**: Generally considered best practice for modular code organization. It may have a slight overhead due to function lookup, but it's still relatively efficient.

**Library Usage**

There is no explicit library usage in this benchmark, as all test cases use built-in JavaScript functionality.

**Special JS Feature/Syntax**

The test case uses `for...of` loop, which was introduced in ECMAScript 2015 (ES6). However, since the test is using older browsers like Chrome 121, it's likely that the browser doesn't support this feature. Instead, an older syntax (`for(var i = 0; i < iterations; i++)`) is used.

**Alternative Approaches**

Other approaches to add an event listener could include:

* Using a library like Lodash or Ramda for utility functions
* Creating a class with a `addEventListener` method
* Using a framework-specific event handling mechanism (e.g., React's `useEffect`)
* Using Web Workers or other parallel execution mechanisms

Related benchmarks:

Event listener anonymous function vs named inline function vs external function (version: 0)

This test compares performance of addEventListener(), when it's passed anonymous function, named inline function and function declared beforehand.

Comparing performance of: Anonymous function vs Named function as parameter vs External function

Created: 9 years ago by: Guest

Jump to the latest result

Anonymous function

Named function as parameter

External function

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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