Javascript：使用多种颜色优化大文本的插入

我的HTML中有一个pre环境，我正在使用Javascript向其中插入一个大字符串：

$my_environment.innerHTML = my_large_text;

该字符串大约有100000个字符长。当字符串仅由干净的文本组成时，一切正常。然而，当我尝试为大约1/3左右的许多字符添加颜色时，我通过将每个字母包装为

<span style="background-color:some-color;"></span>

有一个明显的延迟，在此期间，浏览器窗口——如果是Firefox，则是整个浏览器——被卡住

pre环境本身的大小有限，并且使用溢出，因此在文本更改期间实际上只需要绘制它的一小部分

造成延迟的原因是什么？是否有任何可能的解决方法

也许我可以用另一个环境来代替pre，但我不愿意。 颜色不一致；想象一下那些必须着色的字母是随机分布的。 我愿意考虑任何更好的方式来分配颜色的信件，而不是简单地包装他们的跨度环境，如果它会加快事情。

---

一个优化步骤可能是使用“class”标记而不是“style”标记。如果使用预定义的css类，则可以根据具体场景缩短渲染时间

---

另一种方法是让所有的字母都以单色呈现，但以id为单位的跨距元素呈现。然后，您可以使用Javascript为需要更改的字母上色。

我们是否可以看到包装文本元素的代码，因为这很可能是瓶颈所在？