Несколько холстов на странице. Вопросы по оптимизации

Question

У меня очень длинная страница с несколькими холстами. Они не перекрывают друг друга и в основном используются отдельно для PIXI.js для воспроизведения спрайт-листов.

я использую requestAnimationFrame визуализировать каждый холст.

У меня есть несколько вопросов, так как я не знаю, как оптимизировать.

1) Когда холст за кадром, нужно ли cancelAnimationFrame? Или это не имеет значения, потому что это вне экрана и, следовательно, не будет окрашен?

2) Должен ли я иметь все свои render функции в пределах того же requestAnimationFrame? Это улучшит производительность?

Любые другие предложения?

Answer 1

Комментарии предоставляют большую часть информации, позвольте мне еще ответить на все вопросы:

• requestAnimationFrame это, конечно, окно, а не метод холста. Таким образом, он не знает о видимости холста. В WebKit есть параметр "element", но его нет в текущей спецификации http://www.w3.org/TR/animation-timing/. Таким образом, использование нескольких обработчиков не дает никаких преимуществ, это повысит производительность, если у вас есть только один requestAnimationFrame заботиться обо всем потоке.
• Браузеры (проверено на Safari/FF/Chrome) не будут звонить requestAnimationFrame если вкладка вообще не видна Отменить запрос фрейма анимации вручную не очень удобно.
• PIXI не проверяет видимость холста в renderer.render(stage), Ты можешь использовать getBoundingClientRect проверить видимость холста перед рендерингом. Это может немного увеличить производительность. Как определить, виден ли элемент DOM в текущем окне просмотра?

Лучший способ профилировать этот конкретный сценарий, вероятно, через просмотр временной шкалы Chrome https://developer.chrome.com/devtools/docs/timeline. Пропуск анимации может уменьшить время компоновки браузера / рисования. Только проверка времени выполнения JavaScript может немного вводить в заблуждение, особенно если мы помним, что вызовы WebGL могут выполняться асинхронно.