querySelector查询性能较低
querySelector() 功能非常强大，但是性能相较getElementXX差距很大
尤其是在查询tagName、class的场景
用比较笨拙的循环方式，对比一下
代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
console.time('query tag'); for(let i=0; i<100000; i++) { document.querySelector('code') } console.timeEnd('query tag'); console.time('query id'); for(let i=0; i<100000; i++) { document.querySelector('#id') } console.timeEnd('query id'); console.time('query class'); for(let i=0; i<100000; i++) { document.querySelector('.name') } console.timeEnd('query class'); console.time('get tag'); for(let i=0; i<100000; i++) { document.getElementsByTagName('code') } console.timeEnd('get tag'); console.time('get class'); for(let i=0; i<100000; i++) { document.getElementsByClassName('name') } console.timeEnd('get class'); console.time('get id'); for(let i=0; i<100000; i++) { document.getElementById('id') } console.timeEnd('get id'); |
结果
|
1 2 3 4 5 6 |
query tag: 4318.153076171875ms query id: 20.3408203125ms query class: 5084.10498046875ms get tag: 10.2529296875ms get class: 18.80810546875ms get id: 7.49609375ms |
|
1 2 3 4 5 6 |
query tag: 4097.14697265625ms query id: 14.91796875ms query class: 5148.7919921875ms get tag: 11.726806640625ms get class: 18.40869140625ms get id: 7.871826171875ms |
所以在get可满足的场景下，建议优先使用get
