Панель «Сеть» в DevTools вашего браузера помогает определить, какие ресурсы загружаются и когда они загружаются. Каждая строка на панели «Сеть» соответствует определенному URL-адресу, загруженному вашим веб-приложением.
Знайте, что вы загружаете
Чтобы разработать правильную стратегию кэширования для вашего веб-приложения, необходимо понять, что именно вы загружаете. При создании надежного веб-приложения сеть может подвергаться воздействию всевозможных темных сил. Вам необходимо понимать уязвимости сети, если вы надеетесь справиться с ними в своем приложении.
Вы можете подумать, что уже имеете довольно хорошее представление о том, что загружает ваше веб-приложение. Если вы просто используете небольшое количество статических файлов HTML, JavaScript, CSS и изображений, это может быть правдой. Но как только вы начнете смешивать сторонние ресурсы, размещенные в сетях доставки контента, используя динамические запросы API и ответы, генерируемые сервером, картина быстро становится более мрачной.
Например, стратегия кэширования, которая имеет смысл для нескольких небольших файлов CSS, вероятно, не будет иметь смысла для сотен больших изображений.
Знайте, когда вы загружаете
Другая часть общей картины загрузки — это когда все загружается.
Некоторые запросы к сети, такие как запрос навигации по исходному HTML-коду, выполняются безоговорочно, как только пользователь посещает заданный URL-адрес. Этот HTML-код может содержать жестко закодированные ссылки на важные файлы CSS или JavaScript, которые также необходимо загрузить для отображения вашей интерактивной страницы. Все эти запросы находятся на вашем критическом пути загрузки. Вам нужно будет активно кэшировать их, чтобы обеспечить надежную скорость.
Другие ресурсы, такие как запросы API или ресурсы с отложенной загрузкой, могут не начать загружаться до тех пор, пока не завершится вся первоначальная загрузка. Если эти запросы происходят только после определенной последовательности взаимодействий пользователя, то при нескольких посещениях одной и той же страницы может быть запрошен совершенно другой набор ресурсов. Менее агрессивная стратегия кэширования часто подходит для контента, который, как вы определили, находится за пределами критического пути загрузки.
Столбцы «Имя» и «Тип» помогают узнать, что
Столбцы «Имя» и «Тип» помогают получить представление о том, что загружается. Ответ на вопрос « что загружается?» в приведенном выше примере всего четыре URL-адреса, каждый из которых представляет уникальный тип контента.
Имя представляет собой URL-адрес, запрошенный вашим браузером, хотя вы увидите только последнюю часть указанного пути URL-адреса. Например, если загружен https://example.com/main.css , в конечном итоге вы увидите только main.css в списке «Имя».
Последние несколько символов пути URL-адреса, следующие за точкой (например, «css»), называются расширением URL-адреса. Расширение URL-адреса обычно сообщает вам, какой тип ресурса запрашивается, и напрямую сопоставляется с информацией, показанной в столбце «Тип». Например, v2.html — это документ, а main.css — таблица стилей.
Колонка «Водопад» помогает определить, когда
Осмотрите колонку «Водопад», начиная сверху и двигаясь вниз. Длина каждой полосы представляет собой общее количество времени, затраченное на загрузку каждого ресурса. Как отличить запрос, выполненный в рамках критического пути загрузки, от запроса, запускаемого динамически, спустя долгое время после завершения начальной загрузки страницы?
Первым запросом в каскаде всегда будет HTML-документ, например v2.html . Все последующие запросы будут вытекать (как водопад!) из этого первоначального запроса навигации в зависимости от того, на какие изображения, сценарии и стили ссылается HTML-документ.
Водопад показывает, что как только v2.html завершает загрузку, начинаются запросы к ресурсам, на которые он ссылается (также называемым подресурсами ). Браузер может запрашивать несколько подресурсов одновременно, и это представлено перекрывающимися полосами в столбце «Водопад» для main.css и logo.svg . Наконец, на скриншоте вы можете видеть, что main.js начинает загружаться последним и завершает загрузку после того, как загрузятся остальные три URL-адреса.