Когда использовать requestAnimationFrame?

Обнаружив requestAnimationFrame всего лишь минуту назад, я погрузился во всю информацию, которую я мог найти об этом. Чтобы назвать только некоторые из ресурсов, которые я натолкнулся, если есть другие, которые ищут дополнительную информацию об этом:

http://creativejs.com/resources/requestanimationframe/ - объясняет основы этого.
http://www.html5rocks.com/en/tutorials/speed/animations/ - объясняет, как его использовать.

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

Должен ли я использовать его для анимаций (повторяющиеся изменения в стиле элемента, подобно анимации CSS)?
Должен ли я использовать его, когда автоматическое событие хочет изменить CSS/классы одного или нескольких элементов?
Должен ли я использовать его, когда автоматическое событие хочет изменить текстовое значение одного или нескольких элементов? (например, обновление значения часов один раз в секунду)
Должен ли я использовать его, когда автоматическое событие хочет изменить DOM?
Должен ли я использовать его, когда автоматическому событию нужны такие значения, как .offsetTop,.offsetLeft, а затем хочет изменить стили, такие как верхний и левый несколько строк?
Должен ли я использовать его, когда пользовательское событие вызывает какие-либо из перечисленных выше изменений?

TL; DR: Когда правильно использовать requestAnimationFrame?

Ответ 1

Вы еще не должны. На самом деле это не так. Это все еще экспериментально и может или не может получить полную рекомендацию (он по-прежнему является рабочим проектом на этом этапе). Тем не менее, если вы не заботитесь о старых браузерах или готовы работать с polyfill доступным, лучшее время для его использования когда вы хотите нарисовать вещи на экране, которые потребуют перерисовки браузера (большинство анимаций).

Для многих простых модификаций DOM этот метод является излишним. Это становится полезным только тогда, когда вы делаете анимацию, когда будете быстро рисовать или перемещать предметы, и вам нужно убедиться, что перерисовка браузера поддерживается достаточно, чтобы сделать ее гладкой. Это позволит вам убедиться, что каждый отснятый вами кадр будет выведен на экран. Он также обеспечивает полезность для более точных измерений времени для ваших анимаций. Первый аргумент - время, в которое будет происходить краска, поэтому вы можете убедиться, что вы находитесь там, где вы должны быть в этот момент.

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

Ответ 2

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