Как узнать, какой запрос отправляет браузер

Обновлено: 04.07.2024

Давайте поднимем капот и посмотрим, как работает Всемирная паутина.

Браузеры — что они делают?

Запрос – Ответ

При вводе URL-адреса браузер отправляет запрос GET на веб-сервер. Когда форма отправляется на веб-сайте, отправляется запрос POST, и браузер передает данные формы для обработки веб-сервером.

DNS – служба доменных имен.
Это стандартный способ для браузера узнать, где находится ваш веб-сайт.
Ваш браузер связывается с сервером имен, который сообщает вашему браузеру IP-адрес, где находятся файлы вашего веб-сайта.
Информация о ваших серверах имен называется записями DNS.

Помните, что веб-сайты живут по IP-адресу. Это строка чисел (например, 70.42.251.42), определяющая местонахождение определенного компьютера (или «узла») в Интернете. Доменное имя — это просто перевод, который позволяет людям легко запомнить, где находится веб-сайт.

Другая информация о DNS

Ваши серверы имен могут также содержать другую информацию о вашем домене, например, где находится ваш почтовый сервер. Например, если я попытаюсь отправить электронное письмо на адрес mark@facebook.com, ваш почтовый сервер свяжется с сервером имен для facebook.com и спросит: «Где находится этот почтовый сервер?».

Примеры веб-кода

Веб-кодом может быть любой язык, используемый для создания веб-страниц или приложений. Типичные примеры:

Перечисленные выше языки работают внутри веб-браузера (на "клиентской стороне"). На стороне сервера вариаций гораздо больше. Вы можете столкнуться.

очень простой протокол, ориентированный на простоту использования и реализации
100 % символов ASCII для ввода и вывода
Целью было обеспечение удобочитаемости.
без сохранения состояния означает "один запрос, один ответ и закрытие"

разрабатывал специально по мере развития ранней WWW
- многие ранние решения были странными, но теперь мы с ними застряли
- идентификатор версии
- заголовки запроса
- строка статуса ответа
- заголовки ответов
telnet — это исходная программа для подключения к другим компьютерам в Интернете.

К сожалению, многие современные ОС не поставляются с работающей версией telnet, поэтому вам следует посмотреть терминал преподавателя или перейти к следующему слайду.

Это открывает соединение с одним из множества веб-серверов Google.

Сервер, на котором размещен основной веб-сайт Reddit, обрабатывает ваш запрос и возвращает ответ вашему браузеру. Ваш браузер достаточно умен, чтобы обработать отправленный ответ и отобразить сайт, который вы видите на снимке экрана, со всеми его цветами, изображениями, текстом и презентацией.

Использование инспектора

Не закрывая инспектор, нажмите на вкладку Сеть:

Вложенная вкладка по умолчанию Заголовки показывает заголовки запросов, отправленных на сервер, а также заголовки ответов, полученные от сервера.

Нажмите на вложенную вкладку Ответ, чтобы просмотреть необработанные данные ответа.

Еще один момент, на который следует обратить внимание при использовании вкладки Сеть в инспекторе, это то, что помимо первого запроса возвращается множество других запросов:

Вы должны увидеть только один запрос и ответ, содержащий HTML, но никаких дополнительных запросов, автоматически выдаваемых, как вы видите в браузере.

Методы запроса

Вернемся к диаграмме из шага 3 выше, когда мы рассмотрели ответы на вкладке Сеть. Возможно, вы заметили два столбца с именами «Метод» и «Статус». Если столбец «Метод» не отображается, возможно, он скрыт по умолчанию.Чтобы отобразить столбец «Метод», щелкните правой кнопкой мыши «Статус» и выберите Метод. Столбец «Метод» теперь должен отображаться рядом со столбцом «Статус».

В этом разделе мы рассмотрим, что означает информация, показанная в этих столбцах.

В столбце Статус отображается статус ответа на каждый запрос. Подробнее об ответах мы поговорим позже в этой книге. Важно понимать, что каждый запрос получает ответ, даже если ответ является ошибкой — это все равно ответ. (Технически это не на 100 % верно, так как время ожидания некоторых запросов может истечь, но мы пока отложим эти редкие случаи.)

GET-запросы

Пользователи curl могут ввести следующую команду на своем терминале:

перед отправкой запроса обязательно выберите ПОЛУЧИТЬ .

Команда curl для этого примера:

POST-запросы

Вот команда curl:

Давайте рассмотрим еще один пример выполнения запроса POST путем заполнения веб-формы. Наш образец формы выглядит в браузере следующим образом:

После заполнения формы вы будете перенаправлены на страницу, которая выглядит следующим образом:

Примечание. Убедитесь, что заголовок Content-Type имеет значение application/x-www-form-urlencoded . В противном случае ваш POST-запрос не будет правильно интерпретирован приложением.

Если вы используете Paw 3, выберите вкладку Form URL-Encoded вместо вкладки Text.
Если вы используете Insomnia, убедитесь, что вы выбрали "Form URL Encoded" в раскрывающемся меню Body. И если вы используете Postman, убедитесь, что переключатель для x-www-form-urlencoded выбран на вкладке Body.

Или вы можете использовать curl:

Обратите внимание, что на снимке экрана и в команде curl мы указываем дополнительный параметр player_name=albert . Это имеет тот же эффект, что и ввод имени в первое поле «Как тебя зовут?» форму и отправить ее.

Мы можем проверить содержимое с помощью инспектора (щелкните правой кнопкой мыши и выберите «Проверить» ). Вы увидите, что параметр player_name, который мы отправляем как часть POST-запроса, встроен в форму через атрибут name элемента ввода:

Запрос POST, сгенерированный инструментом HTTP или curl, аналогичен заполнению формы в браузере, отправке этой формы и последующему перенаправлению на следующую страницу. Внимательно посмотрите на необработанный ответ на снимке экрана инструмента HTTP. Ключевая информация, которая перенаправляет нас на следующую страницу, указана в поле Location: http://al-blackjack.herokuapp.com/bet. Расположение и связанные с ним данные являются частью того, что известно как заголовок ответа HTTP (да, запросы тоже имеют заголовки, но в данном случае это заголовок ответа). Пока не слишком беспокойтесь об этом, так как мы обсудим заголовки в следующем разделе. Ваш браузер видит заголовок ответа и автоматически отправляет новый запрос на URL-адрес, указанный в заголовке Location, тем самым инициируя новый, несвязанный запрос. Форма "Сделать ставку", которую вы видите, является ответом на этот второй запрос.

Примечание. Если вы используете какой-либо другой HTTP-инструмент, например Insomnia или Postman, вам, возможно, придется снять флажок "автоматически следовать перенаправлениям", чтобы увидеть заголовок ответа Location.

Если вы не поняли предыдущий абзац, прочитайте его еще раз. Очень важно понимать, что при использовании браузера браузер скрывает от вас большую часть лежащего в основе цикла HTTP-запроса/ответа.Ваш браузер выдал первоначальный запрос POST, получил ответ с заголовком Location, затем выдал другой запрос без каких-либо действий с вашей стороны, а затем отобразил ответ на этот второй запрос. Опять же, если бы вы использовали чистый HTTP-инструмент, вы бы увидели заголовок ответа Location из первого запроса POST, но инструмент не выдал бы вам второй запрос автоматически. (Некоторые инструменты HTTP имеют эту возможность, если вы отметите опцию «автоматически следовать перенаправлениям».)

Выше показаны различные заголовки, передаваемые во время цикла запроса/ответа. Кроме того, мы видим, что запрос и ответ содержат разные наборы заголовков в разделе «Заголовки запроса»:

Заголовки запроса

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

Обзор

Эта страница создана с помощью сети HTML, CSS и Javascript, отправленной вам Codecademy через Интернет. Интернет состоит из множества ресурсов, размещенных на разных серверах. Термин «ресурс» относится к любому объекту в Интернете, включая файлы HTML, таблицы стилей, изображения, видео и сценарии. Чтобы получить доступ к контенту в Интернете, ваш браузер должен запрашивать у этих серверов необходимые ему ресурсы, а затем отображать эти ресурсы для вас. Этот протокол запросов и ответов позволяет просматривать эту страницу в браузере.

В этой ситуации ваш компьютер, который делает запрос, называется клиентом. Запрашиваемый вами URL-адрес принадлежит серверу.

Давайте рассмотрим пример того, как запросы GET (наиболее распространенный тип запросов) используются, чтобы помочь вашему компьютеру (клиенту) получить доступ к ресурсам в Интернете.

Вторая строка запроса содержит адрес сервера "www.codecademy.com" . Также могут быть дополнительные строки в зависимости от того, какие данные предпочитает отправлять ваш браузер.

Если серверу удается найти запрошенный путь, он может ответить заголовком:

Если сервер не может найти путь, запрошенный клиентом, он ответит заголовком:

Аналогия:

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

Доставщик почты возвращается на легком скоростном поезде, разрывая пути на обратном пути, и сообщает вам, что возникла проблема «404 Not Found». После проверки правописания того, что вы написали, вы понимаете, что ошиблись в названии газеты. Вы исправляете его и сообщаете исправленный заголовок доставщику почты.

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

Каждый раз, когда кто-то посещает страницу вашего веб-сайта, обычно происходит следующее:

Приведенные выше шаги описывают один HTTP-запрос, от вопроса до ответа. HTTP расшифровывается как «протокол передачи гипертекста». Это просто причудливое название для веб-браузера, отправляющего запрос на файл, и сервера, отправляющего (или «передающего») этот файл в браузер.

Размер передаваемого файла также влияет на то, сколько времени может потребоваться для загрузки страницы на экране пользователя. И точно так же, как файлы на вашем компьютере имеют различный размер файлов — измеряемый в байтах (Б), килобайтах (КБ), мегабайтах (МБ) и т. д. — так же и файлы, встроенные на вашу веб-страницу. Большие изображения в высоком разрешении часто являются причиной больших размеров файлов.

Другими словами, чем больше или выше разрешение контента на вашем веб-сайте, тем больше размер его файла. Чем больше размер файла, тем больше времени потребуется для его передачи с вашего сервера в браузер пользователя.

Чем дольше этот файл находится в пути, тем дольше браузер пользователя должен ждать, прежде чем он отобразит этот контент на его/ее экране.

Долгое время загрузки может раздражать пользователей. Мобильные пользователи будут особенно недовольны, так как большинству из них придется ждать, пока все ресурсы на веб-странице будут загружены, прежде чем страница начнет отображаться в их мобильном браузере.

Исследования показывают, что время загрузки имеет большое значение, когда речь идет о производительности веб-сайта.Согласно данным Pingdom, монитора производительности веб-сайта, показатель отказов страницы может взлететь с 9% до колоссальных 38%, если время загрузки страницы увеличится с 2 до 5 секунд. Это связано с тем, что гораздо больше людей "уходят" с вашего сайта во время этой трехсекундной задержки.

Итак, к какому магическому количеству HTTP-запросов должен стремиться веб-сайт? Ответ не "один". Некоторые люди думают, что могут решить проблему, используя только один файл JavaScript для управления всем своим веб-сайтом. Но помните: размер файла также влияет на время загрузки. Для сложных веб-сайтов этот файл может занять невероятно долгое время от вашего сервера до браузера вашей аудитории.

Хотя не обязательно существует оптимальное количество файлов, до которого должна быть сокращена ваша веб-страница, главный менеджер HubSpot по маркетингу продуктов Джеффри Воселл предлагает стремиться к 10–30 файлам.

1. Оцените эффективность своего веб-сайта, чтобы найти основную проблему.

Если вы начинаете с нуля и не знаете, как работает ваш веб-сайт, вам сначала понадобится подробный отчет об общем состоянии вашего веб-сайта. Чтобы получить этот отчет, воспользуйтесь сервисом оценки веб-сайтов HubSpot.

Чтобы найти длину запроса.

Чтобы увидеть панель сети для данной веб-страницы, откройте веб-страницу в Google Chrome. В главном меню Chrome в верхней части экрана выберите «Просмотр» > «Разработчик» > «Инструменты разработчика».

В вашем браузере откроется панель «Сеть». Поскольку он записывает всю сетевую активность, когда DevTools открыт, панель может быть пустой при первом ее открытии. Перезагрузите страницу, чтобы начать запись, или просто дождитесь сетевой активности в вашем приложении.

Вот краткий обзор того, что означает все на панели «Сеть»:

Интересно, сколько запросов требует ваш веб-сайт? Панель «Сеть» также сообщит вам об этом. Взгляните на самый нижний левый скриншот выше, и вы увидите общее количество запросов; в данном случае это 25 запросов.

Чтобы узнать, как читать панель и более подробно оценить производительность сети, прочитайте этот ресурс Google Chrome.

3. Удалите ненужные изображения.

На этом этапе вы должны иметь представление о том, какие файлы загружаются дольше всего, включая файлы изображений. Самый простой способ уменьшить количество запрашиваемых файлов? Удалите ненужные изображения.

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

4. Уменьшите размер файла остальных изображений.

Если вы являетесь пользователем HubSpot, вам не нужно слишком беспокоиться об изменении размера и сжатии изображений — COS HubSpot автоматически изменит размер и сожмет ваши изображения, когда вы загрузите их в файловый менеджер HubSpot. Чтобы изменить размер изображения, загрузив его в файловый менеджер, нажмите «Клонировать и отредактировать», как показано ниже:

Имейте в виду, что вы всегда можете уменьшить размер файла ваших изображений, прежде чем загружать их на свой веб-сайт. Например, если у вас есть веб-страница с множеством отдельных изображений, перед публикацией страницы вам следует максимально уменьшить размер их файлов.

Если возможно, мы рекомендуем уменьшить размер файла каждого изображения до менее 100 КБ. В зависимости от изображения вам, возможно, придется пойти на компромисс по этому минимуму, и это нормально. Просто старайтесь, чтобы ваши отдельные файлы не занимали территорию в мегабайтах ("МБ").

Чтобы сжать изображения до минимума, используйте такой инструмент, как Squoosh, инструмент, разработанный Google для уменьшения размера файла изображения за счет небольшого снижения качества изображения. Чем больше вы уменьшаете размер файла, тем ниже может быть качество изображения. Используйте скользящий индикатор сжатия Squoosh, чтобы найти баланс между качеством и размером, который вам подходит.

Однако ваше время драгоценно, а сжатие изображений по одному может оказаться утомительной задачей. Чтобы сжать несколько изображений одновременно, рассмотрите возможность использования TinyPNG.

5. Настройте свой веб-сайт на асинхронную загрузку файлов JavaScript.

По умолчанию многие веб-сайты загружают контент, написанный на JavaScript, сверху вниз на веб-странице. Таким образом, даже если веб-браузер пользователя выполняет более одного HTTP-запроса за раз, контент, который он получает, загружается по частям.Это также известно как "блокировка рендеринга" и может замедлить загрузку всей веб-страницы, поскольку каждый файл ожидает своей очереди для загрузки в веб-браузере пользователя.

Настройка веб-сайта для "асинхронной" загрузки JavaScript может переопределить это правило и улучшить взаимодействие с пользователем.

Асинхронная загрузка позволяет содержимому веб-сайта отображать несколько элементов страницы одновременно, независимо от того, где они расположены на странице. В WordPress есть множество плагинов, которые могут помочь вам в этом. HubSpot также позволяет вам изменить место отображения популярного элемента JavaScript, известного как «jQuery», на веб-странице, чтобы вы не застряли в ожидании его загрузки. На снимке экрана ниже показан этот вариант, а подробнее о нем читайте здесь.

Чтобы узнать больше о том, как сделать код JavaScript асинхронным, ознакомьтесь с этой презентацией Стива Содерса и этой записью в блоге Visual Website Optimizer.

6. Оцените другие части вашей страницы, которые увеличивают время загрузки страницы.

7. Объедините файлы CSS вместе.

Теперь взгляните, как можно объединить все эти файлы в одну строку или файл:

Код CSS может находиться где угодно на вашем сайте или в любом количестве файлов, и он будет работать так же хорошо. На самом деле, часто единственная причина, по которой сайт имеет несколько файлов CSS, заключается в том, что дизайнеру сайта проще работать с отдельными файлами. Чтобы узнать больше об объединении файлов CSS, ознакомьтесь с этим руководством по производительности веб-сайта переднего плана.

Читайте также: