В этой лабораторной работе вы познакомитесь с процессом интерпретации всего сетевого трафика для довольно сложного примера приложения. К концу упражнения вы приобретёте навыки, необходимые для определения того, что загружает ваше веб-приложение и когда оно выполняет каждый запрос.
Перейдите на панель сети.
Перейдите на панель «Сеть», чтобы увидеть сетевой трафик демонстрационного приложения.
- Нажмите `Control+Shift+J` (или `Command+Option+J` на Mac), чтобы открыть DevTools.
- Откройте вкладку Сеть .
- Перезагрузите страницу, чтобы увидеть сетевой трафик.
На панели «Сеть» отображаются все активы, загруженные в результате вашей первоначальной навигации:
Как интерпретировать записи
Каждая строка записанного сетевого трафика представляет собой одну пару запроса и ответа.
Первая строка с типом document представляет собой начальный запрос навигации по HTML-коду веб-приложения. Это источник каскадной структуры; все последующие запросы на дополнительные ресурсы (известные как подресурсы основного документа) исходят из этого исходного источника.
Вторая и третья строки, показывающие загружаемую stylesheet CSS и подресурс script , представляют собой зависимые запросы, инициированные основным документом.
Если посмотреть на момент выполнения этих запросов, то каскадная диаграмма показывает, что они начинаются только на самых поздних этапах процесса реагирования на навигационный запрос.
В совокупности запросы к HTML-документу, CSS и JavaScript необходимы для отображения полной страницы во время первоначальной навигации.
Создайте несколько дополнительных запросов времени выполнения
Пока панель «Сеть» открыта и ведется запись, пришло время смоделировать нечто распространенное во многих веб-приложениях: дополнительные запросы API, используемые для добавления дополнительных данных на страницу после завершения первоначальной навигации.
Чтобы активировать эти дополнительные запросы, нажмите «Найти меня» в приложении, а затем «Разрешить» в появившемся всплывающем окне. Это позволит сайту получить доступ к вашему текущему местоположению:
Как только веб-приложение определит местоположение для работы, нажатие кнопки «Найти записи Википедии поблизости» приведёт к нескольким дополнительным сетевым запросам. Вы должны увидеть что-то вроде этого:
Интерпретировать новые записи
Как и прежде, каждая строка записанного сетевого трафика представляет собой одну пару запроса и ответа.
Первая строка новых записей представляет собой запрос с типом fetch , который соответствует способу, которым веб-приложение запрашивает данные из API Википедии.
Все следующие строки представляют собой изображения ( png или jpeg ), связанные со статьями Википедии. Хотя на скриншоте это не очень заметно, записи в столбце «Водопад» напрямую связаны с ответом API.
Для всех этих дополнительных запросов время выполнения будет зависеть от того, как долго страница была открыта до нажатия кнопки «Найти записи Википедии поблизости» . Самое важное здесь то, что время выполнения не связано с первоначальным навигационным запросом. Это можно заметить по большому разрыву в отображении «Водопад», представляющему собой период времени между первоначальной загрузкой и запросом к API Википедии.
Запросы, выполненные через некоторое время после навигации, попадают в категорию «запросов времени выполнения», в отличие от первоначального набора запросов, используемых для отображения страницы, когда вы впервые на нее перешли.
Подводя итоги
Выполнив шаги, описанные в этой лабораторной работе, вы теперь знакомы с инструментами, которые можно использовать для анализа того, что загружает любое веб-приложение.
Панель «Сеть» помогает вам ответить на вопрос о том , что загружается, с помощью URL-адресов в столбце «Имя» и данных в столбце «Тип», а также когда загружается, с помощью отображения каскадной диаграммы.
Вы также увидели, что запросы, сделанные веб-страницей, можно (обычно) разделить на две категории:
- Первоначальные запросы, сделанные сразу после перехода на новую страницу, на HTML, JavaScript, CSS (и потенциально другие ресурсы).
- Запросы, выполняемые в результате взаимодействия пользователя со страницей. Они часто начинаются с запроса к API, а затем перерастают в несколько последующих запросов, основанных на полученных от API данных.