Benchmark: Callback vs Proxy apply

Script Preparation code:

// callback
const callbackBase = (cb) => {
	return cb() + 1;
};

globalThis.callbackTest = () => callbackBase(() => 2);

// proxy
const proxyBase = (a) => {
	return a + 1;
};

globalThis.proxyTest = new Proxy(proxyBase, {
    apply: (
      wrappingTarget,
      thisArg,
      args,
    ) => {
        return wrappingTarget.apply(thisArg, [2]);
    }
});

Tests:

Callback
callbackTest();
Proxy.apply
proxyTest()

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Callback
Proxy.apply

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.3.1 Safari/605.1.15

Browser/OS: Safari 17 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Callback	18844770.0 Ops/sec
Proxy.apply	7656402.0 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to explain what's being tested in this benchmark.

**Benchmark Overview**

The benchmark compares two different approaches to extend the behavior of a function: callbacks and proxies with `apply`. The goal is to determine which approach is faster, especially when considering production solutions where performance might be a concern.

**Options Compared**

There are two options being compared:

1. **Callbacks**: A callback is a function passed as an argument to another function, allowing the called function to execute asynchronously.
2. **Proxies with `apply`**: A proxy is an object that acts as a representative for another object, and it allows us to intercept and modify its behavior. In this case, we're using a proxy with `apply` to extend the behavior of a function.

**Pros and Cons**

**Callbacks:**

Pros:

* Simple to implement
* Wide support across browsers and platforms

Cons:

* Can lead to callback hell (nested callbacks), making code harder to read and maintain
* May introduce performance issues due to the overhead of creating and invoking functions

**Proxies with `apply`:**

Pros:

* Allow for more fine-grained control over function behavior
* Can avoid some of the issues associated with callbacks (e.g., callback hell)

Cons:

* More complex to implement compared to callbacks
* May introduce performance penalties due to the overhead of creating and managing proxies

**Library and Purpose**

In this benchmark, we're using the `Proxy` constructor to create a proxy object. The purpose of the proxy is to intercept the `apply` method and modify its behavior.

**Special JS Feature or Syntax**

The benchmark uses JavaScript's `new Proxy()` syntax to create the proxy object. This syntax was introduced in ECMAScript 2015 (ES6) as part of the Proxy API.

**Other Considerations**

When choosing between callbacks and proxies with `apply`, consider the following factors:

* Code readability and maintainability: If you need fine-grained control over function behavior, proxies might be a better choice. However, if simplicity is more important, callbacks might be sufficient.
* Performance: Proxies can introduce performance penalties due to the overhead of creating and managing them. In this benchmark, we're measuring the performance difference between callbacks and proxies with `apply`.
* Browser support: Both callbacks and proxies have wide browser support, but you should still test your code across different browsers and platforms.

**Alternatives**

If you need to extend function behavior, consider using other approaches, such as:

* Higher-order functions (e.g., `map()`, `filter()`)
* Closures
* Decorators (if supported by your browser or platform)

However, for most use cases, callbacks and proxies with `apply` will suffice.

Related benchmarks:

Callback vs Proxy apply (version: 1)

Compare extension techniques using callback and proxy. For sure callbacks should be faster, but when Proxy is considered as production solution so be aware of performance penalty

Comparing performance of: Callback vs Proxy.apply

Created: 2 years ago by: Registered User

Jump to the latest result

Callback

Proxy.apply

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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