Created
December 2, 2016 08:11
-
-
Save TakayoshiKochi/832b3bec7f4284d2b825cb7fd640da0d to your computer and use it in GitHub Desktop.
Benchmark for selectors with/without '>>>'
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, no shadow trees. | |
| for (let i = 0; i < 4; ++i) { | |
| let div1 = document.createElement('div'); | |
| for (let j = 0; j < 4; ++j) { | |
| let div2 = document.createElement('div'); | |
| for (let k = 0; k < 4; ++k) { | |
| let div3 = document.createElement('div'); | |
| for (let l = 0; l < 32; ++l) { | |
| let div4 = document.createElement('span'); | |
| div3.appendChild(div4); | |
| } | |
| div2.appendChild(div3); | |
| } | |
| div1.appendChild(div2); | |
| } | |
| root.appendChild(div1); | |
| } | |
| 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) { | |
| document.querySelectorAll('#root span'); | |
| } | |
| 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> |
This is a variant of
https://gist.github.com/TakayoshiKochi/04fe33f40543ce07bdc53ecdfb6cc2e0
without shadow roots.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
CONSOLE MESSAGE: line 47: Time :28.265msec <==
querySelectorAll('#root >>> span')CONSOLE MESSAGE: line 54: Time :23.775msec <==
querySelectorAll('#root span')CONSOLE MESSAGE: line 61: Time :968.6350000000002msec <== emulated JS