В этой статье мы рассмотрим Firefox Web Developer Tools («DevTools») — набор инструментов, предназначенных для помощи разработчикам в проверке, отладке, профилировании и оптимизации производительности веб-сайтов и веб-приложений. В частности, мы рассмотрим инструменты, связанные с производительностью, но также увидим, как начать использовать DevTools в целом, и узнаем о некоторых полезных настройках.
Вы можете получить доступ к DevTools различными способами:
- щелкните меню гамбургера справа от панели инструментов навигации, нажмите Веб-разработчик , затем выберите подинструмент, который вы хотите использовать
- используйте комбинации клавиш, такие как Shift + F5 (Windows и macOS) для инструмента Performance и Ctrl + Shift + E (Windows) или Cmd + Option + E (macOS) для инструмента Network
- щелкните правой кнопкой мыши в любом месте страницы и выберите « Проверить элемент» .
Настройки DevTools
У Firefox DevTools есть много опций, которые помогают разработчикам настраивать их работу, например, параметр Включить метки времени в веб-консоли или Отключить HTTP-кэш , который используется для имитации производительности при первой загрузке на всех страницах, на которых открыт DevTools.
Вы можете получить доступ к панели настроек DevTools различными способами:
Начните с открытия DevTools, затем:
- либо нажмите кнопку Настройки на панели инструментов
- нажмите
F1 - нажмите Ctrl + Shift + O (Windows и Linux), Cmd + Shift + O (macOS), чтобы отобразить панель настроек.
Здесь вы можете выбрать инструменты по умолчанию, кнопки, которые вы хотите показать на панели инструментов, темы (dark-light-Firebug) и другие расширенные настройки.
Инструменты, ориентированные на производительность
При анализе производительности веб-приложения необходимо различать производительность во время загрузки и производительность во время выполнения.
Производительность во время загрузки отвечает на такие вопросы, как «какие ресурсы требуют слишком много времени для загрузки?» При работе с производительностью во время выполнения мы должны сосредоточиться на JavaScript и CSS (в частности, на CSS-анимациях), чтобы мы могли видеть, где Код тратит большую часть своего времени и на то, что вызывает узкие места.
Давайте посмотрим на сетевой монитор и инструмент производительности.
Сетевой монитор
Сетевой монитор отображает в виде таблицы все сетевые запросы, сделанные Firefox (например, при загрузке страницы или при отправке запросов XMLHttpRequest
Он также может отображать связанные с запросами заголовки HTTP, ответы HTTP и файлы cookie, а также позволяет выполнять поиск по ним. Вы также можете использовать его для выполнения, отображения и сохранения анализа производительности текущей загрузки страницы.
В двух словах, этот инструмент можно использовать для определения того, сколько времени браузеру требуется для загрузки различных ресурсов веб-страницы.
Вы также можете использовать этот инструмент для отслеживания и выделения запросов, которые замедляют или блокируют быструю загрузку веб-страницы. Панель «Сеть» показывает, когда DOMContentLoadedloadDOMContentLoaded
Запрос времени
Каждый запрос в списке сетей имеет столбец временной шкалы, который отображает информацию о времени, связанную с запросом, такую как общее время, необходимое для загрузки ресурса.
DevTools отмечает основные события жизненного цикла в отчете, такие как loadDOMContentLoaded Синий обозначает время, когда событие load фиолетовая линия обозначает время, когда происходит событие DOMContentLoaded
DOMContentLoaded против событий загрузки
Событие load
Загрузка события происходит, когда документ HTML и все связанные таблицы стилей, изображения и фреймы полностью загружены.
Панель сведений о запросе
После того, как вы щелкнете запрос в списке запросов, вы увидите правую панель подробных сведений, которая содержит множество различных вкладок, таких как заголовки, параметры, ответ, время и безопасность.
Для производительности, мы будем особенно смотреть на информацию о времени.
Время сети
В этой панели есть много метрик времени, связанных с каждым запросом:
Заблокировано — время, проведенное в очереди в ожидании сетевого подключения.
Отправка — это время, необходимое для отправки запроса на сервер.
Получение — это время, которое требуется для получения ответа от сервера или (если он кешируется) для чтения его из кэша.
Ожидание — это общее время ожидания клиентом до получения первого байта. В других инструментах анализа производительности, таких как WebPageTest.org или Chrome DevTools, это называется TTFB или время до первого байта.
Есть также разрешение DNS , которое является временем, которое требуется для разрешения имени хоста сервера, и Соединение , которое является временем, которое требуется, чтобы открыть соединение TCP.
Как проанализировать показатели времени загрузки
Сетевой монитор включает в себя инструмент анализа производительности, который можно использовать для анализа производительности веб-страницы во время загрузки.
Чтобы начать анализ производительности во время загрузки, вы можете:
- щелкните значок « Анализ» в нижней строке состояния
- перезагрузите страницу или сделайте сетевой запрос, когда ваш сетевой монитор открыт (на самом деле это будет только показывать табличную информацию о запросах, но не выполнять анализ производительности во время загрузки).
В итоговом отчете представлена круговая диаграмма и соответствующая таблица для полученных ресурсов по типам: JavaScript, CSS, изображения и шрифты и т. Д., А также сводка со следующими подробностями:
- количество кэшированных ответов
- Всего запросов
- размер
- переданный размер
- время загрузки
Веб-страница тестируется с пустым кешем и с загрунтованным кешем.
Первая нагрузка
DevTools в Firefox позволяют анализировать производительность вашего веб-приложения в двух разных ситуациях:
- Без кэширования, которое эмулирует первое посещение, когда ресурсы еще не кэшированы.
- С кэшированием, которое имитирует повторные посещения. Браузер уже кэшировал ресурсы приложения, исключая множество обращений к серверу.
Вы также можете использовать параметр Отключить кэш, чтобы эмулировать первоначальную загрузку веб-страницы, когда DevTools открыты на любой вкладке.
Производительность и отзывчивость JavaScript
JavaScript является однопоточным, что означает, что браузер выполняет код синхронно, но благодаря HTML5 Web Workers (стандартный API для многопоточности JavaScript) вы также можете запускать код в других потоках.
Этот единственный поток отвечает за выполнение всей работы, выполняемой браузером, такой как рендеринг макета, вычисление стилей и сбор мусора.
Также методы, такие как setTimeoutclickload (Это правда, что эти задачи выполняются асинхронно, но асинхронность в JavaScript отличается: она эмулируется с использованием подхода, управляемого событиями, с циклом событий и очередью.)
Хорошая производительность и скорость отклика обусловлены асинхронной моделью JavaScript, но длительные функции могут привести к снижению производительности и снижению скорости отклика пользовательского интерфейса.
Инструмент Performance
Инструмент Performance позволяет вам обнаруживать узкие места и проблемы производительности ваших веб-страниц, давая вам представление об отзывчивости пользовательского интерфейса вашей веб-страницы (в ответ на взаимодействие с пользователем) и производительности вашего кода JavaScript.
С помощью инструмента «Быстродействие» вы можете запустить анализ производительности открытой в данный момент веб-страницы за период времени, которым вы можете управлять с помощью кнопок «Пуск» и «Стоп». Затем инструмент отображает сводную информацию, а также табличные и графические представления операций, которые браузер выполнял для отображения вашей страницы.
Вы можете искать и обнаруживать длительные фрагменты кода, которые блокируют один поток, используя инструмент Performance.
Как использовать инструмент Performance
Шаги для использования инструмента производительности довольно просты:
- откройте веб-страницу, откройте панель «Производительность» и начните запись исполнения.
- подождите несколько секунд, также убедитесь, что взаимодействуете со своей страницей во время профилирования, затем остановите запись
- ищите какие-либо длительные функции или события и сосредоточьтесь (увеличьте масштаб) на временных частях, где FPS низок.
- Когда вы найдете какие-либо действия, которые могут быть нацелены на дальнейшую оптимизацию, вы можете использовать другие вспомогательные инструменты, чтобы получить подробную информацию о том, где предпринять действия.
Следуйте некоторым сценариям взаимодействия с пользователем и взаимодействуйте с различными частями пользовательского интерфейса вашего приложения во время процесса профилирования, особенно с частями, которые вы хотите оптимизировать. Также избегайте ненужных дополнительных действий: например, не взаимодействуйте с частями, которые вы не пытаетесь проанализировать, поскольку они просто добавят больше шума в результаты вашего отчета.
Выбор временного диапазона
DevTools Firefox поддерживает выбор или сужение временного диапазона в течение времени профиля. Вы можете щелкнуть на временной шкале или в разделе диаграммы FPS, а затем перетащить мышь, чтобы выбрать промежуток времени. Как только вы прекратите перетаскивание, DevTools обновит другие представления и диаграммы, чтобы отображать только информацию о событиях, произошедших за этот промежуток времени.
Диаграмма FPS
График частоты кадров отображает количество кадров в секунду за период записи. Когда запись выполняется, эта диаграмма действует как измеритель FPS с живыми значениями.
Диаграмма FPS показывает максимальное, минимальное значения FPS и среднее значение FPS за время профилирования. Все эти значения могут быстро сказать вам, если у вас есть какие-либо узкие места производительности.
Если вы используете анимацию, FPS должен быть 60 кадров в секунду . Посмотрите это видео, чтобы понять, почему это значение важно:
Вы можете использовать эту диаграмму, чтобы быстро обнаружить визуальные пробелы (свертывания) и несоответствия, которые обозначают серьезные падения частоты кадров (это означает, что у браузера есть узкие места в производительности).
Вы можете увидеть на этом скриншоте диаграмму FPS со свертыванием:
Водопад диаграмма
Википедия объясняет карту водопада следующим образом:
форма визуализации данных, которая помогает понять совокупный эффект последовательно вводимых положительных или отрицательных значений. Карта водопада также известна как карта летающих кирпичей или карта Марио из-за видимой подвески колонн (кирпичей) в воздухе.
В случае инструмента «Производительность» диаграмма «Водопад» отображает разбивку действий и специфичных для браузера событий, которые выполнял браузер, таких как:
- макет рендеринга или выкладка элементов (также называемые reflows)
- моделирование
- запросы кадров анимации
- перекраска или пиксельный рисунок
- сбор мусора и т. д.
Операции с компоновкой или перекомпоновки и вычисления стилей дороги, поэтому они могут быть потенциальными областями для оптимизации. Смотрите эту статью Google для более подробной информации.
Вот скриншот диаграммы водопада примера приложения:
Вид дерева вызовов
Представление «Дерево вызовов» отображает функции JavaScript, на которые браузер потратил большую часть своего времени, с важными показателями, такими как общее время активности, собственное время и их процентные доли по отношению к общему времени профилирования.
Собственное время относится к времени, затраченному исключительно на операцию, без учета функций, которые она вызывает.
Общее время относится к времени, затраченному операцией, и к функциям, которые она вызывает.
Дерево вызовов сообщает вам, статистически, в каких функциях (агрегированных) ваш браузер проводит большую часть времени в записи.
JS Flame Chart
Диаграмма пламени отображает график пламени стеков вызовов JavaScript в течение периода профилирования. Flame Chart — это тип визуализации производительности, созданный Бренданом Греггом .
Flame Chart позволяет быстро и точно идентифицировать большинство горячих путей кода.
Сложенные столбцы означают, что верхняя операция, которая существует непосредственно в ЦП, вызвала нижнюю операцию.
Вы можете прочитать больше о чартах Flame здесь .
Вы можете использовать диаграммы Частота кадров и JavaScript Flame, представления «Водопад» и «Дерево вызовов», чтобы выяснить, где у вас проблемы с производительностью, и выделить конкретные функции, требующие оптимизации.
Диаграмма пламени показывает состояние стека вызовов определенных функций в определенные моменты записи.
Диаграмма пламени содержит массу данных, поэтому для получения значимых показаний вам нужно увеличивать масштаб, пока вы не выберете несколько миллисекунд.
Цветовые коды
Различные диаграммы и разделы имеют цветовую кодировку с использованием одних и тех же цветов для одних и тех же типов операций и ресурсов — JavaScript, CSS, рендеринга, рисования и т. Д.
Вы можете использовать цвета, чтобы различать операции в разных видах, быстро определять тип операции, вызывающей проблемы, и не отставать от типов операций при переключении между разными ракурсами.
Вы можете отфильтровать отдельные действия, которые вы хотите видеть в своих диаграммах и представлениях через это меню, где вы также можете увидеть различные цвета, связанные с различными операциями.
Например, если вы работаете с CSS-анимацией, вам необходимо сосредоточиться на таких действиях, как «Пересчитать стиль», «Применить изменения стиля», «Макет» и «Рисование». Вы можете отфильтровать другие действия для уменьшения шума.
Для JavaScript вам нужно сосредоточиться на вызове функций, разборе HTML и разборе XML.
Вывод
В этой статье мы увидели, как начать работу с DevTools в Firefox и как использовать различные вспомогательные инструменты, связанные с производительностью. DevTools в Firefox невероятно полны, и благодаря недавнему обновлению производительности Firefox он тем более способен точно определять действительно проблемные области процессов рендеринга сайта. Мы рекомендуем вам продолжить изучение самостоятельно, теперь, когда вы знакомы с терминологией и знаете, что искать.