Вот как веб-страница отображается в вашем браузере

Задумывались ли вы, что нужно для загрузки веб-страницы в ваш браузер? В зависимости от вашего интернет-соединения, введя URL-адрес или адрес веб-страницы и нажав кнопку «Ввод», вы практически мгновенно попадете на эту веб-страницу. Это может быть медленный процесс на медленных соединениях, но вы все равно можете перейти на страницу относительно быстро. Что происходит за кулисами, чтобы все это произошло? Следуйте ниже, и мы покажем вам, что происходит!

Связь сервера с браузером

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

Хотя это немного сложнее.

Быстрое слово на URL

Когда вы вводите URL-адрес, например www.google.com, это именно то, что вы видите. Компьютер видит что-то еще. Как только вы наберете это и нажмете ввод, он пройдет через сервер доменных имен (DNS) и преобразует его в I.P. адрес — что-то, что компьютер может прочитать. Таким образом, хотя вы можете видеть www.google.com, браузер принимает его, пропускает через DNS-сервер, а затем вы на самом деле подключаетесь к одному из многих IP-адресов Google, таким как 216.58.216.110. Вы могли бы ввести 216.58.216.110 в адресной строке и в конечном итоге в том же месте.

Получение веб-страницы в вашем браузере

Есть много движущихся частей для правильного отображения веб-страницы в вашем браузере. Однако первым шагом является запрос. Вы отправляете запрос на веб-сервер, когда вводите адрес сайта, который хотите посетить, например, www.techjunkie.com. После того, как вы нажмете Enter, ваш браузер подключится к веб-хосту и запросит загрузку нескольких текстовых файлов.

Следующим шагом является ответ веб-сервера. На этом этапе сервер фактически предоставляет ресурсы для браузера. Браузер запрашивает их (запрос), а сервер отправляет их (ответ). Однако как браузер узнает, нужно ли ему больше, чем один файл? Это делается через то, что называется разбором. Другими словами, браузер берет первый документ, ищет любые ссылки на другие файлы. Если он видит ссылку на другой файл, он также загружает его. Это намного сложнее, но это суть того, как он находит все необходимые файлы.

Далее, вся эта информация, которую он скачал, должна быть собрана. Он берет исходный HTML-документ, который он скачал, а также все соответствующие ресурсы и создает своего рода структуру или дерево. Сначала будет построена карта объектов документа (DOM), которая по сути является структурой или размещением элементов на странице. Затем он создает карту объектов CSS — структуру для стилизации элементов в DOM. Наконец, он создает дерево рендеринга, которое в основном использует DOM и карту объектов CSS, объединяет их и создает структуру для структуры и стиля страницы.

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

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

закрытие

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

Ссылка на основную публикацию