Benchmark: Observable values

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(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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 14_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0 Mobile/15E148 Safari/604.1

Browser/OS: Mobile Safari 14 on iOS 14.0.1

View result in a separate tab

Test name	Executions per second
Vanilla stay same	4853471.0 Ops/sec
Vanilla change	5037720.0 Ops/sec
Observed stay same	11246250.0 Ops/sec
Observed change	6732320.0 Ops/sec

Observable values (version: 0)

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

Created: 3 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