Question

我有一个带有innerText的A-Tag，想要用2个新标签替换它，一个DIV-Tag用A的内部文本替换，另一个标签是＆＃39; I＆＃39 ; -Tag附加在DIV-Tag之后：

之前：

<a>hello world</>

后：

<a>
 <div>hello world</div>
 <i></i>
</a>

我有两种选择都可行：

1。方式：

var items = document.querySelectorAll('#mytags a');
for (var i = 0; i < items.length; i++) {
    node_a = items[i];
    var txt_a = node_a.innerText;
    var txt_span = document.createElement('div');
    txt_span.innerHTML = txt_a;
    node_a.innerText = '';
    node_a.appendChild(txt_span);

    var icon_node = document.createElement('i');
    node_a.appendChild(icon_node);
}

2。方式：

var items = document.querySelectorAll('#mytags a');
[].forEach.call(items, function(a) {

            var txt_a = a.innerText;
            var txt_span = document.createElement('div');
            txt_span.innerHTML = txt_a;
            a.innerText = '';
            a.appendChild(txt_span);

            var icon_node = document.createElement('i');
            a.appendChild(icon_node);
        });

然而，两者都有效，当只有大约50个A标签时，性能非常糟糕。我怎样才能让它更快？

例如，在Safari或Firefox中渲染时，渲染I-tag的内容时会有1-2秒的时间延迟。 I-Tag的内容由css类关联：

#mytags a>i:after{
    font-family: 'FontAwesome';

    content: '\f054';
    position: absolute;
    height: 100%;
    right: 0;
    top: 0;
    width: 20px;
}

问题是，我的循环是最快的方式还是时滞的原因是什么？我的A-Tags不超过50个。

createElement，appendChild性能最差的循环

0 个答案: