Использование профилировщика для анализа быстродействия кода

Это содержимое ссылается на более старую версию средств разработчика F12. Скачайте последнюю версию документации по средствам F12.

В средства F12 встроен профилировщик сценариев, позволяющий анализировать быстродействие кода JavaScript, выполняемого в Windows Internet Explorer 9. В этом разделе рассказывается о возможностях этого инструмента и способах его использования для проверки быстродействия сценариев.

Профилирование сценария

Чтобы начать работу, откройте профилируемую страницу в Internet Explorer 9. В Internet Explorer 9 нажмите клавишу F12, чтобы открыть средства F12, а затем щелкните вкладку Профилировщик.

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

При первом щелчке вкладки Профили сетка пуста. Нажмите кнопку Запуск создания профилей, а затем выполните в браузере код, который нужно профилировать. Если нужно начать с первоначальной загрузки веб-страницы, нажмите кнопку Обновить, чтобы выполнить код на странице. Если нужно остановить сбор данных и просмотреть результаты, нажмите кнопку Остановка создания профилей. Чтобы профилировать только часть кода, нажмите кнопку Запуск создания профилей, выполните в браузере только эту часть (например, функцию, вызываемую нажатием кнопки), а затем нажмите кнопку Остановка создания профилей.

Просмотр отчетов о профилях

Отчеты профилировщика создаются автоматически при нажатии кнопки Остановка создания профилей. Каждый сеанс профилировщика создает отдельный отчет, поэтому можно выполнять профилирование любое число раз, например, для нескольких сегментов сценария, или изменить значения и повторить профилирование этого же сегмента. По умолчанию отображается только самый последний отчет профилировщика, но можно щелкнуть раскрывающийся список Текущий отчет, чтобы просмотреть другие отчеты.

Отчеты можно просмотреть двумя способами, используя либо представление функций, либо представление дерева вызовов. Представление Функции показывает все функции в порядке их выполнения. Представление Дерево вызовов показывает иерархию функций, упрощая просмотр иерархических связей.

Снимок экрана вкладки профилей средств разработчика F12 с представлением функций

Типы данных профиля

Профилировщик возвращает из профиля до 12 столбцов данных. Щелкнув верхнюю строку столбца правой кнопкой мыши, можно добавить или удалить столбец. В следующей таблице приведены доступные значения.

Заголовок столбцаСодержание столбца
ФункцияИмя профилируемой функции.
СчетчикСуммарное число вызовов этой функции.
Инклюзивное время (мс)Время, в течение которого выполнялась данная функция. Оно включает время выполнения дочерних или внешних функций, вызванных из этой функции.
Инклюзивное время %Доля времени выполнения данной функции в процентах. Оно включает время выполнения дочерних или внешних функций, вызванных из этой функции.
Эксклюзивное время (мс)Время, в течение которого выполнялась данная функция. Оно не включает время выполнения дочерних или внешних функций, вызванных из этой функции.
Эксклюзивное время %Доля времени выполнения данной функции в процентах. Оно не включает время выполнения дочерних или внешних функций, вызванных из этой функции.
Средняя продолжительность (мс)Среднее время, проведенное в этой функции и в ее дочерних и внешних функциях.
Максимальная продолжительность (мс)Максимальное время, проведенное в этой функции и в ее дочерних и внешних функциях.
Минимальная продолжительность (мс)Минимальное время, проведенное в этой функции и в ее дочерних и внешних функциях.
Тип функцииТип функции — DOM, пользовательская, встроенная.
URL-адресURL-адрес исходного файла, определяющего данную функцию.
Номер строкиНомер строки начала этой функции в исходном коде.

 

Значения инклюзивного и эксклюзивного времени могут содержать определенные признаки проблем в коде. Инклюзивное время показывает общее время выполнения функции и всех функций, вызванных этой функцией или ее дочерними функциями. Эксклюзивное время показывает только время выполнения этой конкретной функции. У функции может быть очень высокое инклюзивное время, но минимальное эксклюзивное. Например:



function bar() {
// do some work for a 250 milliseconds
}

function foo() {
// do some work for 200 milliseconds and then call bar()
bar();
}

function main() {
//do some work for 50 milliseconds then call foo()
foo();
}


В этом примере вызывается функция "main()", работающая 50 миллисекунд, затем вызывается функция "foo()", выполняемая в течение 200 миллисекунд, а затем вызывается функция "bar()", время работы которой занимает 250 миллисекунд. На следующей диаграмме показаны возможные значения инклюзивного и эксклюзивного времени.

ФункцияИнклюзивное времяЭксклюзивное время
main()500 мс50 мс
foo()450 мс200 мс
bar()250 мс250 мс

 

Инклюзивное время для каждой функции — это время выполнения функции, плюс все время выполнения функций, вызываемых из нее (дочерних функций). Эксклюзивное время — это только время выполнения текущей функции. Для функции "bar()", являющейся последней в цепочке, оба времени оказываются одинаковыми.

Поиск и сортировка отчетов

Для поиска конкретных функций в отчетах можно использовать поле Поиск в верхнем правом углу средств F12. Введите полностью или частично имя в поле Поиск и нажмите кнопку "Поиск" или клавишу ВВОД. Выделяются все вхождения ключевого слова, и отчет прокручивается до первого вхождения. Для перемещения между результатами поиска можно использовать клавишу ВВОД, клавиши SHIFT+ВВОД или кнопки Следующий результат и Предыдущий результат.

Изображение кнопок следующего и предыдущего результата поиска в средствах F12

При поиске в представлении Дерево вызовов развертываются все родительские функции для функций, являющихся результатами поиска.

Щелкните заголовок любого видимого столбца, чтобы выполнить сортировку по соответствующим данным. Переключиться между убыванием и возрастанием можно, щелкнув заголовок еще раз. Можно также щелкнуть правой кнопкой мыши область данных на вкладке Профили, выбрать команду Сортировка, а затем выбрать нужный столбец.

При сортировке в представлении отчета Дерево вызовов сортируются только значения на верхнем уровне функций. Порядок иерархии дочерних функций сохраняется.

Копирование и сохранение отчетов

Можно скопировать все данные или часть данных отчета профилировщика, выделив строки и нажав CTRL+C либо щелкнув их правой кнопкой мыши и выбрав команду Копировать. Чтобы выделить все строки, нажмите клавиши CTRL+A, а затем нажмите клавиши CTRL+C.

Чтобы экспортировать их прямо в файл с разделителями-запятыми (.csv), щелкните значок Экспорт данных (рядом с кнопкой Запуск создания профилей). Функция экспорта сохраняет все строки, включая заголовки, тогда как при копировании и вставке выбираются только строки, без заголовков.

Связанные разделы

Использование средств разработчика F12 для отладки веб-страниц

 

 

Показ:
© 2014 Microsoft