Глубокая трассировка в Internet Explorer

Original author: John Resig
  • Translation
image
После прочтения поста Стива Сойдерса о бесплатном инструменте — dynaTrace Ajax, я был дико заинтригован. Он предлагает полную анализ трассировки в IE6-8, включая JavaScript, прорисовку и сетевой трафик. Я протестировал несколько сайтов, но более интересный результат получил с тяжелым JavaScript'ом в Gmail в IE8.

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

dynaTrace Ajax работает приклеиваясь, как низкоуровневый инструмент к Internet Explorer во время запуска, перехватывая любую активность, которую вы только можете представить. Я заметил небольшую медлительность во время работы браузера в режиме трассировки. Тем не менее, вся трассировачная информация записывается и сохраняется для дальнейшего анализа.

image

Выше в результате записанной сессии, авторизация в Gmail, чтения почты и завершения сеанса. Все аспекты сессии сохранены: сетевые запросы, JavaScript источники, все DOM события, и т.п.

image

Это полная временная шкала единичной загрузки входящей почты Gmail. Весь сетевой трафик, JavaScript парсинг и выполнение, события браузера, загрузка CPU.

Вы можете выбрать сегмент с временной шкалы и просмотреть детальнее.

image

Выше, вы видите четкую картину точных взаимодействий, которые произошли. Феноменальное количество выполнений inline JavaScript, завершенного вычислением расположения страницы совпадает с загрузкой данных по сети. Вы можете навести курсор мыши на определенные блоки во временной шкале для получения более детальной информации (например: был ли JavaScript запущен в результате выполнения таймера или какой Ajax запрос был вызван, который повлек за собой сетевой трафик). Вдобавок, вы можете нажать на блок для более глубокого «погружения» в трассировку.

image

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

image

Заметьте, что вы можете щелкнуть по любому куску кода в просмотре стека трассировки и увидеть его положение в исходном коде (и это работает даже после закрытия окна, весь код сохраняется для дальнейшего анализа).

Но самым большим вопросом при путешествии по трассировки обычно — где происходит снижение скорости работы? И в этот момент в игру вступает HotPath.

image

Выглядит все это как обычный счетчик выполнения, который вы видите в инструментах отладки Internet Explorer или Firebug, за исключением одной детали — данная форма, выводит время парсинга JavaScript и время прорисовки. Это круто! Ни один другой инструмент не предоставляет информации о времени, которое нужно для парсинга JavaScript кода вашего сайта или как долго он будет прорисовываться.

image

Вы можете просматривать не только время выполнения собственных JavaScript методов, но и встроенных DOM методов! На форме HotSpot вы можете отфильтровывать по DOM или JavaScript и увидеть, какие методы медленные.

dynaTrace предоставляет и дополнительный инструмент — PurePath, который пытается узнать проблематичные места в скриптах.

image

Еще один способ увидеть полную картину проблемных мест в вашем приложении.

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

Я списывался с разработчиками dynaTrace и попросил их добавить профайлер памяти и внедрить поддержку большего количества браузеров.

Similar posts

Ads
AdBlock has stolen the banner, but banners are not teeth — they will be back

More

Comments 17

    +2
    люблю заметки от Джона Ресига, вечно от откопает или напишет сам что-то интересное и необычное
      +1
      Все бы хорошо, но имхо заставлять пользователя перед скачиванием регистрироваться, да еще с мылом-подтверждением — моветон.
        0
        Попробуйте на Adobe что-то скачать, там еще круче регистрация =)
          –2
          Бесплатное — флэш, акробат ридер и т.д. скачивается без всяких регистраций.
          А если хочешь качать демку большого и платного продукта — эт уже другой вопрос.

          Если хочешь чтобы твой бесплатный продукт попробовало максимальное количество людей, зачем мешать им это делать?

          А софтинка занятная, спасибо.
            0
            Регистрируешься, качаешь платный продукт. Выходит beta, нужно пройти 3-х этапную регистрацию для загрузки беты — идиотизм.
              +2
              Думаю, была бы воля разработчиков, убрали бы все эти регистрации. Но есть же еще спиногрызымаркетологи, которым нужно знать кто скачал и как это все было.
            0
            Спасибо большое, я уже скачал ))
          +1
          Скачал, посмотрел.
          Жаль, что надо эту программу отдельно запускать, в IE8 она не встраивается, а так, конечно, вещь.
          При загрузке хабра, кстати, очень сильно грузится процессор :)
            +1
            Еще как встраивается — откуда ж ей, родимой, инфу брать. А то что не болтается перед носом как файрбаг, дык у нее и функции немного другие.
              0
              Ну так и файрбаг можно «задизаблить», не так ли? Лично мне так удобнее.
              Впрочем, это не важно на самом деле.
            0
            Интересная статья! Спасибо автору.
              0
              Похоже сыровата софтинка. Кроме подозрительного соотношения функционал/размер инсталлятора, заметил, что не любит русские символы в пути, не хочет запускаться после крэша без закрытия всех открытых окон IE, нельзя скопом удалить сессии, и много других. Да и по функционалу разработчики не далеко ушли от Developer Tool от IE. Надеюсь в скором увидеть более мощную реализацию!
                0
                ничего себе не далеко. Где вы видели хоть 10% описанного функционала в тулсах?
                  –1
                  я не нашел в ней ничего нового. я не спорю, плюс этой примочки — визуальное представление данных. может у меня предвзятое отношение, может я недостаточно с ней повозился, тогда раскройте мне глаза :) что я упустил? мое лишь мнение — потенциал не раскрыт
              • UFO just landed and posted this here
                  0
                  А у вас Network работает? У меня там почему-то нет данных. Версию последнюю скачал.

                  Only users with full accounts can post comments. Log in, please.