Benchmark: comparison between proxy and simple function call on object

comparison between proxy and simple function call on object (version: 0) Benchmark.js

comparison between proxy and simple function call on object for setting and getting

Comparing performance of: `setting array vs setting object vs setting array proxy vs setting object proxy vs getting array vs getting object vs getting array proxy vs getting object proxy`

Created: 4 years ago by: Guest

Go to the latest result

Script Preparation code:

var o = {}, ar=[];

function set(o, k, v){
  o[k] =v;
}
function get(o, k){
  return o[k];
}

var proxyHandler = {
  set(o,k,v){
    o[k]=v;
    return true;
  },
  get(o,k){return o[k];}
};

var op = new Proxy({}, proxyHandler);
var arp = new Proxy([], proxyHandler);


function randomInt(min, max){
  return Math.floor(Math.random() * (max - min + 1)) + min;
}
function randomString(length){
  var result = '';
  var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  var charactersLength = characters.length;
  for ( var i = 0; i < length; i++ ) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
}
var keys = [];
for(var i=0; i<20; i++){
  keys.push(randomString(randomInt(2, 10)));
}
var count = 1000000

Tests:

setting array
for(var i=0; i<count; i++){ let i = randomInt(0, 20); set(ar, i, keys[i]); }
setting object
for(var i=0; i<count; i++){ let i = randomInt(0, 20); set(o, keys[i], i); }
setting array proxy
for(var i=0; i<count; i++){ let i = randomInt(0, 20); arp[i] = keys[i]; }
setting object proxy
for(var i=0; i<count; i++){ let i = randomInt(0, 20); op[keys[i]] = i; }
getting array
for(var i=0; i<count; i++){ let i = randomInt(0, 20); get(ar, i); }
getting object
for(var i=0; i<count; i++){ let i = randomInt(0, 20); get(ar, keys[i]); }
getting array proxy
for(var i=0; i<count; i++){ let i = randomInt(0, 20); arp[i]; }
getting object proxy
for(var i=0; i<count; i++){ let i = randomInt(0, 20); op[keys[i]]; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
setting array
setting object
setting array proxy
setting object proxy
getting array
getting object
getting array proxy
getting object proxy

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

setting array

199/s

getting object proxy

54/s

setting object proxy

52/s

getting array

41/s

getting object

31/s

setting object

20/s

setting array proxy

19/s

getting array proxy

18/s

View exact numbers

Test name	Executions per second
✓ setting array	199 Ops/sec
getting object proxy	54 Ops/sec
setting object proxy	52 Ops/sec
getting array	41 Ops/sec
getting object	31 Ops/sec
setting object	20 Ops/sec
setting array proxy	19 Ops/sec
getting array proxy	18 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance difference between using a simple function call and a Proxy object to set and get properties on an object.

**Options Compared**

Two options are compared:

1. **Simple Function Call**: Using the `set` and `get` functions to modify and retrieve values from the object.
2. **Proxy Object**: Using a Proxy object to control access to the object's properties.

**Key Concepts**

* **Proxy Object**: An object that acts as an intermediary between your code and another object, allowing you to customize its behavior without modifying the original object.
* **`set` and `get` functions**: Built-in JavaScript functions used to modify and retrieve values from an object.

**Performance Comparison**

The benchmark compares the performance of both options by executing a series of set and get operations on an object. The results show that using a Proxy object can provide better performance compared to simple function calls, especially for larger datasets or more complex scenarios.

**Why is this significant?**

This benchmark is relevant because it highlights the importance of optimizing code performance in high-traffic applications or systems where every millisecond counts. By understanding how different approaches impact performance, developers can make informed decisions about which method to use in their own projects.

**Takeaways**

* Using a Proxy object can provide better performance compared to simple function calls for setting and getting properties on an object.
* Optimizing code for performance is crucial in high-traffic applications or systems.
* Understanding the trade-offs between different approaches is essential for making informed decisions about code optimization.