Benchmark: Object function binding vs closure

Script Preparation code:

const QUEUE_1 = new Map([
  [{}, {}],
  [{}, {}],
  [{}, {}],
  [{}, {}],
  [{}, {}],
  [{}, {}],
  [{}, {}]
]);
const QUEUE_2 = new Map([
  [{}, {}],
  [{}, {}],
  [{}, {}],
  [{}, {}],
  [{}, {}],
  [{}, {}],
  [{}, {}]
]);

let BUFFER = -1;

function run() {
  QUEUE_1.clear();
  QUEUE_2.clear();
}

const cancel = window.cancelAnimationFrame;
const request = window.requestAnimationFrame;

var OBJECT = {
  _buffer: -1,
  _queue1: new Map([
    [{}, {}],
    [{}, {}],
    [{}, {}],
    [{}, {}],
    [{}, {}],
    [{}, {}],
    [{}, {}]
  ]),
  _queue2: new Map([
    [{}, {}],
    [{}, {}],
    [{}, {}],
    [{}, {}],
    [{}, {}],
    [{}, {}],
    [{}, {}]
  ]),
  runGlobal() {
    cancelAnimationFrame(BUFFER);
    BUFFER = requestAnimationFrame(run);
  },
  runBoundOwn() {
    cancelAnimationFrame(this._buffer);
    this._buffer = requestAnimationFrame(this._run);
  },
  runGlobalRafCached() {
    cancel(BUFFER);
    BUFFER = request(run);
  },
  runBoundOwnRafCached() {
    cancel(this._buffer);
    this._buffer = request(this._run);
  },
  _run() {
    this._queue1.clear();
    this._queue2.clear();
  }
};

OBJECT._run.bind(OBJECT);

Tests:

global method lookup
OBJECT.runGlobal();
bound own method
OBJECT.runBoundOwn();
global method lookup w/cache
OBJECT.runGlobalRafCached();
bound own method w/cache
OBJECT.runBoundOwnRafCached();

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
global method lookup
bound own method
global method lookup w/cache
bound own method w/cache

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
global method lookup	1303613.2 Ops/sec
bound own method	1478247.9 Ops/sec
global method lookup w/cache	2014127.6 Ops/sec
bound own method w/cache	2346823.8 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, and their pros and cons.

**Benchmark Definition JSON**

The benchmark is testing two approaches to binding methods in JavaScript:

1. **Object function binding**: `OBJECT.runBoundOwn()`
2. **Closure-based method binding**: `OBJECT.runGlobalRafCached()`

The script creates a test object `OBJECT` with various methods, including `runGlobal()` and `runBoundOwn()`. The methods are bound to the `OBJECT` context using two different approaches:

* `runGlobal()` is bound using the global scope's `this` keyword.
* `runBoundOwn()` uses the `_bind` method (not shown in the code) or a closure-based approach, where the function is defined inside another function and captures the `OBJECT` context.

**Individual Test Cases**

The test cases are designed to measure the performance difference between these two approaches. Each test case executes one of the methods with a specific name:

1. **Global method lookup**: `OBJECT.runGlobal()`
2. **Bound own method**: `OBJECT.runBoundOwn()`
3. **Global method lookup w/cache**: `OBJECT.runGlobalRafCached()`
4. **Bound own method w/cache**: `OBJECT.runBoundOwnRafCached()`

**Pros and Cons of Each Approach**

1. **Object function binding (`OBJECT.runBoundOwn()`)**:
	* Pros: Simple and straightforward, no additional overhead.
	* Cons: May lead to slower performance due to the need for a separate `this` context lookup.
2. **Closure-based method binding (`OBJECT.runGlobalRafCached()`)**:
	* Pros: Can provide better performance by avoiding the extra `this` context lookup.
	* Cons: Requires additional syntax and may be less readable.

**Other Considerations**

* The use of `requestAnimationFrame` ( Raf ) introduces a caching mechanism, which can affect the performance results. This caching is not explicitly mentioned in the benchmark definition but is likely an important consideration for the test cases.
* The `_bind` method used in some implementations is not shown in the code, so its impact on performance and readability is unknown.

**Alternatives**

If you're interested in exploring alternative approaches to binding methods, consider:

1. **Arrow functions**: Can simplify method binding without losing performance benefits.
2. **Function expressions with `this` context preservation**: Using a closure-based approach with explicit `this` context preservation can provide better performance and readability.

When testing or experimenting with these alternatives, keep in mind the specific use case and requirements to ensure you're choosing the best approach for your needs.

Related benchmarks:

Object function binding vs closure (version: 0)

Comparing performance of: global method lookup vs bound own method vs global method lookup w/cache vs bound own method w/cache

Created: 4 years ago by: Guest

Jump to the latest result

global method lookup

bound own method

global method lookup w/cache

bound own method w/cache

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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