Run results for: MutationObserver: disconnect/reconnect vs. variable switch to avoid recursion

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36

Browser: Chrome 130

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

variable switch

2.3M/s

disconnect/reconnect

1.1M/s

View exact numbers

Test name	Executions per second
✓ variable switch	2,288,868 Ops/sec
disconnect/reconnect	1,084,511 Ops/sec

HTML Preparation code:

<div id="test">Test</div>

Script Preparation code:

const __OBSERVER = Symbol('observer');
const div = document.getElementById('test');

function update1() {
	if(!div[__OBSERVER]) {
		div[__OBSERVER] = new MutationObserver(mutations => update1());
	} else {
		div[__OBSERVER].disconnect();
	}

	div.style.opacity = parseInt(div.style.opacity) ? 0 : 1;

	div[__OBSERVER].observe(div, { attributeFilter: ['style'] });
}

function update2() {
	if(!div[__OBSERVER]) {
		div[__OBSERVER] = new MutationObserver(mutations => update2());
	} else {
		div[__OBSERVER].disconnect();
	}

	div.style.opacity = parseInt(div.style.opacity) ? 0 : 1;

	div[__OBSERVER].observe(div, { attributeFilter: ['style'] });
	div[__OBSERVER].observe(div, { characterData: true, subtree: true });
}

Tests:

disconnect/reconnect with 1 observe
update1();
disconnect/reconnect with 2 observes
update2();

Run results for: MutationObserver: disconnect/reconnect vs. variable switch to avoid recursion

disconnect/reconnect with 1 observe

disconnect/reconnect with 2 observes