Benchmark: TreeWalker - MeasureThat.net

HTML Preparation code:

<div>
  <span id="start"> Hello </span>
  <div>
    <img src="http://placehold.it/100x75" />
  </div>
  <div>
    <span> include me </span>
  </div>
  <span id="end">World</span>
  <span>don't include me</span>
</div>

Tests:

Better Solution
function getPath(a) { var path = []; while (a !== null) { path.push(a); a = a.parentNode; } path.reverse(); return path; } function getLCA(a,b) { var aPath = getPath(a); var bPath = getPath(b); var lca; for (var i = 0; i < aPath.length && aPath[i] === bPath[i]; i++) { lca = aPath[i]; } return lca; } function getHighlightedText(a, b) { var passedA = false; var passedB = false; var text = ''; var lca = getLCA(a,b); function traverse(node) { if (node === a) { passedA = true; } if (passedA && node.nodeType === 3) { text += node.nodeValue; } if (node === b) { passedB = true; return; } var child = node.firstChild; while (child !== null && !passedB) { traverse(child); child = child.nextSibling; } } traverse(lca); return text; } getHighlightedText( document.getElementById('start').firstChild, document.getElementById('end').firstChild );
Optimal Solution
function getHighlightedText(a, b) { var text = a.nodeValue; var cur = a; while (cur !== b) { if (cur.firstChild !== null) { cur = cur.firstChild; } else { while (cur.nextSibling === null) { cur = cur.parentNode; } cur = cur.nextSibling; } if (cur.nodeType === 3) { text += cur.nodeValue; } } return text; } getHighlightedText( document.getElementById('start').firstChild, document.getElementById('end').firstChild );
TreeWalker
function getHighlightedText(a, b) { var passedA = false; var text = ''; const treeWalker = document.createTreeWalker( document.body, NodeFilter.SHOW_TEXT ); while (treeWalker.nextNode()) { const node = treeWalker.currentNode; if (node === a) { passedA = true; } if (passedA) { text += node.nodeValue; } if (node === b) { break; } } return text; } getHighlightedText( document.getElementById('start').firstChild, document.getElementById('end').firstChild );
TreeWalker with LCA
function getPath(a) { var path = []; while (a !== null) { path.push(a); a = a.parentNode; } path.reverse(); return path; } function getLCA(a,b) { var aPath = getPath(a); var bPath = getPath(b); var lca; for (var i = 0; i < aPath.length && aPath[i] === bPath[i]; i++) { lca = aPath[i]; } return lca; } function getHighlightedText(a, b) { var passedA = false; var text = ''; var lca = getLCA(a,b); const treeWalker = document.createTreeWalker( lca, NodeFilter.SHOW_TEXT ); while (treeWalker.nextNode()) { const node = treeWalker.currentNode; if (node === a) { passedA = true; } if (passedA) { text += node.nodeValue; } if (node === b) { break; } } return text; } getHighlightedText( document.getElementById('start').firstChild, document.getElementById('end').firstChild );
Creative Solution
function getHighlightedText(a, b) { var all = document.getElementsByTagName('*'); var filtered = ""; var aPassed = false; for (var i = 0; i < all.length; i++) { var elem = all[i]; if (elem.firstChild === a) { aPassed = true; } if (elem.firstChild && elem.firstChild.nodeType === 3 && aPassed) { filtered += elem.firstChild.nodeValue; } if (elem.firstChild == b) { break; } }; return filtered; } getHighlightedText( document.getElementById('start').firstChild, document.getElementById('end').firstChild );

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Better Solution
Optimal Solution
TreeWalker
TreeWalker with LCA
Creative Solution

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/94.0.4606.71 Safari/537.36

Browser/OS: Chrome 94 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
Better Solution	358983.7 Ops/sec
Optimal Solution	586655.1 Ops/sec
TreeWalker	414573.8 Ops/sec
TreeWalker with LCA	312832.8 Ops/sec
Creative Solution	204264.8 Ops/sec

TreeWalker (version: 0)

Comparing performance of: Better Solution vs Optimal Solution vs TreeWalker vs TreeWalker with LCA vs Creative Solution

Created: 2 years ago by: Guest

Jump to the latest result

Better Solution

Optimal Solution

TreeWalker

TreeWalker with LCA

Creative Solution

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A