Run results for: Observed values

Run details:

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: Chrome 86

Operating system: Windows

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
Vanilla stay same	1917891.0 Ops/sec
Vanilla change	1916278.0 Ops/sec
Observed stay same	7309574.0 Ops/sec
Observed change	2529380.0 Ops/sec

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++;

Run results for: Observed values

Vanilla stay same

Vanilla change

Observed stay same

Observed change