Данные в таблице можно отфильтровать:
В таблице видно время загрузки и TimeChart.
На вкладке Network мы видим таблицу в которой перечислено все, что грузилось из сети во время загрузки страницы. При выборе какой-либо строки в таблице в нижних окошках видны заголовки и собственно контент, который был загружен.
Все диаграммы на вкладке summary кликабельны, а даблклик по части диаграммы ведет на другую вкладку с установленным фильтром. Например, дабл-клик по диаграмме, которая отображает отношение закешированных и не закешированных элементов на странице приведет на вкладку Network с включенным фильтром для отображения только тех элементов, которые были закешированы.
Как мы видим, событие Load произошло только через 45 секунд после начала загрузки страницы, и связано это с тем, что какая-то картинка грузилась 42 секунды. Для хабра это не страшно, потому что на Load у него ничего не повешено, но на других проектах, которые вешают обработчик на событие Load, эта timeline может помочь увидеть узкие места, которые не дают браузеру вызвать событие Load.
там отображается активность процессора во время загрузки страницы, время потраченное на JS, на рендеринг страницы и на сетевую активность. Внизу строка event показывает события, которые произошли со страницей. При наведении курсора мышки на какой-либо из блоков временной шкалы мы видим более подробно, что там произошло.
Так же на вкладке summary мы видим timeline:
более интересную картинку можно получить, например, на яндексе:
из картинки видно что хабр использует JS-фреймворк mootools и основная часть работы происходит внутри него, а вызовы происходят из script и ничего не повешено на Load ивент.
Во-вторых, можно посмотреть, сколько времени было потрачено на JS и на какого рода операции это время было потрачено:
Во-первых, данные о загрузке страницы с сервера: сколько времени было потрачено на что, и какие файлы у нас грузились с сервера а какие брались из кеша:
Что мы можем увидеть на вкладке summary?
После загрузки страницы мы получаем возможность просмотреть подробный отчет.
Рассмотрим подробнее, какие данные мы можем получить из отчета. Для этого запустим dynaTrace, и нажмем Start tracing и зайдем, для примера, на habrahabr.
Что же такое dynaTrace? Это мощнейший инструмент для расширенного профилирования загрузки вашей страницы, он записывает все, что происходит на странице в процессе ее загрузки, и потом предоставляет подробный отчет.
Одно из таких средств это dynaTrace Ajax, скачать который можно .
Недавно в обсуждении статьи разговор зашел о том, что IE не так уж убог и его должен иметь на своем компьютере каждый уважающий себя веб-разработчик не только для того, чтобы смотреть не съехала ли там верстка, но и потому что для IE созданы, я считаю, лучшие на данные момент средства для дебага и профилирования JS.
dynaTrace AJAX мощный профайлер JS
28 февраля 2010 в 12:48
dynaTrace AJAX мощный профайлер JS / Хабрахабр
Комментариев нет:
Отправить комментарий