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

disconnect/reconnect with 1 observe

1.2M/s

disconnect/reconnect with 2 observes

974K/s

View exact numbers

Test name	Executions per second
✓ disconnect/reconnect with 1 observe	1,190,947 Ops/sec
disconnect/reconnect with 2 observes	973,994 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();