Benchmark: inner / outer - MeasureThat.net

HTML Preparation code:

<body>
  <a href="//www.yahoo.com" target="_blank">Yahoo!</a><br/>
  <a href="//www.altavista.com" target="_blank">AltaVista</a><br/>
  <a href="//www.google.com" target="_blank">Google</a><br/>
</body>

Tests:

outer
(function registerHandlers() { var anchors = document.getElementsByTagName('a'); for (var i = 0; i < anchors.length; i++) { anchors[i].onclick = bla.bind(null, i); } function bla(i) { alert(i); return false; } })();
inner
(function registerHandlers() { var anchors = document.getElementsByTagName('a'); for (var i = 0; i < anchors.length; i++) { anchors[i].onclick = (function(idx) { return function() { alert(idx); return false; } })(i); } })();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
outer
inner

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 138 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
outer	2324008.0 Ops/sec
inner	2117838.5 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definition and test cases, explaining what's being tested, compared options, pros and cons, and other considerations.

**Benchmark Definition Overview**

The benchmark is designed to measure the performance difference between two approaches: inner and outer functions in JavaScript event handlers.

**Test Cases**

There are two test cases:

1. **"outer"**: This test case uses an outer function that binds a closure to each anchor element's `onclick` event.
```javascript
(function registerHandlers() {
  var anchors = document.getElementsByTagName('a');
  for (var i = 0; i < anchors.length; i++) {
    anchors[i].onclick = bla.bind(null, i);
  }
})();

function bla(i) {
  alert(i);
  return false;
}
```
In this approach, the `bla` function is defined outside the loop and bound to each anchor element using `bind`. This creates a closure that captures the current value of `i`.

2. **"inner"**: This test case uses an inner function that returns another function that captures the current value of `i`.
```javascript
(function registerHandlers() {
  var anchors = document.getElementsByTagName('a');
  for (var i = 0; i < anchors.length; i++) {
    anchors[i].onclick = (function(idx) {
      return function() {
        alert(idx);
        return false;
      }
    })(i);
  }
})();
```
In this approach, the inner function is defined inside the loop and returns another function that captures the current value of `i`. This closure is created by invoking the returned function with the current value of `i`.

**Comparison**

The benchmark compares the performance of these two approaches:

* **Outer Function Approach**: Creates a closure for each anchor element using `bind`.
* **Inner Function Approach**: Creates a closure by returning another function that captures the current value of `i` inside the loop.

**Pros and Cons**

**Outer Function Approach:**

Pros:

* Easy to understand and maintain
* No need to worry about scope or variable capture

Cons:

* Creates multiple closures, which can lead to performance issues due to memory allocation and garbage collection
* May not be suitable for large-scale applications or complex event handlers

**Inner Function Approach:**

Pros:

* More efficient in terms of memory usage since only one closure is created
* Can be more suitable for large-scale applications or complex event handlers

Cons:

* Can be harder to understand and maintain due to the use of nested functions
* Requires careful management of scope and variable capture to avoid issues with closures

**Other Considerations**

* **Browser-specific optimizations**: Some browsers may optimize the `bind` method or the returned function in the inner approach, which can affect performance.
* **Event handler overhead**: The benchmark does not account for the overhead of creating and managing event handlers, which can add additional performance impact.
* **Context switching**: The benchmark measures execution speed, but it does not consider context switching or other factors that may affect performance.

**Alternative Approaches**

Other approaches to handling event handlers in JavaScript include:

* Using a library like Lodash or Underscore.js to handle closures and event binding
* Implementing a custom event handler system using a function call stack or a closure-based approach
* Using a virtual DOM library like React or Angular to optimize event handling

Related benchmarks:

inner / outer (version: 0)

Comparing performance of: outer vs inner

Created: 8 years ago by: Guest

Jump to the latest result

outer

inner

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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