Javascript Html文本颜色热映射大量字体标记（慢速）

我目前正在编写一个返回数组或[word，value]元组的应用程序。例如：

var data = 
[['Hello', 1]
['world', 1]
['how', 5]
['are', 9]
['you', 16]
['?', 1]]

我想根据文本的值将文本逐字显示为热图。在一个大型文本语料库中，可能有许多单词/句子看起来很热，从而导致许多字体标记：

<font color="#{value}">{word}</font>

{word}

例如：

<font color="#111">hello</font>
<font color="#111">world</font>
<font color="#555">how</font>
<font color="#999">are</font> 
<font color="#FFF">you</font>
<font color="#111">?</font>

你好 世界 怎样 是 你 ? 所有标记都会创建一个巨大的DOM，这可能会导致浏览器变得非常慢。这可以在滚动或与文本交互时看到

---

是否有提供更好性能的替代方案？我需要文本是可选择的，这样图像就不够了。

我用JS FIDLE创建了两个测试，一个使用类，另一个通过编程为文本指定内联颜色：

基于内联的值数组：

[“Lorem”，0]，
[“ipsum”，1]，
[“多洛”，2]，
...
让颜色列表=[
["000"],
["111"],
["222"],
...
让颜色=颜色列表[随机词[i][1]；
let listItem=“

["Lorem","zero"],
["ipsum","one"],
["dolor","two"],
...

let listItem = "<p class="+ randomWords[i][1] +">" + randomWords[i][0] + "</p>";

<p class="zero">Lorem</p>

.zero {
  color: #000;
}