Как решить, что webkitRequestAnimationFrame дает чрезвычайно высокий FPS

Сегодня я пытался познакомиться со всем новым, что может предложить HTML5, в частности с холстом. Я наткнулся на сайт www.html5canvastutorials.com и начал следовать некоторым руководствам и немного экспериментировать с кодом в разных браузерах. Когда я добрался до следующего примера, я заметил что-то странное в Google Chrome. http://www.html5canvastutorials.com/advanced/html5-canvas-oscillation-animation/

Предполагается, что функция webkitRequestAnimationFrame помогает снизить FPS (и, следовательно, затраты ЦП), когда вы не активно находитесь на сайте, например, когда вы переходите на другую вкладку. Однако, когда я попробовал этот пример, я заметил, что это не всегда дает приятные результаты.

  • Google Chrome как активное окно, сайт на текущей вкладке: около 60 кадров в секунду, отлично!
  • Google Chrome как активное окно на другой вкладке: около 1 кадра в секунду, очень хорошо.
  • Google Chrome как активное окно, на моем телевизоре (используется как второй монитор), 120 кадров в секунду, странно, но без нареканий.
  • Google Chrome не в активном окне, а на другой вкладке, также около 1 кадра в секунду или около того, идеально.

Затем плохая часть: если мой сайт находится на текущей вкладке, но у меня есть другое окно, полностью закрывающее окно Google Chrome (например, развернутое окно), FPS подскакивает примерно до 2500 (и, следовательно, максимально использует одно ядро ​​ЦП).

Все работает совершенно нормально, когда я пробую тот же сайт в Firefox.

Эта скрипта — пример, где она показывает средний FPS с момента последнего обновления: http://jsfiddle.net/kmKZa/55/ (я практически скопировал код с обучающего сайта)

Я хотел бы знать, как я могу предотвратить эти страшные всплески ЦП, если у кого-нибудь есть какие-либо идеи. Спасибо заранее за любые советы!


canvas google-chrome html frame-rate requestanimationframe
person interest07    schedule 12.08.2012    source источник
comment
Я видел подобное с более или менее пустой функцией requestAnimationFrame, похоже, если Chrome думает, что делать нечего, он запускает requestAnimationFrame как ад. Вы можете проверить параметр requestAnimationFrame и, если слишком рано, отложить следующий вызов с помощью setTimeout.   -  person Torsten Becker    schedule 12.12.2012
comment
Я не могу воспроизвести это в версии Chrome 25.0.1364.152/OSX 10.8.2.   -  person Jaibuu    schedule 04.03.2013

Ответы (2)


arrow_upward
0
arrow_downward

Одно из возможных решений — просто отменить цикл AnimationFrame, когда вы размываете окно, и запросить его снова, когда вы перефокусируете его.

var isPaused = false,
    animFrame;

loop();

$(window)
    .on('focus', function() {
        if( isPaused ) {
            isPaused = false;
            loop();
        }
    })
    .on('blur', function() {
        cancelRequestAnimationFrame( animFrame );
        isPaused = true;
    });

function loop() {
    //your crazy loop code

    animFrame = requestAnimationFrame( loop );
}
person Ti Hausmann    schedule 01.08.2013

arrow_upward
0
arrow_downward

RAF автоматически останавливает выполнение на «холостом ходу». Вам не нужно останавливать выполнение цикла RAF

person Gleb Mikheev    schedule 17.07.2015