使用Raphael.js有效地绘制文本

Question

我正在使用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});

但是，使用这种方法似乎非常慢。 我可以绘制400个矩形（使用单个路径字符串），速度是我向图表添加6个标签的两倍。 有没有办法批处理文本绘图或以更快的方式执行此操作？ 目前，我的绘画时间几​​乎有80％用于添加标签。

Answer 1

在您的示例中，我使用console.time()测试了以下内容。 看起来你的push增加了大约10％的时间，因为你的attr调用几乎使整个过程加倍。 例如：

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

导致：

labels: 3452ms
attr: 2455ms

当我们删除attr调用时：

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

导致：

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

接下来，我们分析字符串中的字符数量，以确定绘制的字符数和经过的时间之间是否存在任何直接关联。

paper.text(5, i * 10, '0'); 导致draw: 2974ms时间draw: 2974ms

paper.text(5, i * 10, 'texttexttexttexttexttexttexttexttexttexttexttext'); 导致draw: 3122ms时间draw: 3122ms ，这是可以忽略不计的。

现在让我们尝试使用矩形来讨论你所说的情况。 让我们使用相同的定位绘制相同的数量，并仅更改一些不会影响渲染时间（宽度和高度）的属性

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

导致：

draw: 333ms

正如数字所示，我相信这是因为我们正在绘制具有令人难以置信的更复杂曲线的向量。 方形向量公式将指数缩短，并且更容易计算一系列字母及其曲线。

Answer 2

不确定这是否有用，但我发现使用普通的div用于文本标签（而不是向量）相当快。