Как узнать, что вызывает медленную производительность холста HTML5?

Question

Как я могу определить, вызвана ли медленная производительность холста самим чертежом или базовой логикой, которая вычисляет то, что должно быть нарисовано и где?

Вторая часть моего вопроса: как вычислить canvas fps? Вот как я это сделал, мне кажется логичным, но я тоже ошибаюсь. Правильно ли это?

var fps = 0; 
setInterval(draw, 1000/30); 
setInterval(checkFps, 1000); 

function draw() { 
    //... 
    fps++; 
} 

function checkFps() { 
    $("#fps").html(fps); 
    fps = 0; 
} 

Edit: я заменил выше со следующим, согласно комментариям Натана:

var lastTimeStamp = new Date().getTime(); 
function draw() { 
    //... 
    var now = new Date().getTime(); 
    $("#fps").html(Math.floor(1000/(now - lastTimeStamp))); 
    lastTimeStamp = now; 
} 

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

Answer 1

Webkit и Firebug предоставляют инструменты профилирования, чтобы увидеть, где циклы процессора расходуются в вашем javascript-коде. Я бы рекомендовал начать там.

Для расчета FPS, я не думаю, что ваш код будет работать, но у меня нет каких-либо хорошая рекомендация :(

Причина в том: Большинство (?) Все браузеры используют специальную нить для запуск javascript и другой поток для запуска обновлений пользовательского интерфейса. Если поток Javascript занят, поток пользовательского интерфейса не будет запущен.

Итак, вы можете запустить некоторый код цикла javascript, который «обновит» пользовательский интерфейс 1000 раз (например, установка цвета какого-либо текста), но если вы не добавите setTimeout, чтобы разрешить потоку пользовательского интерфейса рисовать изменение, вы не увидите никаких изменений до тех пор, пока не завершится 1000 итераций.

Тем не менее, я не знаю, можете ли вы настойчиво увеличить ваш счетчик fps в конце процедуры draw(). Конечно, ваша функция javascript завершена, но действительно ли браузер нарисовал?

Answer 2

Ваш код FPS определенно неправильно

setInterval(checkFps, 1000); 

Никто не гарантирует, эта функция будет называться именно каждый второй (это может быть более 1000 мс или меньше - но, вероятно, больше), так

function checkFps() { 
    $("#fps").html(fps); 
    fps = 0; 
} 

неправильно (если кадр 32 в тот момент это возможно, что у вас есть 32 кадра в 1.5s (крайний случай))

Бетер, чтобы увидеть то, что было в реальном времени проходит с момента последнего обновления и вычислить realtimepassed/frames (я уверен, что javascript имеет функцию, чтобы получить время, но я не уверен, будет ли он достаточно точным = ms или лучше)

fps это нехорошее имя, оно содержит количество кадров (с момента последнего обновления), а не количество кадров в секунду, поэтому кадры будут лучшим именем.

Таким же образом

setInterval(draw, 1000/30); 

является неправильным, так как вы хотите, чтобы достичь FPS 30, но так как setInterval не очень точно (и, вероятно, будет ждать дольше, чем вы говорите, вы будете в конечном итоге с более низким FPS, даже если процессор способен обрабатывать нагрузку)

Answer 3

Проверьте, не используете ли вы какой-либо метод innerHTML для отладки вашего проекта. Это может замедлить ваш проект так, как вы не можете себе представить, особенно если вы выполните некоторую конкатенацию, подобную этой innerHTML + = newDebugValues;

Или, как и в случае с дезау, профайл вашего процессора с помощью firebug или webkit внутреннего отладчика.