Каков полный процесс от ввода URL-адреса до адресной строки браузера, чтобы получить отображаемую страницу в браузере?

Question

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

В моем понимании процесс должен быть таким:

1. введите URL в адресную строку
2. запрос будет отправлен на DNS-сервер в зависимости от конфигурации вашей сети
3. DNS направит вас к реальному IP доменного имени
4. запрос (с полным заголовком Http) будет отправлен на сервер (с 3-мя IP-адресами для идентификации) на 80-порт (предположим, мы не указываем другой порт)
5. сервер будет искать порты прослушивания и перенаправлять запрос в приложение, которое прослушивает порт 80 (скажем, nginx здесь) или на другой сервер (тогда сервер 3 будет похож на балансировщик нагрузки)
6. nginx попытается сопоставить URL-адрес с его конфигурацией и будет служить в качестве статической страницы напрямую, либо вызовет соответствующий интерпретатор сценария (например, PHP / Python) или другое приложение для получения динамического содержимого (с запросом БД или другой логикой)
7. HTML будет отправлен обратно в браузер с полным заголовком ответа Http
8. браузер будет анализировать DOM html, используя его синтаксический анализатор
9. внешние ресурсы (JS / CSS / images / flash / videos ..) будут запрошены в последовательности (или нет?)
10. для JS, он будет выполняться двигателем JS
11. для CSS, он будет отображаться с помощью движка CSS, а отображение HTML будет корректироваться на основе CSS ( также в последовательности или нет ?)
12. если в DOM есть iframe, то с шага 1-12 * 1034 будет выполняться отдельный процесс

Выше мое понимание, но я не знаю, правильно ли это или нет? Насколько точный? Я что-то пропустил?

Если это правильно (или почти правильно), я надеюсь:

1. Сделайте описание шага более точным в ваших словах или напишите ваши шаги, если есть большие изменения
2. Сделайте глубокое объяснение каждого шага, с которым вы наиболее знакомы.
3. Один ответ за шаг. Другие могут сделать дополнение в комментарии каждого ответа.

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

И я буду обновлять этот вопрос на основе ответов.

Спасибо.

Answer 1

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

• Уровень DNS может помочь перенаправить клиентов на разные серверы в зависимости от географического местоположения, чтобы помочь с балансировкой нагрузки и минимизацией задержки, и один сервер может отвечать на запросы от множества разных имен DNS.
• Браузер может выполнять различные типы запросов (GET, POST, HEAD и т. Д.) И обычно включает несколько различных заголовков, включая файлы cookie, возможности браузера, языковые настройки и т. Д.
• Большинство браузеров обычноподдерживать кэш, чтобы избежать многократной загрузки файлов, и использовать различные методы, чтобы определить, является ли кэшированная версия файла действительной.
• В современных веб-страницах часто существует сложное взаимодействие между многими различными типами файлов (HTML,Разработчикам CSS, изображений, JavaScript, видео, Flash, ...) и веб-разработчикам часто требуется детальное знание различий между браузерами, чтобы их страницы работали для всех

Каждая из этих тем имногое другое, можно обсудить в ЛенGTH.Возможно, более практично задавать более конкретные вопросы по интересующим вас темам?

Answer 2

Я тоже искал ту же вещь и нашел этот удивительный подробный ответ, созданный совместно на github

Answer 3

1. Вы вводите maps.google.com (Uniform Resource Locator) в адресную строку браузера и нажимаете ввод.
2. Каждый URL имеет уникальный IP-адрес, связанный с ним.Сопоставление хранится на серверах имен, и эта процедура называется системой доменных имен.
3. Браузер проверяет свой кэш, чтобы найти IP-адрес для URL.
   • Если он не находит его, он проверяет свою ОС, чтобы найти IP-адрес (имя_хоста);
   • Затем проверяет кэш маршрутизатора.
   • Затем проверяетКеш провайдера.Если он там недоступен, интернет-провайдер делает рекурсивный запрос на разные серверы имен.
4. Он проверяет сервер имен com (у нас есть много серверов имен, таких как 'в ',' mil ',' us 'и т. д.), и он будет перенаправлен на google.com
5. сервер имен google.com найдет соответствующий IP-адрес для maps.google.com в своих записях DNS и вернетэто к вашему рекурсору DNS, который отправит его обратно вашему браузеру.

6. Браузер инициирует TCP-соединение с сервером. Он использует трехстороннее рукопожатие

   • Клиентский компьютер отправляет пакет SYN на сервер через Интернет, спрашивая, открыт ли он для новых подключений.

   • Если на сервере есть открытые порты, которые могут принимать и инициировать новые подключения, он будетответ ACKnowledgment пакета SYN с использованием пакета SYN / ACK.

   • Клиент получит пакет SYN / ACK от сервера и подтвердит его, отправив пакет ACK.Затем устанавливается TCP-соединение для передачи данных!

7. Браузер отправит запрос GET с запросом веб-страницы maps.google.com.Если вы вводите учетные данные или отправляете форму, это может быть запрос POST.
8. Сервер отправляет ответ.
9. Как только сервер предоставляет ресурсы (HTML, CSS, JS, изображения,и т. д.) для браузера он проходит следующий процесс:
   Парсинг - HTML, CSS, JS
   Рендеринг - Построение DOM-дерева → Дерево рендеринга → Макет дерева рендеринга→ Рисование дерева рендеринга
   
10. Механизм рендеринга начинает получать содержимое запрошенного документа с сетевого уровня.Обычно это делается кусками по 8 кБ.
    
11. Дерево DOM строится из неработающего ответа.
    
12. Новые запросы отправляются на сервер для каждого нового ресурса, найденного в источнике HTML (обычно изображения, таблицы стилей и файлы JavaScript).
    
13. На этом этапе браузер помечает документ как интерактивный и запускает синтаксический анализ сценариев, находящихся в режиме «отложенного»: тех, которые должны выполняться после анализа документа.Состояние документа установлено на «завершено», и запускается событие «загрузка».
    
14. Каждый файл CSS анализируется в объекте StyleSheet, где каждый объект содержит правила CSS с селекторами и объектами, соответствующими грамматике CSS.Построенное дерево называется CSSCOM.
    
15. На вершине DOM и CSSOM создается дерево рендеринга, представляющее собой набор объектов для рендеринга.Каждый из объектов рендеринга содержит соответствующий ему объект DOM (или текстовый блок) плюс рассчитанные стили.Другими словами, дерево визуализации описывает визуальное представление DOM.
    
16. После построения дерева рендеринга он проходит процесс «макета».Это означает предоставление каждому узлу точных координат, где он должен появиться на экране.
    
17. Следующий этап - рисование - дерево рендеринга будет пройдено, и каждый узел будет окрашен с использованием внутреннего слоя пользовательского интерфейса.
    
18. Перекрашивание: при изменении стилей элемента, которые не влияют на положение элемента на странице (например, цвет фона, цвет рамки, видимость), браузер просто перерисовывает элемент снова с новымпримененные стили (это означает, что происходит "перекраска" или "рестайлинг").
    
19. Reflow:Когда изменения влияют на содержимое или структуру документа или положение элемента, происходит перекомпоновка (или ретрансляция).
    

Answer 4

Я могу описать один момент здесь -

Определение, какой файл / ресурс выполнить, какой языковой интерпретатор загрузить.

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

Когда веб-сервер (например, apache) получил URI, он проверяет, существует ли какое-либо существующее правило перезаписи, соответствующее ему.В этом случае переписанный URI берется.В любом случае, если нет имени файла для завершения URI, загружается файл по умолчанию, обычно это index.html или index.php и т. Д. В соответствии с расширением имени файла, соответствующий модуль apache для серверной частиЗагружена поддержка языка программирования, например, mod_php для PHP, mod_python для Python.Соответствующий интерпретатор языка на стороне сервера (с учетом интерпретируемых языков, таких как PHP) затем подготавливает окончательный HTML или вывод в какой-либо другой форме для веб-сервера, который в конечном итоге отправляет его в виде ответа HTTP.