javascript - Javascript：优化插入多种颜色的大文本

Question

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

$my_environment.innerHTML = my_large_text;

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

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

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

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

是什么导致了延迟，有什么办法可以解决吗？

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

Answer 1

一个优化步骤可能是使用“类”标签而不是“风格”标签。如果您使用预定义的 css 类，您可以根据具体情况减少渲染时间。

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