Инструменты разработчика Chrome: как читать панель сети?

Я пытаюсь понять инструменты разработчика Chrome, когда я запускаю тесты производительности на своих сайтах. Если вы выберите "Сеть" в утилите инструментов, она будет выглядеть так:

enter image description here

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

enter image description here

Мой вопрос:

  • В чем смысл поиска DNS, подключения, отправки, ожидания и получения? Что происходит между сервером, сетью и браузером на каждом этапе?
  • На первом изображении красная строка считывает "Событие загрузки", а синяя - "Событие DOMContent". В чем смысл этого и почему это событие DOMContent запускается после загрузки всего содержимого?

ОТВЕТЫ

Ответ 1

Я не уверен, что это хорошо подходит для SO, поскольку это сетевой вопрос больше, чем вопрос программирования, но я отвечу на части, которые я могу...

Поиск DNS

При подключении к веб-сайту он должен искать IP-адрес DNS. Например, ваш компьютер свяжется с DNS, спрашивая, знает ли он, где находится "google.com". Если да, то это даст вам IP. Если этого не произойдет, он либо предоставит вам IP другого DNS, либо свяжется с самим DNS (я не уверен, какая реализация применяется там), пока, в конце концов, вы не получите IP-адрес хоста, который вы ищете для.

Подключение

Время, необходимое для соединения с этим IP-адресом. Я не уверен в деталях здесь.

Отправка

После подключения вы отправляете запрос на сервер. Это может быть запрос для просмотра страницы или отправки данных или чего-либо еще.

Ожидание

После отправки запроса вы ждете ответа сервера на него. Он может быть занят или может занять некоторое время, чтобы обработать все, что вы просили.

Прием

Как только сервер обработает ваш запрос, он вернет вам данные.

Ответ 2

Ответная часть II:

Синяя линия (событие загрузки содержимого DOM):
Это происходит, когда браузер завершил разбор основного документа.

Красная строка (событие загрузки):
Это происходит, когда браузер завершил поиск всех ресурсов, необходимых для основного документа.

После красной строки: Здесь вы увидите загрузку асинхронных и кешированных ресурсов, необходимых для основного документа и других ресурсов.