Эффективное рисование текста с использованием Raphael.js - PullRequest
Новая
       3

Эффективное рисование текста с использованием Raphael.js

3 голосов
/ 27 февраля 2012

Я рисую диаграмму с помощью 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% моего времени на рисование тратится на добавление меток.

Ответы [ 2 ]

4 голосов
/ 01 марта 2012

Как и в вашем примере, я протестировал следующее, используя 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, котороеnegligable.

Теперь давайте попробуем тот случай, о котором вы говорили, с прямоугольниками.Позволяет рисовать одинаковое количество, используя одинаковое позиционирование, и изменять только несколько атрибутов, которые не влияют на время рендеринга (ширина и высота) 

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

Результат: 

draw: 333ms

Какцифры показывают, я полагаю, это потому, что мы рисуем векторы с невероятно более сложными кривыми.Формула квадрата вектора будет экспоненциально короче, и ее будет легче вычислить, чем последовательность букв и их кривые.

1 голос
/ 16 сентября 2012

Не уверен, если это какое-то использование, но я нашел довольно быстро использовать нормальные div для текстовых меток (а не векторов.)

...