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}); 

ただし、この方法を使用するのは非常に遅いようです。私は、グラフに6つのラベルを追加できるように、400倍の長方形（単一のパス文字列を使用）を2倍高速に描画できます。テキスト描画やこれを行う別の方法を一括して高速化する方法はありますか？現時点では、描画時間のほぼ80％がラベルの追加に費やされています。

Answer 1

例のように、私はconsole.time()を使って以下をテストしました。 pushが時間に約10％を追加しているように見えますが、attrコールが処理をほぼ倍増します。

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')); 
} 

連鎖はパフォーマンスにほとんど影響しません。生じた

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: 3122msの時間になった draw: 2974ms

paper.text(5, i * 10, 'texttexttexttexttexttexttexttexttexttexttexttext');の時間になりました。

ここであなたが話したケースを、長方形で試してみましょう。同じ位置を使用して、同じ量を描き、そして唯一の時間（幅と高さ）が生じ

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

レンダリングは影響しませんいくつかの属性変更することができます：数字が示すように

draw: 333ms 

を、これは、私たちが信じられないほど複雑な曲線を描くためです。四角形のベクトル式は指数関数的に短くなり、一連の文字とその曲線を計算しやすくなります。

Answer 2

これは任意の使用があるが、私はそれはかなり速いテキストラベルの通常のdivを使用することを発見した場合はわからない（ベクトルではなく。）