Benchmark: Observed values - MeasureThat.net

HTML Preparation code:

<div id="foo"></div>

Script Preparation code:

var element = document.getElementById("foo");

class Observed {
    constructor(onChange) {
        this._onChange = onChange;
    }

    get value() {
        return this._val;
    }

    set value(val) {
        if (this._val !== val) {
            this._val = val;
            this._onChange(this._val);
        }
    }
}

var obs = new Observed(async val => {
    element.setAttribute("visibility", "hidden");
});
obs.value = 5;

var val = 5;

Tests:

Vanilla stay same
val = val; element.setAttribute("visibility", "hidden");
Vanilla change
val++; element.setAttribute("visibility", "hidden");
Observed stay same
obs.value = obs.value;
Observed change
obs.value++;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Vanilla stay same
Vanilla change
Observed stay same
Observed change

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 86 on Windows

View result in a separate tab

Test name	Executions per second
Vanilla stay same	1917890.8 Ops/sec
Vanilla change	1916278.2 Ops/sec
Observed stay same	7309574.0 Ops/sec
Observed change	2529379.8 Ops/sec

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

LLMs can make mistakes. Check important info.

**Benchmark Overview**

MeasureThat.net is a website that allows users to create and run JavaScript microbenchmarks. The provided benchmark definition and test cases are used to measure the performance of different approaches in updating a variable's value and triggering an event.

**Script Preparation Code**

The script preparation code creates an object called `Observed` with a constructor that takes an asynchronous function as an argument (`onChange`). When the `value` property is set, it checks if the new value is different from the current one. If so, it updates the `_val` property and calls the `onChange` function.

The `obs.value = 5;` line sets the initial value of the `value` property to 5. The `var val = 5;` line creates a local variable `val` with the same value as the `value` property.

**Html Preparation Code**

The HTML preparation code creates an empty `<div>` element with the id "foo".

**Individual Test Cases**

There are four test cases:

1. **Vanilla stay same**: Updates the `element.setAttribute("visibility", "hidden");` line to just `val = val;`.
2. **Vanilla change**: Updates the `element.setAttribute("visibility", "hidden");` line to `val++`.
3. **Observed stay same**: Updates the `obs.value = obs.value;` line to just `obs.value;`.
4. **Observed change**: Updates the `obs.value++;` line to just `obs.value`.

**Comparison of Approaches**

The test cases compare different approaches to updating a variable's value and triggering an event:

1. **Vanilla stay same**:
	* Pro: Simple and straightforward.
	* Con: Does not trigger the `onChange` event, which may be unnecessary if it is not used elsewhere in the code.
2. **Vanilla change**:
	* Pro: Triggers the `onChange` event, which can be useful for callback functionality.
	* Con: Increments the value instead of setting it to a new value, which may lead to unexpected behavior if not handled correctly.
3. **Observed stay same**:
	* Pro: Does not trigger the `onChange` event, but sets the value to its current value without incrementing or modifying it.
	* Con: May be less useful than the vanilla approach for callback functionality.
4. **Observed change**:
	* Pro: Triggers the `onChange` event and increments the value, which can be useful for scenarios where a new value is expected.
	* Con: Increments the value instead of setting it to a new value, which may lead to unexpected behavior if not handled correctly.

**Library: `Observed`**

The `Observed` object is a custom class that provides a simple way to create an observable variable. It has two properties: `value` and `_val`. When the `value` property is set, it updates the `_val` property and calls the `onChange` function.

**Special JS Feature/Syntax**

There are no special JavaScript features or syntax mentioned in this benchmark. The code only uses standard JavaScript syntax and does not rely on any proprietary or experimental features.

**Other Alternatives**

If you want to run this benchmark yourself, here's an example of how you can recreate the script:

```javascript
var element = document.getElementById("foo");

class Observed {
  constructor(onChange) {
    this._onChange = onChange;
  }

get value() {
    return this._val;
  }

set value(val) {
    if (this._val !== val) {
      this._val = val;
      this._onChange(this._val);
    }
  }
}

var obs = new Observed(async val => {
  element.setAttribute("visibility", "hidden");
});

obs.value = 5;

// Test cases
function vanillaStaySame() {
  var val = 5;
  var new_val = val;
  new_val = new_val; // just update the value without incrementing or modifying it
}

function vanillaChange() {
  var val = 5;
  val++; // increment the value instead of setting it to a new value
}

function observedStaySame() {
  obs.value = obs.value;
}

function observedChange() {
  obs.value++;
}
```

You can run this code in a JavaScript environment, such as Node.js or a browser's developer console, and compare its performance with the original benchmark.

Related benchmarks:

Observed values (version: 0)

Comparing performance of: Vanilla stay same vs Vanilla change vs Observed stay same vs Observed change

Created: 4 years ago by: Guest

Jump to the latest result

Vanilla stay same

Vanilla change

Observed stay same

Observed change

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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