Можно ли считать 60 кадров в секунду для рендеринга браузера?

-1

Я хочу сделать анимацию JavaScript за 5 секунд, чтобы завершить работу с помощью requestAnimationFrame().Можно ли считать 60 кадров в секунду для рендеринга браузера?

Я не хочу строгого и точного времени, поэтому все, что близко к 5 секундам в порядке, и я хочу, чтобы мой код был простым и читаемым, поэтому такие решения, как this, не будут работать для меня.

Вопрос в том, можно ли предположить, что большинство браузеров отображают страницу со скоростью 60 кадров в секунду? то есть, если я хочу, чтобы моя анимация заняла 5 секунд, я разделил ее на 60 * 5 = 300 шагов и с каждым вызовом функции draw(), используя requestAnimationFrame(), нарисуйте следующий шаг анимации. (Учитывая, что анимация довольно проста, просто перемещайте цветной div.)

Кстати, я не могу использовать jQuery.

Edit: Позвольте мне перефразировать вопрос следующим образом: Do все браузеры «нормально» попробовать для отображения страницы на 60 кадр? Я хочу знать, если Chrome, например, отображает 75 кадров в секунду или Firefox, составляет 70 кадров в секунду.

(Нормальное состояние: процессор не сильно загружено, RAM не является полной, нет никаких сбоев хранения, помещение надлежащим образом вентилируемые и никто не пытается бросить свой ноутбук из окна.)

источник

2015-03-22 Behdad

Нет, это даже небезопасно. Вы не представляете, как работает движок JavaScript. Даже на более низких языках программирования вы не можете действительно диктовать FPS точно так же, как циклы CPU/GPU всегда немного ударяются в зависимости от нагрузки на систему. –

«Маленькие» удары не имеют для меня значения. Пока скорость рендеринга остается между 55 и 65 кадрами в секунду, все в порядке. Кроме того, меня не волнуют некоторые экстремальные условия (например, очень высокая загрузка процессора). Предположим, что я запускаю свой код в нормальном состоянии с хорошим браузером. – Behdad

Если вы * предполагаете * стабильную систему, вам просто нужно убедиться, что вы закрываете свой цикл FPS на 60 кадров в секунду. Если вы не закрываете его, он будет работать быстрее и быстрее, пока он не сгорит все ресурсы. Нюанс, который вы наделите «Я просто хочу, чтобы он оставался между 55-60fps»; это проблема. Есть 1001 фактор, который может привести к тому, что механизм JavaScript снизит скорость FPS. Даже CSS/HTML-перерисовка может вызвать такое напряжение в браузере, что оно снизит производительность JS-движка. Просто имейте в виду, что вы не можете диктовать производительность компьютера, а просто просите его соблюдать, если это возможно. –

Опираясь на 60 кадров в секунду очень небезопасно, потому что браузер не всегда находится в тех же условиях, и даже если он пытается отобразить страницу с максимальным значением fps, всегда есть шанс, что процессор/процессор/процессор будет занят что-то еще, вызывая падение FPS.

Если вы хотите, чтобы полагаться на FPS (хотя я не хотел бы предложить вам так), вы должны первого обнаружить текущих кадров в секунду, а также настроить скорость анимации кадра в кадр. Вот пример:

var lastCall, fps; 

function detectFps() { 
    var delta; 

    if (lastCall) { 
     delta = (Date.now() - lastCall)/1000; 
     lastCall = Date.now(); 
     fps = 1/delta; 
    } else { 
     lastCall = Date.now(); 
     fps = 0; 
    } 
} 

function myFunc() { 
    detectFps(); 

    // Calculate the speed using the var fps 
    // Animate... 

    requestAnimationFrame(myFunc); 
} 

detectFps(); // Initialize fps 
requestAnimationFrame(myFunc); // Start your animation

источник

2015-03-22 09:37:21

Я использовал ваш код для измерения средней частоты кадров для вызова 'draw()' 100 раз, а в течение примерно 15-20 прогонов минимальная средняя частота кадров составляла 59,3 кадра в секунду, а максимальная средняя составляла 61,5 кадра в секунду. (Использование Safari 8.0.4), и это вполне нормально для меня. Почему я должен измерять точную частоту кадров, которая мне не нужна? (Хотя, насколько мне известно, этот метод не требует времени для выполнения самого кода, поэтому он не очень точен.) – Behdad

Вы все равно должны измерять точную частоту кадров, поскольку на более старых машинах скорость кадров падает (даже до 20 кадров в секунду). Попробуйте запустить тяжелую программу (например, программное обеспечение для рендеринга видео) и одновременно откройте свой браузер, вы увидите, о чем я говорю. –

Я сказал в более раннем комментарии, что все нормально (низкая загрузка процессора, хороший браузер, ...), но уже отредактировал мой вопрос, чтобы отразить это. – Behdad

Как уже говорилось другими, это не так.

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

источник

2015-03-22 10:55:17 Zemljoradnik

Спасибо за ответ, но я должен использовать 'requestAnimationFrame()', поэтому использование 'setTimeout()' отключено от таблицы. – Behdad

Можно ли считать 60 кадров в секунду для рендеринга браузера?

ответ

Смежные вопросы