Недавно в обсуждении статьи шкала браузерности разговор зашел о том, что IE не так уж убог и его должен иметь на своем компьютере каждый уважающий себя веб-разработчик не только для того, чтобы смотреть не съехала ли там верстка, но и потому что для IE созданы, я считаю, лучшие на данные момент средства для дебага и профилирования JS.
Одно из таких средств — это dynaTrace Ajax, скачать который можно здесь.
Что же такое dynaTrace? Это мощнейший инструмент для расширенного профилирования загрузки вашей страницы, он записывает все, что происходит на странице в процессе ее загрузки, и потом предоставляет подробный отчет.
Рассмотрим подробнее, какие данные мы можем получить из отчета. Для этого запустим dynaTrace, и нажмем Start tracing и зайдем, для примера, на habrahabr.
После загрузки страницы мы получаем возможность просмотреть подробный отчет.
Что мы можем увидеть на вкладке summary?
Во-первых, данные о загрузке страницы с сервера: сколько времени было потрачено на что, и какие файлы у нас грузились с сервера а какие брались из кеша:
Во-вторых, можно посмотреть, сколько времени было потрачено на JS и на какого рода операции это время было потрачено:
из картинки видно что хабр использует JS-фреймворк mootools и основная часть работы происходит внутри него, а вызовы происходят из script и ничего не повешено на Load ивент.
более интересную картинку можно получить, например, на яндексе:
Так же на вкладке summary мы видим timeline:
там отображается активность процессора во время загрузки страницы, время потраченное на JS, на рендеринг страницы и на сетевую активность. Внизу строка event показывает события, которые произошли со страницей. При наведении курсора мышки на какой-либо из блоков временной шкалы мы видим более подробно, что там произошло.
Как мы видим, событие Load произошло только через 45 секунд после начала загрузки страницы, и связано это с тем, что какая-то картинка грузилась 42 секунды. Для хабра это не страшно, потому что на Load у него ничего не повешено, но на других проектах, которые вешают обработчик на событие Load, эта timeline может помочь увидеть узкие места, которые не дают браузе��у вызвать событие Load.
Все диаграммы на вкладке summary кликабельны, а даблклик по части диаграммы ведет на другую вкладку с установленным фильтром. Например, дабл-клик по диаграмме, которая отображает отношение закешированных и не закешированных элементов на странице приведет на вкладку Network с включенным фильтром для отображения только тех элементов, которые были закешированы.
На вкладке Network мы видим таблицу в которой перечислено все, что грузилось из сети во время загрузки страницы. При выборе какой-либо строки в таблице в нижних окошках видны заголовки и собственно контент, который был загружен.
В таблице видно время загрузки и TimeChart.
Данные в таблице можно отфильтровать:
На вкладке Pure Paths мы видим всю историю активности которая происходила на нашей странице, включая такие вещи как рендеринг страницы и время, потраченное на парсинг яваскрипта.
Выберем в верхней таблице, для примера, строчку с Я.метрикой и тогда в средней таблице мы получим дерево вызовов функций: какие функции вызывались, сколько времени было потрачено на их парсинг и выполнение, к каким DOM-методам они обращались.
Если выбрать одну из веток дерева то в нижней левой таблице мы увидим все функции, вызовы которых совершались в этой ветке и время их выполнения, а в правой нижней таблице — код вызванной функции.
этот инструмент может помочь в поиске функций, которые тормозят работу вашего яваскрипта.
Ну и последняя вкладка это вкладка Hot Spots.
На этой вкладке мы видим, на вызовы каких функций тратится больше всего времени, что опять же позволяет нам выявить узкие места и оптимизировать наш JS-код.
Вот собственно и весь рассказ :)
Инструмент очень мощный, и, по-моему, must have для любого уважающего себя JS-разработчика, который работает под Windows.
Одно из таких средств — это dynaTrace Ajax, скачать который можно здесь.
Что же такое dynaTrace? Это мощнейший инструмент для расширенного профилирования загрузки вашей страницы, он записывает все, что происходит на странице в процессе ее загрузки, и потом предоставляет подробный отчет.
Рассмотрим подробнее, какие данные мы можем получить из отчета. Для этого запустим dynaTrace, и нажмем Start tracing и зайдем, для примера, на habrahabr.
После загрузки страницы мы получаем возможность просмотреть подробный отчет.
Summary
Что мы можем увидеть на вкладке summary?
Во-первых, данные о загрузке страницы с сервера: сколько времени было потрачено на что, и какие файлы у нас грузились с сервера а какие брались из кеша:
Во-вторых, можно посмотреть, сколько времени было потрачено на JS и на какого рода операции это время было потрачено:
из картинки видно что хабр использует JS-фреймворк mootools и основная часть работы происходит внутри него, а вызовы происходят из script и ничего не повешено на Load ивент.
более интересную картинку можно получить, например, на яндексе:
Так же на вкладке summary мы видим timeline:
там отображается активность процессора во время загрузки страницы, время потраченное на JS, на рендеринг страницы и на сетевую активность. Внизу строка event показывает события, которые произошли со страницей. При наведении курсора мышки на какой-либо из блоков временной шкалы мы видим более подробно, что там произошло.
Как мы видим, событие Load произошло только через 45 секунд после начала загрузки страницы, и связано это с тем, что какая-то картинка грузилась 42 секунды. Для хабра это не страшно, потому что на Load у него ничего не повешено, но на других проектах, которые вешают обработчик на событие Load, эта timeline может помочь увидеть узкие места, которые не дают браузе��у вызвать событие Load.
Все диаграммы на вкладке summary кликабельны, а даблклик по части диаграммы ведет на другую вкладку с установленным фильтром. Например, дабл-клик по диаграмме, которая отображает отношение закешированных и не закешированных элементов на странице приведет на вкладку Network с включенным фильтром для отображения только тех элементов, которые были закешированы.
Network
На вкладке Network мы видим таблицу в которой перечислено все, что грузилось из сети во время загрузки страницы. При выборе какой-либо строки в таблице в нижних окошках видны заголовки и собственно контент, который был загружен.
В таблице видно время загрузки и TimeChart.
Данные в таблице можно отфильтровать:
Pure Paths
На вкладке Pure Paths мы видим всю историю активности которая происходила на нашей странице, включая такие вещи как рендеринг страницы и время, потраченное на парсинг яваскрипта.
Выберем в верхней таблице, для примера, строчку с Я.метрикой и тогда в средней таблице мы получим дерево вызовов функций: какие функции вызывались, сколько времени было потрачено на их парсинг и выполнение, к каким DOM-методам они обращались.
Если выбрать одну из веток дерева то в нижней левой таблице мы увидим все функции, вызовы которых совершались в этой ветке и время их выполнения, а в правой нижней таблице — код вызванной функции.
этот инструмент может помочь в поиске функций, которые тормозят работу вашего яваскрипта.
Hot Spots
Ну и последняя вкладка это вкладка Hot Spots.
На этой вкладке мы видим, на вызовы каких функций тратится больше всего времени, что опять же позволяет нам выявить узкие места и оптимизировать наш JS-код.
Вот собственно и весь рассказ :)
Инструмент очень мощный, и, по-моему, must have для любого уважающего себя JS-разработчика, который работает под Windows.
