element.innerHTML = 性能很慢，有没有更快的方法来改变innerHTML？答案

【问题标题】：element.innerHTML = something is slow in preformance, is there a faster way to change innerHTML?element.innerHTML = 性能很慢，有没有更快的方法来改变innerHTML？
【发布时间】：2018-02-17 22:11:44
【问题描述】：

我需要更改 innerHTML 以向 PART OF 文本添加样式。但是，我注意到使用 element.innerHTML = 确实会减慢我的功能，尤其是我有一个 >100 的数组要更改。

那么在性能方面有没有更好的方法来为 innerHTML 添加样式？

或者有没有办法在不使用innerHTML的情况下显示像innerHTML这样的文本？

我的功能以防万一：

for (var i = 0; i < x.length; i++) {
        if(x[i].lastChild.className == "overlay"){
            //x[i].lastChild.innerHTML = x[i].lastChild.innerHTML.replace(/(<u>|<\/u>)/igm, "");

            if(!regexp.test(x[i].lastChild.innerHTML)){
                x[i].lastChild.style.opacity = 0;

            }else{
                x[i].lastChild.style.opacity = globalOpacityValue;

                //x[i].lastChild.innerHTML = x[i].lastChild.innerHTML.replace(/'">'+tempStore/,'"><u>'+tempStore+'</u>');

                if(x[i].lastChild.innerHTML=='<span style="color:'+textColor+'">' + tempStore + '</span>'){
                    x[i].lastChild.style.borderWidth = "thick";
                    x[i].lastChild.style.borderStyle = "solid";
                }

            }        
        }
    }

我很确定性能下降来自于 innerHTML，因为一旦我取下 cmets，就会发生这种情况。

【问题讨论】：

使用 CSS 类？
哦，对不起，我没有提到。需要更改的文本部分不固定，因此 CSS 标签或标签位置也需要更改。
你能显示更改前后的示例 HTML 吗？
我应该给你看什么？屏幕截图或一些代码？文字的风格变化就像：你输入一个代码（按键事件）。有超过 100 个叠加层有自己的 id。此函数根据您键入的内容在 id-s 的一部分下划线。
好的，正则表达式、不透明度和边框样式与此有何关系？（如果你能提供一个带有 2 个这样的覆盖的工作 sn-p 会更容易，所以我们可以看到它工作 - 它会解释更多的单词）。

标签： javascript innerhtml

【解决方案1】：

尽量不要使用正则表达式替换，因为您要替换固定术语。例如将您的第三行更新为：

x[i].lastChild.innerHTML = x[i].lastChild.innerHTML.replace("<u>", "").replace("</u>", "");

在此处查看基准：https://jsperf.com/replace-string-vs-regex/6

【讨论】：

我觉得这个改动稍微提升了性能，我能感觉到。所以谢谢！