Производительность Javascript: как проверить, что замедляет страницу?

У меня есть страница, которая очень медленная, а не загрузка, но с точки зрения оперативности ввода в поля формы на странице.

На странице нет ajax - это не связано с сетевым транспортом.

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

Ответы

Ответ 1

Мне кажется, что у вас есть какое-то событие, срабатывающее при каждом нажатии клавиши на поле ввода. Что вы можете сделать:

  • Если профайлер Chrome не соответствует вашим потребностям, попробуйте профилировщик FireBug или IE9, который вполне приличный. В IE9 вы можете увидеть, сколько времени CPU было потрачено на каждый вызов функции.
  • Временно удалите обработчики из полей один за другим и наблюдайте за любыми изменениями в производительности.

Сообщите мне, как это происходит!

Ответ 2

Webkit имеет опцию "профиль". Откройте инструменты разработчика (ctrl + shift + i) и нажмите "Профили". Оттуда вы можете увидеть кнопку записи (круг) внизу. Нажмите на нее и используйте свою страницу, как обычно. Нажмите его еще раз, чтобы остановить и проверить сроки выполнения ваших вызовов функций.

В качестве альтернативы вы можете выполнять контрольные функции по отдельности, используя:

console.time( "Some label" );
console.timeEnd( "Some label" );

Ответ 4

С этой целью я создал UX Profiler. Он отслеживает и группирует все события, происходящие в результате некоторых действий пользователя (щелчок, нажатие и т.д.) И измеряет их производительность. Так что легко увидеть, где узкое место.