Question

I have been trying different methods of doing this, however they are all quite slow.

noGlobalTags is an array containing three tags.

Method 1:

var textNodeWalker = document.createTreeWalker(node, NodeFilter.SHOW_TEXT, function(node){return (noGlobalTags.indexOf(node.tagName)==-1)? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_REJECT;}, false);
var cn;
while(cn = textNodeWalker.nextNode()){
  textNodeEmoteParser(cn);
}
return;

Method 2:

function getTextNodes(node) {
    if(node.nodeType == 3) {
        textNodeEmoteParser(node);
    } else {
        for(var i = 0, len = node.childNodes.length; i < len; ++i) {
            if(noGlobalTags.indexOf(node.childNodes[i].tagName)!=-1) {
                continue;
            }
            getTextNodes(node.childNodes[i]);
        }
    }
}

getTextNodes(node);

I had expected method 1 to be the quickest, however it took double as long as the second method. Am I doing something stupid here? If not, can I make it faster than the second method?

Answer 1

In javascript, inline code (as in the 2nd example), is nearly always faster than using callbacks (as in the 1st example). Javascript has a meaningful amount of overhead for a function call.

So, the generic treeWalker method with callbacks isn’t as likely to every be as fast as a direct coded method in your 2nd example.

One finds the same thing is true when comparing a for loop direct iteration of an array to a .forEach() iteration of the same array for the same reaons. Callback functions are slow.

The code with callback functions can often be more generically useful and sometimes much shorter, but not necessarily faster to execute.

This shouldn’t be surprising if you think about what’s happening in javascript. To call a function, it has to do a lookup of the name, then it has to create a new function context, pass the parameters to the function, create any local variables in that function, execute the code in that function, clean up all of the above when done, return from that function and continuing execution after the function call. The inline code version skips a lot of these steps.

FYI, you can speed both of them up if you put the tags in an object instead of an array:

var noGlobalTags = {"LI": true, "UL": true};

Then, you can check if a given tag is in that list with this type of code:

noGlobalTags[node.tagName]                    // your first example

or

if (noGlobalTags[node.childNodes[i].tagName])   // your second example

which should be significantly faster than the array search you are currently using.

Here’s a non-recursive version that also uses the faster noGlobalTags lookup:

function getTextNodes(top) {
    var queue = [], index, item, node;

    // put the first node into the work queue
    queue.unshift({nodes: [top], pos: 0});

    // keep going while more work to go
    while (queue.length) {
        item = queue[0];
        index = item.pos++;
        // if there are more items to go, process the next one
        if (index < item.nodes.length) {
            node = item.nodes[index];
            if (node.nodeType == 3) {
                // if it's a text node, call the parser
                textNodeEmoteParser(node);
            } else {
                // not a text node, get it's children
                // and put them at the start of the array 
                // to be processed next
                if (node.childNodes.length && !noGlobalTags[node.tagName]) {
                    queue.unshift({nodes: node.childNodes, pos: 0});
                }
            }
        } else {
            // no more of these children to process
            // remove them from the queue
            queue.shift();
        }
    }
}

EDIT: nearly 100x faster. I found a different method that actually just walks the tree directly that is a lot faster:

function customIterativeTreeWalker(root) {
    var node = root.firstChild;
    while(node != null) {
        if(node.nodeType == 3) {
            textNodeEmoteParser(node);
        }
        if (node.hasChildNodes()) {
            // if it has a tagName and the tabName is in our table
            // skip going into the tag
            if (node.tagName && noGlobalTags[node.tagName]) {
                node = node.nextSibling;
            } else {
                // go down into the children
                node = node.firstChild;
            }
        } else {
            while (node.nextSibling == null) {
                node = node.parentNode;
                if (node == root) {
                    return;
                }
            }
            node = node.nextSibling;
        }
    }
}

JSPerf here: http://jsperf.com/get-text-nodes-non-recursive/3