DOM Walking vs. nodeIterator

Benchmark created on

Description

It's been my experience that since nodeIterator is "deep only" the need to filter by parent makes it slow and wasteful since it's walking text nodes even if your SHOW_BY irestricted to elements. Worse still it returns the "root" tag as part of the set.

It is NOT a useful construct and really serves no purpose for element walking with firstElementChild and nextElementSibling available.

Setup

let ul = document.createElement("ul");
for (let i = 0x400; i--; ul.appendChild(document.createElement("li")).textContent = i);

Teardown

ul.remove();
delete ul;

Test runner

Ready to run.

Testing in
TestOps/sec
DOM Walking
{
  let li = ul.firstElementChild;
  if (li) do {
    li.classList.add("test");
    li.style.color = "red";
    li.textContent = "test";
  } while (li = li.nextElementSibling);
}
ready
nodeIterator
{
	const nodeIterator = document.createNodeIterator(
		ul,
		NodeFilter.SHOW_ELEMENT,
		(element) =>
			element.parentNode === ul ?
			NodeFilter.FILTER_ACCEPT :
			NodeFilter.FILTER_REJECT
	);;
	let li;
	while (li = nodeIterator.nextNode()) {
		li.classList.add("test");
		li.textContent = "test";
		li.style.color = "red";
	}
}
ready

Revisions

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