используя requestanimationframe, профилирование показывает> 80% времени, проведенного в режиме ожидания, по-прежнему получая 4fps. Зачем? (/как исправить?)

Question

У меня есть простая игра на холсте.Он спроектирован с помощью простого цикла requestAnimationFrame, который обновляет состояние и затем отображает на холсте (просто!).Он работает очень хорошо на настольном компьютере + iOS, но на Chrome на Android он работает ужасно.

Вот цикл, например:

var tick = function()
{
  requestAnimationFrame(tick,canvas);
  cur_scene.tick();
  cur_scene.draw();
}

Итак, я поднял удаленный профилировщик, записалбыстрый сеанс, и в течение (любой заданной) 1 секунды он показывает ~ .82s в режиме ожидания (сценарии .11s, .04s 'other', .02 рисование, .005 рендеринг).

Он также показывает ~.1 с на кадр (интервал между последовательными Animation Frame Fired записями на графике пламени).Но график пламени похож (в соответствии с другими измерениями) на 80% пуст?Я неправильно читаю диагностическую информацию?Правильно ли я структурировал цикл requestAnimationFrame?

Редактировать: Вот аннотированное изображение некоторых диагностических показателей производительности (снято путем записи удаленного сеанса на моем телефоне Android)

Answer 1

Я думаю, вы могли бы попытаться поместить вызов метода requestAnimationFrame () в конец вашего метода следующим образом:

var tick = function()
{
  cur_scene.tick();
  cur_scene.draw();
  requestAnimationFrame(tick,canvas);
}

В противном случае вы можете снова войти в цикл, не рисуя ничего, кроме запроса анимациикадр снова.Когда вы проверяете следующий пример, они также сначала вносят свои изменения в объект перед вызовом requestAnimationFrame (): https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

В приведенной выше документации это объясняется следующим текстом:

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