Benchmark: Object vs Proxy vs Proxy setter

Script Preparation code:

object = { test: 1 }

proxy = new Proxy(object, {})

proxyWithHandler = new Proxy(object, {
  set(target, prop, value) {
    target[prop] = value
  }
})

Tests:

Object
object.test = 1
Proxy
proxy.test = 1
Proxy setter
proxyWithHandler.test = 1

Historical Performance Data aggregated from 41 community runs

Desktop Results:

Chrome 34 runs

Object

104.5M/s

Proxy

4.9M/s

Proxy setter

2.8M/s

Fastest: Object (37.1x faster)

View exact numbers

✓ Object: 104,470,712 ops/sec
• Proxy: 4,872,278 ops/sec
• Proxy setter: 2,814,304 ops/sec

Firefox 7 runs

Object

1133.3M/s

Proxy setter

10.1M/s

Proxy

6.4M/s

Fastest: Object (177.9x faster)

View exact numbers

✓ Object: 1,133,327,360 ops/sec
• Proxy setter: 10,109,966 ops/sec
• Proxy: 6,372,111 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Object
Proxy
Proxy setter

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 147 on Windows

View result in a separate tab

Object

109.1M/s

Proxy

5.9M/s

Proxy setter

3.1M/s

View exact numbers

Test name	Executions per second
✓ Object	109,119,808 Ops/sec
Proxy	5,943,361 Ops/sec
Proxy setter	3,097,658 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 and explore what's being tested in this benchmark.

**Benchmark Overview**

The provided JSON represents a benchmark test that compares the performance of three different approaches: objects, proxies, and proxy setters. The benchmark is designed to measure the execution time of assigning a value to a property on these three entities.

**Options Compared**

1. **Objects**: A traditional JavaScript object with a property `test` is used as a baseline.
2. **Proxies**: A new Proxy object is created with the original object as its target, and an empty handler object is provided. This allows us to measure the overhead of proxy creation and traversal.
3. **Proxy Setters**: Another type of proxy, called a "proxy setter," is used. This type of proxy has a custom `set` handler that modifies the value assigned to the property instead of just updating the target object's own property.

**Pros and Cons**

*   **Objects**:
    *   Pros: Simple and straightforward, with no overhead.
    *   Cons: May not accurately represent real-world scenarios where objects are used extensively.
*   **Proxies**:
    *   Pros: Accurately represents how proxies work in JavaScript, including creation and traversal overhead.
    *   Cons: Requires more memory allocation due to the proxy object itself and its associated metadata.
*   **Proxy Setters**:
    *   Pros: Provides additional insight into how setters are used in real-world scenarios, which can be useful for optimizing code.
    *   Cons: May introduce unnecessary overhead if not optimized correctly.

**Library and Purpose**

In this benchmark, the `Proxy` constructor is used to create a proxy object. The purpose of creating a proxy is to measure its performance compared to other approaches. In JavaScript, proxies allow you to intercept and manipulate property access, making them useful for implementing complex logic or adding additional functionality to existing objects.

**Special JS Feature/Syntax**

In this benchmark, the `Proxy` constructor and its associated methods (e.g., `set`) are used, which introduces some special features of JavaScript. The `Proxy` constructor is a built-in function that creates a new proxy object based on an existing target object and a handler object. This allows you to customize how property access and modification are handled.

**Alternatives**

Other alternatives for this benchmark could include:

*   **WeakMaps**: Instead of using objects or proxies, WeakMaps could be used to store values in memory. This would eliminate the overhead of creating an object or proxy but might not provide the same level of flexibility.
*   **Native Web Storage**: Another alternative could be to use native web storage (e.g., `localStorage`) instead of objects or proxies. However, this approach would depend on the specific requirements and constraints of the project.

**Best Practices**

When working with JavaScript benchmarks like this one, consider the following best practices:

*   Keep your benchmark code as simple and concise as possible to ensure accurate results.
*   Use meaningful names for variables and functions to make it easier to understand the benchmark's intent.
*   Consider using a testing framework or library that provides features like parallel execution and statistical analysis to help optimize and interpret your benchmark results.

By understanding what's being tested in this benchmark, you can better appreciate the importance of optimizing code performance, especially when dealing with common operations like property assignment.

Object vs Proxy vs Proxy setter (version: 0) Benchmark.js

Comparing performance of: `Object vs Proxy vs Proxy setter`

Created: 5 years ago by: Registered User

Go to the latest result

Object

Proxy

Proxy setter

Historical Performance Data aggregated from 41 community runs

Desktop Results:

Chrome 34 runs

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Object vs Proxy vs Proxy setter (version: 0) Benchmark.js

Comparing performance of: Object vs Proxy vs Proxy setter

Created: 5 years ago by: Registered User

Go to the latest result

Object

Proxy

Proxy setter

Historical Performance Data aggregated from 41 community runs

Desktop Results:

Chrome 34 runs

Firefox 7 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `Object vs Proxy vs Proxy setter`