Question

I have some HTML I need to parse.

Basically I’m walking through the dom of a given element. Grabbing text nodes, and element nodes.

As I come across text nodes, I print them into a different element character by character. Each character is placed into it’s own span, with its own style, which was taken from any element node found with a style attached.

So when an element node is found, it’s style is applied to any text node detected until another element node is found and the old style is replaced with the new one.

The code below works. If you have a sentence or a short paragraph in the source element it reproduces the text accurately in less than a second. The longer the text gets the longer it takes (duh).

Interestingly, the more text that is already in the destination element, the longer it takes. So if I’ve ran this function 10 times on the same source element, with the same body of text being processed, it will run slower the 10th time through than the 1st time through, presumably because it’s harder to render the text in an element that already has content.

Anyway, I really need to find a way to make this thing run faster.

Lastly, here is an example HTML snippet this thing might need to process:

<span style='blah: blah;'> Some text </span><span>Even more text </span> <p> stuff </p>

The resulting HTML would be:

<span style='blah: blah;'>S</span>
<span style='blah: blah;'>o</span>
<span style='blah: blah;'>m</span>
<span style='blah: blah;'>e</span>
<span style='blah: blah;'> </span> 
<span style='blah: blah;'>t</span>
<span style='blah: blah;'>e</span>
<span style='blah: blah;'>x</span>
<span style='blah: blah;'>t</span> 
.......

Nothing fancy.

Here’s the code:

Code:

ed.rta_to_arr_paste = function(ele, cur_style) {

    var child_arr = ele.childNodes;

    if(!(is_set(cur_style))) {
        cur_style = {};
    }

    for(var i = 0; i < child_arr.length; i++) {
        if(child_arr[i].nodeType == 1) {
            if(cur_style != child_arr[i].style) {
                cur_style = child_arr[i].style;
            }
        } else if(child_arr[i].nodeType == 3) {

            for(var n = 0; n < child_arr[i].nodeValue.length; n++) {

                var span = ed.add_single_char(child_arr[i].nodeValue.charAt(n), cur_style);
            }
        }
        ed.rta_to_arr_paste(child_arr[i], cur_style);
    }

}

EDIT:
One example of a system like this being used is in google docs.

When a user pastes text into the document, it’s first rendered off screen, then processed with a function similar (I’m assuming) to this one. It then reprints the text in the document.
It all happens extremely fast (unless the text is very long).

Answer 1

It seems you are directly inserting the new elements into the DOM tree, so I think you can get the best improvement by not doing that.

Avoid inserting a lot of elements one by one. Every time you insert an element, the browser has to recalculate the layout of the page and this takes time.

Instead, add the nodes to an element not in the DOM, the best would be using a DocumentFragment, which can be created via document.createDocumentFragment.

Then all you have to do is to insert this fragment and the browser only has to do one recalculation.

Update:

What you could also try is to use regular expressions to convert the text into the span elements.

var html = value.replace(/(.)/g, "<span>$1</span>")

At least in my naive test (not sure if the testcases are good this way), it performs much better than creating span elements and adding them to the document fragment:

Update 2: I adjusted the tests to also set the generated elements/string as content of an element and sadly, this takes away all the speed of using replace. But it might still be worth testing it:

http://jsperf.com/regex-vs-loop

---

You should also avoid repeated property access:

ed.rta_to_arr_paste = function(ele, cur_style) {

    var child_arr = ele.childNodes;

    if(!(is_set(cur_style))) {
        cur_style = {};
    }

    for(var i = 0, l = child_arr; i <l; i++) {
        var child = child_arr[i];
        if(child.nodeType == 1) {
            // this will always be true, because `el.style` returns an object
            // so comparing it does not make sense. Maybe just override it always
            if(cur_style != child.style) { 
                cur_style = child.style;
            }
            // doesn't need to be called for other nodes
            ed.rta_to_arr_paste(child, cur_style); 
        } 
        else if(child.nodeType == 3) {
            var value = child.nodeValue;
            for(var n = 0, ln = value.length; n < ln; n++) {
                ed.add_single_char(value.charAt(n), cur_style);
            }
        }       
    }
}