TakayoshiKochi/deep-combinator-benchmark.html

## deep-combinator-benchmark.html
<!DOCTYPE html>
<body>
  <div id="root"></div>
</body>
<script>
'use strict';

if (window.testRunner) {
  testRunner.dumpAsText();
}

let root = document.querySelector('#root');

// Build a DOM tree which is 4x4x4x32 = 2048 spans, 64 shadow roots
for (let i = 0; i < 4; ++i) {
  let div1 = document.createElement('div');
  let root1 = div1.attachShadow({mode: 'open'});
  for (let j = 0; j < 4; ++j) {
    let div2 = document.createElement('div');
    let root2 = div2.attachShadow({mode: 'open'});
    for (let k = 0; k < 4; ++k) {
      let div3 = document.createElement('div');
      let root3 = div3.attachShadow({mode: 'open'});
      for (let l = 0; l < 32; ++l) {
        let div4 = document.createElement('span');
        root3.appendChild(div4);
      }
      root2.appendChild(div3);
    }
    root1.appendChild(div2);
  }
  root.appendChild(div1);
}

// This isn't really a polyfill for '>>>'.
function recursiveFindSpans(root, spans) {
  root.querySelectorAll('*').forEach(e => {
    if (e.tagName === 'SPAN')
      spans.push(e);
    if (e.shadowRoot)
      spans = recursiveFindSpans(e.shadowRoot, spans);
  });
  return spans;
}

var start = window.performance.now();
for (let i = 0; i < 100; ++i) {
  document.querySelectorAll('#root >>> span');
}
var end = window.performance.now();
console.log('Time :' + (end - start) + 'msec');

start = window.performance.now();
for (let i = 0; i < 100; ++i) {
  recursiveFindSpans(document.querySelector('#root'), []);
}
end = window.performance.now();
console.log('Time :' + (end - start) + 'msec');
</script>
	<!DOCTYPE html>
	<body>
	<div id="root"></div>
	</body>
	<script>
	'use strict';

	if (window.testRunner) {
	testRunner.dumpAsText();
	}

	let root = document.querySelector('#root');

	// Build a DOM tree which is 4x4x4x32 = 2048 spans, 64 shadow roots
	for (let i = 0; i < 4; ++i) {
	let div1 = document.createElement('div');
	let root1 = div1.attachShadow({mode: 'open'});
	for (let j = 0; j < 4; ++j) {
	let div2 = document.createElement('div');
	let root2 = div2.attachShadow({mode: 'open'});
	for (let k = 0; k < 4; ++k) {
	let div3 = document.createElement('div');
	let root3 = div3.attachShadow({mode: 'open'});
	for (let l = 0; l < 32; ++l) {
	let div4 = document.createElement('span');
	root3.appendChild(div4);
	}
	root2.appendChild(div3);
	}
	root1.appendChild(div2);
	}
	root.appendChild(div1);
	}

	// This isn't really a polyfill for '>>>'.
	function recursiveFindSpans(root, spans) {
	root.querySelectorAll('*').forEach(e => {
	if (e.tagName === 'SPAN')
	spans.push(e);
	if (e.shadowRoot)
	spans = recursiveFindSpans(e.shadowRoot, spans);
	});
	return spans;
	}

	var start = window.performance.now();
	for (let i = 0; i < 100; ++i) {
	document.querySelectorAll('#root >>> span');
	}
	var end = window.performance.now();
	console.log('Time :' + (end - start) + 'msec');

	start = window.performance.now();
	for (let i = 0; i < 100; ++i) {
	recursiveFindSpans(document.querySelector('#root'), []);
	}
	end = window.performance.now();
	console.log('Time :' + (end - start) + 'msec');
	</script>