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

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

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

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

导致：

draw: 333ms

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

Answer 2

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