Javascript：优化插入具有多种颜色的大文本

Question

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

$my_environment.innerHTML = my_large_text;

该字符串长约100,000个字符。当字符串仅由干净的文本组成时，一切都很好。但是，当我尝试为许多字符添加颜色（大约1/3左右）时，我通过包装每个字母来完成

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

有一个明显的延迟，在此期间浏览器窗口 - 以及Firefox的情况下，整个浏览器 - 都被卡住了。

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

造成延误的原因是什么可以解决？

1. 也许我可以使用其他环境而不是pre，但我宁愿不这样做。
2. 颜色不是并发的;想想必须随机分配的字母。
3. 我愿意考虑更好的方法来为字母分配颜色，而不是简单地用跨度环境包装它们，如果它会加快速度。

Answer 1

一个优化步骤可能是使用'class'标签而不是'style'标签。如果您使用预定义的css类，则可能会根据具体情况减少渲染时间。

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