Created
December 2, 2016 07:36
-
-
Save TakayoshiKochi/04fe33f40543ce07bdc53ecdfb6cc2e0 to your computer and use it in GitHub Desktop.
Benchmark for '>>>' and polyfill comparison.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Note on the number of nodes:
So the speed up (29ms vs 909ms) roughly correlates the number of number of shadow roots (fast case) : number of nodes scanned (slow case).