探寻 DOM 获取方法的性能差异

Benchmark created on

Description

比较 getElement 系列和 querySelector 系列性能差异

Preparation HTML

<div id="myId"></div>

Setup

const fragment = document.createDocumentFragment();

for (let i = 0; i < 5000; i++) {
	const el = document.createElement('div');
	el.className = "item";
	fragment.appendChild(el);
}

document.body.appendChild(fragment);

Test runner

Ready to run.

Testing in
TestOps/sec
getElementById
document.getElementById('myId')
ready
querySeletor
document.querySelector('#myId')
ready
getElementsByClassName
document.getElementsByClassName('item')
ready
querySelectorAll
document.querySelectorAll('.item')
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.