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

Question

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

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

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

Answer 1

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

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

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

Answer 2

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

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

Дайте мне знать, как это происходит!