javascript - 解析dom元素的更有效方法？

Question

我有一些 HTML 需要解析。

基本上，我正在遍历给定元素的 dom。抓取文本节点和元素节点。

当我遇到文本节点时，我将它们逐个字符地打印到不同的元素中。每个字符都放置在它自己的范围内，具有自己的样式，该样式取自任何附加样式的元素节点。

因此，当找到一个元素节点时，它的样式将应用于检测到的任何文本节点，直到找到另一个元素节点并将旧样式替换为新样式。

下面的代码有效。如果您在源元素中有一个句子或一个短段落，它会在不到一秒钟的时间内准确地再现文本。文本越长，花费的时间就越长(duh)。

有趣的是，目标元素中已有的文本越多，花费的时间就越长。因此，如果我在同一个源元素上运行此函数 10 次，并处理相同的文本主体，则第 10 次运行速度将比第 1 次慢，大概是因为在元素中呈现文本更难已经有内容。

不管怎样，我真的需要找到一种方法让这个东西运行得更快。

最后，这是这个东西可能需要处理的示例 HTML 片段:

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

生成的 HTML 将是:

<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> 
.......

没什么特别的。

代码如下:

代码:

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);
    }

}

编辑:
谷歌文档就是使用此类系统的一个示例。

当用户将文本粘贴到文档中时，它首先呈现在屏幕外，然后使用与此函数类似(我假设)的函数进行处理。然后重新打印文档中的文本。这一切都发生得非常快(除非文本很长)。

Answer 1

您似乎是直接将新元素插入到 DOM 树中，所以我认为您不这样做可以获得最好的改进。

避免一个一个插入很多元素。每次插入元素时，浏览器都必须重新计算页面的布局，这需要时间。

相反，将节点添加到不在 DOM 中的元素，最好使用 DocumentFragment , 可以通过 document.createDocumentFragment 创建.

然后你所要做的就是插入这个片段，浏览器只需要重新计算一次。

更新:

您还可以尝试使用正则表达式将文本转换为 span 元素。

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

至少在我的天真测试中(不确定测试用例这样是否好)，它比创建 span 元素并将它们添加到文档片段中执行得更好:

更新 2: 我调整了测试以设置生成的元素/字符串作为元素的内容，遗憾的是，这带走了使用 替换。但它可能仍然值得测试:

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

---

您还应该避免重复访问属性:

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);
            }
        }       
    }
}