RaphaelJS огромные замедления в IE8 при редактировании attr () и text () (заливка, обводка, вес) элементов

Question

Я отлаживаю некоторые проблемы с производительностью в IE8 с помощью RaphaelJS. Мы строим графики из ~ 1000 элементов и текстовых узлов в Raphael и, в частности, один график вызывает у нас проблемы при рендеринге. В IE9 это занимает 2-7 секунд в зависимости от машины для рендеринга, а в IE8 1 минута плюс.

Вы можете увидеть соответствующий веб-сайт здесь . Это третий график (щелкните по нему).

По сути, мы создаем элементы для каждой точки данных и рисуем их на холсте Рафаэля.

Я использовал профилировщик IE Developer Tools и определил, что это функция setFillAndStroke(), вызываемая из attr() и text(), когда мы меняем заливку, обводку, стиль и некоторые другие настройки элементов. Функция getBoundingRect() является виновником setFillAndStroke().

Вот скриншот вывода профилировщика

В моем исследовании я встречал людей, имеющих проблемы с IE8, attr() и text(), например,

Итак, несколько вопросов:

1. Можете ли вы установить заливку и обводку по умолчанию для элементов Raphael, чтобы они создавались с этой заливкой и обводкой? Это должно удалить звонок на getClientBoundingRect(). Я пытался найти такую ​​функцию в документах, но не повезло.
2. Это то, что мы можем решить без изменения внешнего вида графиков?
3. Если это то, что мы можем сделать только с помощью кода, возможно ли это сделать без изменения RaphaelJS?
4. Есть еще идеи?

У кого-то, похоже, была похожая проблема в более старых версиях Raphael, по-видимому, исправленная в 2.0.0, но мы используем версию 2.0.2 (тестировалась на ту же проблему в 2.1.0).

Вот отчет о проблеме на github .

Answer 1

Поэтому, благодаря совету Элирана Малки, я решил перейти от использования attr() к добавлению классов и использованию CSS, когда обнаружил, что у нас есть ошибка, приводящая к рисованию 178 меток вместо 8 (1 на 22 интервала), все, кроме основных 8 из них, за пределами размеров «бумаги».

Имея подозрение, что getBoundingRect(), вероятно, захлебывался, когда элементы были за кадром, я нашел источник ошибки и исправил ее, нарисовав только ожидаемые 8, и все они на холсте. Это уменьшило время загрузки с 1 минуты до 8,8 секунд.

Таким образом, причиной резкого замедления стало использование text() для создания элементов вне экрана, а затем изменение их атрибутов с помощью attr().

Хотя 8,8 секунды все еще невелики, это примерно на порядок лучше, чем 1 минута и немного (72 ~ секунды, если быть точным), поэтому я собираюсь назвать это «ответом», пока мы будем искать остальную часть проблемы.