Несколько анимаций холста HTML5

Question

У меня есть несколько HTML canvas элементов внутри различных директив AngularJS. Каждый из этих элементов анимируется с использованием requestAnimationFrame.

1. Как насчет производительности? Можно ли назвать requestAnimationFrame для каждого canvas/directive или использует один service с callback функциями для всех функций рендеринга?
2. Прежде чем содержимое может быть нарисовано, в функции рендеринга сделано много расчетов. Для каждого кадра эти вычисления необходимы. Должно ли это быть сделано до звонка requestAnimationFrame или это нормально иметь огромное количество вычислений после этого звонка?

Answer 1

requestAnimationFrame получит все запросы, выполненные для одного кадра, хотя я не уверен, каков будет порядок запросов. Я предполагаю, что они приходят в том же порядке, в каком они были запрошены.

Разница между несколькими запросами кадра или запросом одного кадра, вызывающим несколько функций, является предельной. Это был бы выбор стиля, а не выбор производительности.

Если вычисления необходимы для каждого кадра рендеринга, нет никакого преимущества, чтобы они запускались независимо от запроса кадра, поскольку вам нужно будет найти способ синхронизировать их, что добавит служебные данные. Если они не зависят от кадра, тогда было бы лучше сделать их с любой скоростью, которая обеспечит бесперебойную работу приложения.