Является ли запрос requestAnimationFrame с Raphael хитом производительности?
Я работаю над довольно ресурсоемким веб-приложением, которое в значительной степени полагается на Raphael.js для примерно 50% используемых анимаций, остальное я развернул свой собственный метод анимации, который использует webkitRequestAnimationFrame в сочетании с context.currentTime Web Audio API. синхронизировать анимацию с аудио компонентом.
Я испытываю довольно ужасную производительность в данный момент и, просматривая источник Рафаэля, я вижу, что он также использует requestAnimationFrame. Кажется, что большая часть задержки, которую я испытываю, происходит, когда мои анимации и Рафаэля работают одновременно. Это потому, что requestAnimationFrame по сути вызывается дважды за цикл отрисовки?
По сути, я спрашиваю, в основном, нужно ли мне перекатывать свою собственную реализацию анимации для объектов Raphael и вставлять ее в существующий requestAnimationFrame?
2 ответа
Хммм, насколько я знаю, весь смысл RAF в том, чтобы синхронизировать все так, чтобы он был готов к следующему обновлению рендера. Я буду делать то же самое, что и вы, так как в этом весь смысл.
Согласно спецификации:
Ожидается, что пользовательский агент будет запускать задачи из источника задач анимации через регулярные промежутки времени, соответствующие частоте обновления дисплея. Выполнение задач с более низкой скоростью может привести к тому, что анимация не будет выглядеть плавной. Выполнение задач с более высокой скоростью может привести к дополнительным вычислениям без видимой для пользователя выгоды.
Поэтому я бы сказал, что НЕТ, это не должно быть ударом по производительности.
У меня похожая проблема с медленной SVG-анимацией. Я понимаю, что RAF объединяет обновления независимо от того, откуда они приходят, поэтому я не думаю, что это была ваша проблема.
Я обнаружил, что большинство моих циклов занято перекрашиванием. Не так много можно сделать с помощью JS, чтобы ускорить перекрашивание. Но я думаю, что вы можете облегчить работу браузера, сократив эффекты прозрачности, фильтры и большие области экрана. Кроме того, перекраска является функцией количества пикселей, которые вы обновляете. Я делаю полноэкранный сайт, и когда я удваиваю размер области просмотра, это удваивает мое время рисования.