Question

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

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

我希望根据它的值逐字显示文本作为热图。可能有许多单词/句子在大型文本语料库中显得很热，导致许多字体标签：

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

示例：

<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，这会导致浏览器变得非常慢。在滚动或与文本交互时可以看到这一点。

有没有提供更好性能的替代方案？我需要文本可以选择，所以图像是不够的。

Answer 1

我在JS Fiddle中创建了两个测试来近似你的问题所描述的内容，一个使用类，另一个以编程方式为文本分配内联颜色：

基于内联的值数组： http://jsfiddle.net/h6kd5zu4/

["Lorem", 0],
["ipsum", 1],
["dolor", 2],
...

let colourList = [
  ["000"],
  ["111"],
  ["222"],
  ...

let theColor = colourList[randomWords[i][1]];
let listItem = "<p style='color:#" + theColor + "'>" + randomWords[i][0] + "</p>";

基于类的值数组： http://jsfiddle.net/cjgwuk2q/

["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;
}

结果

对于数组10000个项目，差异相当小：

内联颜色： 34毫秒
CSS课程： 20ms

通过使用CSS类预先指定每个项目可以节省一些成本但是它非常小。

考虑到这是一个包含10000个项目的列表，并且它在大约30ms内加载，您在谈论多少项目，以及您如何实际将项目添加到DOM？

我创建了第三个测试，它将每个项目写入DOM，而不是先构建一个“虚拟”项目，然后一次性附加整个项目。我想知道你是否在每次添加时重写DOM，如果是这样的话，这需要相当长的时间，大约需要5秒才能获得2000个项目：

http://jsfiddle.net/k6mnefLb/

可能的解决方案

如果上述情况没有为您的情况提供任何帮助，您可以尝试以下方法之一：

构建视图后端，以便客户端没有那么多繁重的DOM工作
将列表拆分为结果块，或者在用户滚动/交互时延迟加载结果或将它们放入多个页面/分页部分

Html文本颜色热图很多字体标签（慢）

1 个答案:

结果

可能的解决方案