DOM walking: Recursive vs. Iterative

DOM walking: Recursive vs. Iterative · jsPerf

DOM walking: Recursive vs. Iterative

JavaScript performance comparison

Test case created on 18th March 2012

Preparation code

<script>
function domWalkRecursive(root, enter, exit) {
    var enter = enter || function () {},
        exit = exit || function () {},
        node = root;
    
    // Call enter callback, and check if it explicitly returns false
    if (enter && enter(node) === false) {
        // And return false
        return false;
    }
    // Move to first child
    node = node.firstChild;
    // Iterate through sibling nodes
    while (node) {
        // Recurse and check for false return value
        if (domWalkRecursive(node, enter, exit) === false) {
            return false;
        }
        node = node.nextSibling;
    }
    // Call exit callback on the parent node and listen for false return value
    if (exit && exit(root) === false) {
        return false;
    }
}

function domWalkIterative(root, enter, exit) {
    var node = root,
        exit = exit || function () {},
        enter = enter || function () {};
    
    start: while(node) {
            enter(node);
            if (node.firstChild) {
                    node = node.firstChild;
                    continue start;
            }
            while (node) {
                    exit(node);
                    if (node === root) {
                        break start;
                }
                    if (node.nextSibling) {
                            node = node.nextSibling;
                            continue start;
                    }
                    node = node.parentNode;
            }
    }
    
}
var output = ['', ''];
function logger(desc, i) {
    var desc = desc || '',
        i = i || 0;
    return function (node) {
        // Some trivial work to do with node
        output[i] += desc + node.nodeName + '\n';
    };
}
</script>
<div>
<p>This document contains a sample DOM tree to check tree traversal algorithms
with. There is an ASCII representation of it below.</p>
<p>Some sample content follows:</p>
<ul>
<li>An unordered list</li>
<li><ol>
<li>And a nested ordered list</li>
<li>...</li>
</ol></li>
<li>...</li>
</ul>
<div>
An implicit paragraph
<img alt="sample image" src="sample.jpg">  blah blah blah.
<p>And an explicit one</p>
</div>
And here is the Tree:
<pre>
HTML
    #Text*                                  \n
    HEAD
        #Text*                              \n
        TITLE
            #Text                           Sample Dom Tree
        #Text*                              \n
    #Text*                                  \n
    BODY
        #Text*                              \n
        DIV
            #Text*                          \n
            P
                #Text                       This document contains a ...
            #Text*                          \n
            P
                #Text                       Some sample content follows:
            #Text*                          \n
            UL
                #Text*                      \n
                LI
                    #Text                   An unordered list
                #Text*                      \n
                LI
                    OL
                        #Text*              \n
                        LI
                            #Text           And a nested ordered list
                        #Text*              \n
                        LI
                            #Text           ...
                        #Text*              \n
                #Text*                      \n
                LI
                    #Text                   ...
                #Text*                      \n
            #Text*                          \n
            DIV
                #Text                       \nAn implicit paragraph\n
                IMG
                #Text                       \s\sblah blah blah.\n
                P
                    #Text                   And an explicit one
                #Text*                      \n
            #Text                           \nAnd here is the Tree:\n
            PRE
                #Text                       HTML...
        DIV
        #Text*                              \n
    #Text*                                  \n
</pre></div>
<script>
  Benchmark.prototype.teardown = function() {
    if (output[1]) {
        console.log(output[0] === output[1]);
    }
  };
</script>

Preparation code output

This document contains a sample DOM tree to check tree traversal algorithms with. There is an ASCII representation of it below.

Some sample content follows:

• An unordered list
• 1. And a nested ordered list
  2. ...
• ...

An implicit paragraph blah blah blah.

And an explicit one

And here is the Tree:

HTML
    #Text*                                  \n
    HEAD
        #Text*                              \n
        TITLE
            #Text                           Sample Dom Tree
        #Text*                              \n
    #Text*                                  \n
    BODY
        #Text*                              \n
        DIV
            #Text*                          \n
            P
                #Text                       This document contains a ...
            #Text*                          \n
            P
                #Text                       Some sample content follows:
            #Text*                          \n
            UL
                #Text*                      \n
                LI
                    #Text                   An unordered list
                #Text*                      \n
                LI
                    OL
                        #Text*              \n
                        LI
                            #Text           And a nested ordered list
                        #Text*              \n
                        LI
                            #Text           ...
                        #Text*              \n
                #Text*                      \n
                LI
                    #Text                   ...
                #Text*                      \n
            #Text*                          \n
            DIV
                #Text                       \nAn implicit paragraph\n
                IMG
                #Text                       \s\sblah blah blah.\n
                P
                    #Text                   And an explicit one
                #Text*                      \n
            #Text                           \nAnd here is the Tree:\n
            PRE
                #Text                       HTML...
        DIV
        #Text*                              \n
    #Text*                                  \n

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Ready to run.

Run tests

Testing in Mozilla/5.0 (Windows NT 6.1; WOW64; rv:15.3) Gecko/20121108 Firefox/15.3 PaleMoon/15.3

Test		Ops/sec
Recursive	output[0] = ''; domWalkRecursive(document.documentElement, logger('entering ', 0), logger('exiting ', 0));	ready
Iterative	output[1] = ''; domWalkIterative(document.documentElement, logger('entering ', 1), logger('exiting ', 1));	ready

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