В этой практической работе вы узнаете, как интерпретировать весь сетевой трафик для относительно сложного примера приложения. В конце упражнения у вас будут навыки, необходимые для того, чтобы выяснить, что загружает ваше собственное веб-приложение и когда оно делает каждый запрос.
Перейдите на панель "Сеть"
Перейдите на панель "Сеть", чтобы посмотреть сетевой трафик для демонстрационного приложения.
- Нажмите Ctrl + Shift + J (или Cmd + Option + J на Mac), чтобы открыть Инструменты разработчика.
- Откройте вкладку Сеть.
- Чтобы посмотреть сетевой трафик, обновите страницу.
На панели "Сеть" показаны все объекты, загруженные в результате вашего перехода:
Как интерпретировать записи
Каждая строка записанного сетевого трафика представляет собой одну пару запроса и ответа.
Первая строка с типом document – это начальный запрос навигации для HTML-кода веб-приложения. Это источник каскада. Каждый из последующих запросов дополнительных объектов (известных как подресурсы основного документа) поступает из этого исходного источника.
Вторая и третья строки, показывающие загрузку CSS stylesheet и подресурса script, являются зависимыми запросами, которые были инициированы основным документом.
Если посмотреть, когда выполняются эти запросы, на каскадной диаграмме видно, что они начинаются только на очень позднем этапе процесса ответа на запрос навигации.
Для отображения полной страницы при первоначальной навигации необходимы запросы к HTML-документу, CSS и JavaScript.
Создайте дополнительные запросы среды выполнения
Пока панель Сеть открыта и записывает данные, давайте смоделируем ситуацию, которая часто возникает во многих веб-приложениях: дополнительные запросы к API, используемые для добавления данных на страницу после завершения первоначальной навигации.
Чтобы запустить эти дополнительные запросы, нажмите Найти меня в приложении, а затем Разрешить во всплывающем окне. Это позволит сайту получить доступ к вашему текущему местоположению:
После того как веб-приложение получит местоположение, нажатие кнопки Find Nearby Wikipedia Entries (Найти статьи Википедии поблизости) приведет к нескольким дополнительным сетевым запросам. Вы увидите примерно следующее:
Как интерпретировать новые записи
Как и раньше, каждая строка записанного сетевого трафика представляет собой одну пару запроса и ответа.
Первая строка новых записей представляет собой запрос с типом fetch, который соответствует способу запроса данных веб-приложением из Wikipedia API.
В следующих строках содержатся изображения (png или jpeg), связанные с записями в Википедии. Хотя на скриншоте это не очень хорошо видно, записи в столбце Waterfall (Каскад) поступают непосредственно из ответа API.
Для всех этих дополнительных запросов время будет варьироваться в зависимости от того, как долго у вас была открыта страница, прежде чем вы нажали Найти ближайшие статьи Википедии. Самое главное здесь то, что когда отключено от первоначального запроса навигации. Это можно понять по большому промежутку, который существует на дисплее Waterfall, представляющему период времени, прошедший между начальной загрузкой и моментом, когда был сделан запрос к API Википедии.
Запросы, отправленные после паузы, которая следует за переходом, относятся к категории запросов времени выполнения, в отличие от первоначального набора запросов, используемых для показа страницы при первом переходе на нее.
Подведение итогов
Выполнив шаги из этой практической работы, вы познакомились с инструментами, которые можно использовать для анализа того, что загружает любое веб-приложение.
Панель "Сеть" помогает понять, что загружается (с помощью URL в столбце "Имя" и данных в столбце "Тип"), а также когда это происходит (с помощью каскадной диаграммы).
Вы также узнали, что запросы, отправляемые веб-страницей, обычно можно разделить на две категории:
- Первоначальные запросы, которые выполняются сразу после перехода на новую страницу, для HTML, JavaScript, CSS и, возможно, других объектов.
- Запросы, которые выполняются в результате взаимодействия пользователя со страницей. Часто это начинается с запроса к API, а затем переходит в несколько последующих запросов на основе полученных данных API.