Javascript 使用Raphael.js高效地绘制文本

我正在使用Raphael.js绘制图表，遇到了一个关于文本的性能问题。我目前正在使用以下模式绘制文本：

var labels = paper.set();    

for (var i = 0; i < 6; i++ ) {
  labels.push(paper.text(0, i * 10, 'my text'));
}

labels.attr({'font-size',10});

var labels=paper.set（）；
对于（变量i=0；i<6；i++）{
标签.推送（纸.文本（0，i*10，'我的文本'）；
}
attr（{'font-size'，10}）；

---

然而，使用这种方法似乎非常缓慢。我可以绘制400个矩形（使用单个路径字符串），速度是向图表添加6个标签速度的两倍。是否有任何方法可以批量生成文本绘图，或者有其他更快的方法？目前，我几乎80%的绘图时间都花在添加标签上。

如您的示例所示，我已经使用

console.time（）

测试了以下内容。您的

push

似乎增加了约10%的时间，而您的

attr

调用几乎使过程加倍。例如：

for (var i = 0; i < 4200; i++ ) {
  labels.push(paper.text(0, i * 10, 'my text'));
}

其中，当我们删除attr调用时：

for (var i = 0; i < 4200; i++ ) {
  paper.text(0, i * 10, 'my text');
}

通过链接执行此操作对性能几乎没有影响

for (var i = 0; i < 4200; i++ ) {
  labels.push(paper.text(0, i * 10, 'my text').attr({'font-size':10}));
}

接下来，我们分析了字符串中的字符数，以确定所绘制的字符数与所用时间之间是否存在任何直接相关性

paper.text（5，i*10，'0'）导致
绘制时间：2974ms

paper.text（5，i*10，'text'）导致绘制时间为3122ms，可忽略

现在，让我们试试你提到的长方形。让我们使用相同的定位绘制相同的数量，并且只更改一些不会影响渲染时间（宽度和高度）的属性

正如数字所示，我相信这是因为我们正在用更复杂的曲线绘制向量。一个平方向量公式将以指数形式缩短，并且比一系列字母及其曲线更容易计算
 我不确定这是否有用，但我发现使用普通div作为文本标签（而不是向量）相当快。
我不确定这是否真的回答了我的问题，但我很欣赏这一分析。我的主要问题是，使用矩形，可以创建一个路径字符串来生成数百个矩形，但据我所知，Raphael.js中没有类似的文本方法-文本必须立即添加到纸张中。后来我改用d3.js，同样的测试在Raphael.js中需要6872毫秒（4200个文本块，字体大小）需要2351毫秒。很抱歉，我似乎没有结束我的文章！没有办法（如果存在常用词，除了导入文本路径）执行您的请求。Raphael不像其他一些库那样健壮或强大，但非常可靠且易于使用。说到优化，我发现使用香草javascript是最好的选择。探索这两个库的文本方法以了解问题所在，也许您可以编写一个比它们更好的实现。举个“路径字符串”的例子真的很有帮助！
labels: 3011ms
attr: 0ms

for (var i = 0; i < 4200; i++ ) {
  labels.push(paper.text(0, i * 10, 'my text').attr({'font-size':10}));
}

draw: 5759ms

for (var i = 0; i < 4200; i++ ) {
  paper.rect(5, i * 10, 50, 50);
}

draw: 333ms