Как работают браузеры — Web Performance

Пользователи хотят использовать приложения, в которых загрузка контента происходит быстро, а взаимодействие — плавно. Разработчик должен стараться оптимизировать своё приложение как минимум по этим двум показателям.

Чтобы понять, как улучшить производительность и ощущаемую пользователем производительность (User Perceived Performance, UPP), вам необходимо понимать, как работают браузеры.

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

Две главных проблемы в производительности — это проблема скорости сети и проблема однопоточности браузеров.

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

В большинстве своём браузеры рассматриваются как однопоточные приложения. Чтобы достичь плавности взаимодействия, разработчик должен обеспечивать производительность во всём, начиная от плавного скроллинга, до быстрой реакции на нажатие экрана. Время рендера — это ключевое понятие. Разработчик должен обеспечить такую работу приложения, чтобы все его задачи могли быть выполнены достаточно быстро. В таком случае процессор будет свободен для обработки пользовательского ввода. Для решения проблемы однопоточности вы должны понять природу браузеров и научиться разгружать основной поток процесса там, где это возможно и допустимо.

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

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

DNS запрос

Первый шаг навигации к странице — это поиск места, откуда нужно запрашивать данные. Если вы переходите на https://example.com, браузер грузит HTML-код страницы с IP-адреса 93.184.216.34. Если вы никогда ранее не были на этом сайте, произойдёт поиск DNS записи.

Ваш браузер запрашивает DNS запись. Как правило, запрос содержит имя сервера, который должен быть преобразован в IP-адрес. Ответ на этот запрос какое-то время будет сохранён в кеше устройства, чтобы его можно было быстро получить при следующем запросе к тому же серверу.

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

Это может быть проблемой с точки зрения производительности, особенно для мобильных сетей. Когда пользователь находится в мобильной сети, каждый DNS запрос должен пройти от мобильного устройства до сотовой вышки, а уже оттуда дойти до авторитетного DNS-сервера. Расстояние и помехи между телефоном, вышкой и сервером имён могут значительно увеличить задержку.

TCP Рукопожатие (Handshake)

В тот момент, когда IP адрес становится известен, браузер начинает установку соединения к серверу с помощью рукопожатия TCP three-way handshake (en-US). Этот механизм спроектирован так, чтобы два устройства, пытающиеся установить связь, могли обменяться параметрами соединения, прежде чем приступать к передаче данных. Чаще всего — через защищённое соединение HTTPS.

Трёхэтапное рукопожатие TCP — это техника, очень часто упоминаемая как «SYN-SYN-ACK» (SYN, SYN-ACK, ACK, если быть точнее), т.к. при установке соединения передаются 3 сообщения. Это означает, что прежде чем установится соединение, браузер должен обменяться ещё тремя сообщениями с сервером.

TLS Переговоры (Negotiation)

Для установки безопасных соединений с использованием HTTPS требуется ещё одно рукопожатие. На этот раз — TLS переговоры. На этом шаге определяется, какой шифр будет использоваться для шифрования соединения, удостоверяется надёжность сервера и устанавливается безопасное соединение. Этот шаг также требует несколько дополнительных сообщений, которыми должны обменяться сервер и браузер, прежде чем данные будут посланы.

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

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

Как только мы установили соединение с веб-сервером, браузер отправляет инициирующий HTTP GET запрос от имени пользователя. Чаще всего запрашивается HTML файл. В момент, когда сервер получает запрос, он начинает ответ с посылки заголовков ответа и содержимым HTML-файла.

<!doctype HTML>
<html>
 <head>
  <meta charset="UTF-8"/>
  <title>My simple page</title>
  <link rel="stylesheet" src="styles.css"/>
  <script src="myscript.js"></script>
</head>
<body>
  <h2>My Page</h2>
  <p>A paragraph with a <a href="https://example.com/about">link</a></p>
  <div>
    <img src="myimage.jpg" alt="image description"/>
  </div>
  <script src="anotherscript.js"></script>
</body>
</html>

Этот ответ содержит в себе первый байт полученных данных. Время до первого байта (Time to First Byte, TTFB) — это время между моментом когда пользователь отправил запрос, скажем, нажав на ссылку, и моментом получения первого пакета данных HTML. Первый пакет обычно содержит 14КБ данных.

В примере выше ответ значительно меньше, чем 14КБ; скрипты и стили, перечисленные в ответе, не будут запрошены, пока браузер не обработает ответ. Процесс обработки ответа — парсинг — мы обсудим отдельно.

TCP медленный старт / правило 14kb

Объём первого пакета данных — всегда 14KB. Это часть спецификации TCP slow start (en-US) — алгоритма, который балансирует скорость соединения. Такое правило позволяет постепенно, по мере необходимости, увеличивать размеры передаваемых данных, пока не будет определена максимальная ширина канала.

В алгоритме TCP slow start (en-US) каждый следующий отправленный сервером пакет увеличивается в размере в два раза. Например, размер второго пакета будет около 28КБ. Размер пакетов будет увеличиваться до тех пор, пока не достигнет какого-то порогового значения или не упрётся в проблему переполнения.

Если вы когда-то слышали о правиле 14КБ, то должны понимать, что оптимизация производительности загрузки должна учитывать ограничения этого начального запроса. Медленный старт TCP позволяет плавно ускорять передачу данных так, чтобы избежать проблемы переполнения, когда много данных ожидают отправки, но не отправляются из-за ограничений ширины канала.

Контроль переполнения

Любое соединение имеет ограничения, связанные с аппаратной и сетевой системами. Если сервер отправит слишком много пакетов за раз — они могут быть отброшены. Для того, чтобы избежать таких проблем, браузер должен реагировать на получение пакетов и подтверждать, что он получает их. Такой ответ-подтверждение называется Aknowledgements (ACK). Если из-за ограничений соединения браузер не получит данных, то он не пошлёт подтверждений ACK. В этом случае, сервер зарегистрирует, что какие-то пакеты не дошли и пошлёт их заново, что приведёт к лишней работе сервера и дополнительной нагрузке сети.

Как только браузер получает первый кусочек данных, он сразу начинает обрабатывать получаемую информацию. Эта обработка называется «Парсинг» (Parsing). Во время парсинга получаемые данные преобразуются в DOM и CSSOM (en-US), которые напрямую участвуют в отрисовке.

DOM (Объектная модель документа) — это внутреннее представление разметки HTML. Браузер предоставляет доступ к манипуляции объектами этой модели через разные JavaScript API.

Даже если ответ на запрос больше 14КБ, браузер всё равно начинает парсинг данных и пытается отрисовать страницу с теми данными, которые уже доступны. Именно поэтому при оптимизации производительности очень важно включать в инициирующий 14КБ ответ все необходимые для рендера данные — так браузер сможет быстрее начать формирование страницы. Однако, прежде чем что-либо появится на экране, HTML, CSS и JavaScript должны быть обработаны.

Построение дерева объектной модели документа

Мы уже рассказывали о пяти шагах в критическом пути рендеринга.

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

Объектная модель документа (DOM) описывает содержимое документа. Элемент <html> — это первый тег и корневой элемент дерева документа. Дерево отражает связи и иерархию между разными тегами. Теги, вложенные в другие теги являются детьми. Чем больше существует узлов в дереве, тем сложнее это дерево построить.

Когда парсер находит неблокирующие ресурсы (например, изображения), браузер отправляет запрос на загрузку ресурсов, но сам продолжает обработку. Обработка может продолжаться когда обнаружена ссылка на CSS файл, но если обнаружен

<script>, особенно если он без параметров async или defer — такой скрипт считается блокирующим и приостанавливает обработку HTML до завершения загрузки скрипта. Несмотря на то, что сканер предзагрузки (о нём ниже) браузера может находить и запрашивать такие скрипты заранее, сложные и объёмные скрипты всё ещё могут стать причиной заметных задержек загрузки страницы.

Сканер предзагрузки

Построение дерева DOM занимает весь поток процесса. Так как это явно узкое место в производительности, был создан особый сканер предзагрузки. Он обрабатывает доступное содержимое документа и запрашивает высокоприоритетные ресурсы (CSS, JavaScript и шрифты). Благодаря этому сканеру нам не нужно ждать, пока парсер дойдёт до конкретного места, где вызывается ресурс. Он запрашивает и получает эти данные заранее, в фоновом режиме, так что когда основной поток HTML-парсера доходит до запроса ресурса, высока вероятность, что ресурс уже запрошен или находится в процессе загрузки. Оптимизации, которые даёт этот сканер, уменьшают время блокирования рендера.

<link rel="stylesheet" src="styles.css"/>
<script src="myscript.js" async></script>
<img src="myimage.jpg" alt="image description"/>
<script src="anotherscript.js" async></script>

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

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

Построение модели стилей CSSOM

Второй шаг при прохождении критического пути рендеринга — это обработка CSS и построение CSSOM дерева. CSSOM (объектная модель CSS) похожа на DOM. И DOM, и CSSOM — это деревья. Они являются независимыми структурами данных. Браузер преобразует CSS файлы в карту стилей, которую он может понять и с которой может работать. Браузер считывает каждый набор правил в CSS, создаёт дерево узлов с родителями, детьми и соседями, основываясь на CSS селекторах.

Как и в HTML, браузер должен преобразовать полученные правила CSS во что-то, с чем он может работать. Таким образом, весь этот процесс — это повторение формирования DOM, только для CSS.

CSSOM дерево включает в себя стили пользовательского агента — это стили, которые браузер вставляет по умолчанию. Браузер начинает построение модели с наиболее общих правил для каждого узла, постепенно применяя более специфичные правила. Другими словами, он применяет правила каскадно. Отсюда и название CSS — Cascading Style Sheets.

Построение CSSOM происходит очень быстро и не отображается отдельным цветом в средствах разработчика. Оно настолько быстрое, что чаще всего включается в показатель «Повторное вычисление стилей (Recalculate Styles)» в средствах разработчика. Этот показатель показывает общее время обработки стилей — обработку CSS, построение CSSOM и рекурсивное вычисление стилей. С точки зрения оптимизации производительности здесь нечего делать, так как построение CSSOM, в целом, занимает даже меньше времени, чем DNS запрос.

Остальные процессы

Компиляция JavaScript

Как CSS обработан и CSSOM создан, другие ресурсы, например, JavaScript-файлы, продолжают загружаться (спасибо сканеру предзагрузки). JavaScript по окончании загрузки должен быть интерпретирован, скомпилирован, обработан и исполнен. Скрипты преобразовываются в абстрактное синтаксическое дерево (AST). Некоторые браузеры берут Abstract Syntax Tree и передают его в интерпретатор, который преобразует дерево в байт-код. Байт-код исполняется в основном потоке. Весь этот процесс называется компиляцией.

Построение дерева доступности

Браузер также строит дерево доступности, которое используется устройствами-помощниками для понимания и интерпретирования контента. Объектная модель доступности (accessibility object model, AOM) — это семантическая версия DOM. Браузер обновляет AOM в тот же момент, когда обновляется DOM. В то же время, дерево доступности не может быть изменено вспомогательными технологиями.

Пока модель AOM не построена, содержимое страницы недоступно для голосовых помощников и считывателей экрана (en-US).

Этапы рендеринга включают в себя стилизацию, компоновку (layout), отрисовку (paint) и, в некоторых случаях, композицию (composition). CSSOM и DOM деревья, созданные на предыдущем этапе комбинируются в дерево рендера, которое затем используется для расчёта положения каждого видимого элемента. После этого элементы будут отрисованы на экране. В некоторых случаях содержимое может быть вынесено на отдельные слои и совмещено (composition) — такой подход увеличивает производительность, позволяя отрисовывать содержимое экрана на графическом процессоре вместо ЦПУ. Это освобождает основной поток.

Стилизация

Третий шаг в критическом пути рендеринга — это комбинирование DOM и CSSOM в дерево рендеринга. Конструирование этого дерева начинается с прохода всего DOM-дерева от корня, с выявлением каждого видимого узла.

Элементы, которые не должны быть показаны, например, <head>, а так же их дети или любые элементы с display:none, такие как script { display: none; }, не будут включены в дерево рендера, так как они не должны быть отрисованы. Узлы с правилом visibility: hidden включены в дерево рендера, так как они всё равно занимают своё место. Так как мы не указали никаких специальных правил для перезаписи стилей агента по умолчанию, узел script в примере выше также не будет включён в дерево рендера.

Каждый видимый узел имеет свои правила из CSSOM. Дерево рендера содержит все видимые узлы с их содержимым и вычисленными стилями. Стили определяются путём применения всех подходящих правил с использованием CSS каскада.

Компоновка (Layout)

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

Как только дерево рендера построено — начинается layout. Дерево несёт в себе информацию о том, какие узлы должны быть отрисованы (даже если они невидимы), и какие стили должны быть применены, но в дереве нет никакой информации о размерах и позиции элементов. Чтобы определить эти значения, браузер начинает обход дерева.

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

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

Отрисовка (Paint)

Последний шаг критического пути рендеринга — это отрисовка каждого отдельного узла на экране. Момент, когда это происходит впервые, называется first meaningful paint (первая значащая отрисовка). Во время фазы отрисовки или растеризации, браузер конвертирует каждый контейнер box в настоящие пиксели на экране (напомним, что данные контейнеров формируются на этапе layout). Отрисовка подразумевает рисование каждой визуальной частицы элемента на экране (текст, цвета, границы, тени) и рисование заменяемых элементов (картинки, кнопки). Браузер должен выполнять это быстро.

Чтобы обеспечить плавную прокрутку и анимацию, отрисовка каждого элемента занимает весь основной поток. Сюда включается вычисление стилей, повторное вычисление стилей и отрисовка. Все эти этапы должны выполняться не дольше 16.67 мс. (1000мс. / 60 кадров в секунду). При разрешении 2048х1536 экран iPad содержит 3.145.000 пикселей, которые должны быть отрисованы. Это много! Для того, чтобы сделать инициирующую и повторную отрисовки быстрее, можно разбить весь процесс на несколько слоёв. Когда это случается — становится необходима композиция.

Отрисовка может разбить элементы в дереве рендера на слои. Для того, чтобы ускорить их рендер, браузер может перенести отрисовку разных слоёв на GPU (вместо основного потока CPU). Для переноса вычислений отрисовки на GPU вы можете использовать некоторые специальные HTML теги, например <video> и <canvas>; а также CSS-свойства opacity, transform и will-change. Узлы, созданные таким образом, будут отрисованы на их собственном слое, вместе с их потомками, если только потомки сами по себе не будут вынесены в отдельные слои.

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

Композиция (Compositing)

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

При догрузке ранее запрошенных ресурсов (например, изображений) может потребоваться перерассчитать размеры и положение элементов относительно друг друга. Этот перерасчёт — reflow — запускает перерисовку (repaint) и перекомпозицию (re-composite). Если мы заранее определили размер изображения, перерасчёт не будет необходим и в этом случае только тот слой, который должен быть перерисован — будет перерисован. Но если мы не определили размер изображения заранее, то браузер, после получения ответа от сервера, будет вынужден отмотать процесс рендеринга обратно к шагу компоновки (layout) и начать процесс отрисовки ещё раз.

Можно было бы подумать, что как только основной поток завершает отрисовку страницы — «всё готово». Это не всегда так. Если среди загружаемых ресурсов есть JavaScript, загрузка которого была корректно отложена, а запуск которого происходит только после события onload, основной поток начинает обработку скриптов. Во время этой обработки браузер не может обрабатывать события прокрутки, нажатий и др.

Time to Interactive (TTI, время до интерактивности) — это показатель того, как много времени проходит между самым первым сетевым запросом и моментом, когда страница становится интерактивной. В хронологии этот этап следует сразу за First Contentful Paint. Интерактивностью называется показатель того, что страница отреагировала на действие пользователя за время в 50мс.

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

В нашем примере, даже несмотря на то, что изображение загрузилось быстро, скрипт anotherscript.js, размер которого достигает 2МБ, загружается долго. В этом случае пользователь увидит страницу очень быстро, но не будет способен взаимодействовать с ней, пока скрипт не будет загружен, обработан и исполнен. Это плохая практика. Старайтесь избегать полной загрузки процесса.

В примере выше загрузка содержимого DOM заняла около 1.5 секунд. Все это время основной поток процесса был полностью загружен и не был способен обработать пользовательский ввод.

• Производительность Web

Found a content problem with this page?

• Edit the page on GitHub.
• Report the content issue.
• View the source on GitHub.

Want to get more involved?

Learn how to contribute.

This page was last modified on 15 дек. 2022 г. by MDN contributors.

Назначение и функции браузеров

Для работы в интернете применяются программы, называемые веб-браузерами или просто браузерами.

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

Вид веб-страницы (гипертекстового документа) в окне браузера зависит от имеющихся в ней тегов — команд языка разметки HTML.

Стиль оформления сайтов определяет также информация, записанная на языке CSS (Cascade Style Sheets — таблицы каскадных стилей) в HTML-документах или отдельных файлах.

Современные браузеры способны отображать иллюстрации, анимацию, видео ролики и звук. Браузеры обеспечивают возможность перемещаться по пространству Всемирной паутины. Просматривая веб-страницы, содержащие гиперссылки и кликая по ним, пользователь может быстро переходить от одной страницы к другой. На сегодня наибольшее распространение в интернете получили браузеры Internet Explorer, Google Chrome, Mozilla Firefox и Opera.

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

Браузер Internet Explorer

Самым популярным браузером остаётся Internet Explorer (IE). Чтобы открыть окно браузера следует нажать кнопку \Пуск\, затем выбрать команду — \Все программы\ и \Internet Explorer\.

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

Основные элементы управления, предназначенные для выполнения различных действий в окне Internet Explorer, перечислены ниже.

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

 

Функции браузера для вебмастеров

 

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

 

Например, открыть средства разработки можно, набрав на клавиатуре:  Ctrl + Shift + I, F12, правой кнопкой мыши, а также другими способами (в браузерах могут отличаться). В панели можно проводить предварительную (не сохраняется) отладку кодов, стилей, JavaScript, html, php и т.д. Но для этого нужно обладать некоторыми знаниями программирования.

 

 ***

Какой хостинг выбрать для начинающих

Режим инкогнито в браузере Google Chrome

Как очистить кэш в браузере Google Chrome

• < Назад
• Вперёд >

Как работают веб-браузеры — навигация (часть 1, с иллюстрациями) ⚙️💥

Браузеры (также называемые веб-браузерами или интернет-браузерами ) — это программные приложения, установленные на наших устройствах, которые позволяют нам получать доступ к Word Wide Web. Вы на самом деле используете его, читая этот текст.

Сегодня используется множество браузеров, и по состоянию на 2021 год наиболее часто используемыми были: Google Chrome , Apple Safari , Microsoft Edge и Firefox .

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

Упрощенно это выглядит так:

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

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

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

DNS Lookup (разрешение веб-адреса)

Первым шагом при переходе на веб-страницу является поиск ресурсов для этой страницы (HTML, CSS, Javascript и другие файлы). Если мы перейдем на https://example.com, HTML-страница находится на сервере с IP-адресом 93.184.216.34 (для нас веб-сайты — это доменных имени , а для компьютеров — 9).0004 IP-адреса ). Если мы никогда раньше не посещали этот сайт, необходимо выполнить поиск в системе доменных имен (DNS).

DNS-серверы — это компьютерные серверы, которые содержат базу данных общедоступных IP-адресов и связанных с ними имен хостов (это обычно сравнивают с телефонной книгой, в которой имена людей связаны с определенным номером телефона). В большинстве случаев эти серверы служат для разрешения или преобразования этих имен в IP-адреса по запросу (в настоящее время существует более 600 различных корневых серверов DNS, распределенных по всему миру).

Итак, когда мы запрашиваем DNS-запрос , на самом деле мы опрашиваем один из этих серверов и просим выяснить, какой IP-адрес соответствует имени https://example.com . Если соответствующий IP-адрес найден, он возвращается. Если что-то случится и поиск не увенчается успехом, мы увидим какое-то сообщение об ошибке в браузере.

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

TCP (протокол управления передачей) Рукопожатие

Как только веб-браузер узнает IP-адрес веб-сайта, он попытается установить соединение с сервером, содержащим ресурсы, посредством трехстороннего рукопожатия TCP (также называемого SYN-SYN-ACK или точнее SYN, SYN-ACK, ACK , потому что TCP передает три сообщения для согласования и начала сеанса TCP между двумя компьютерами).

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

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

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

Браузер отправляет на сервер сообщение SYNC и запрашивает SYN синхронизация (под синхронизацией подразумевается соединение).

Затем сервер ответит сообщением SYNC-ACK ( SYNC хронизация и ACK уведомление):

Теперь, когда TCP-соединение (двустороннее соединение) установлено посредством трехэтапного рукопожатия , можно начать согласование TLS .

согласование TLS

Для безопасных соединений, установленных через HTTPS, требуется еще одно рукопожатие . Это рукопожатие (согласование TLS) определяет, какой шифр будет использоваться для шифрования связи, проверяет сервер и устанавливает наличие безопасного соединения перед началом фактической передачи данных.

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

На этом этапе между браузером и сервером происходит обмен сообщениями.

1. Клиент передает привет . Браузер отправляет серверу сообщение, в котором указывается, какую версию TLS и набор шифров он поддерживает, а также строку случайных байтов, известную как client random .
2. Приветственное сообщение сервера и сертификат . Сервер отправляет обратно сообщение, содержащее SSL-сертификат сервера, выбранный сервером набор шифров и server random , еще одна случайная строка байтов, сгенерированная сервером.
3. Аутентификация . Браузер сверяет SSL-сертификат сервера с выдавшим его центром сертификации. Таким образом, браузер может быть уверен, что сервер именно тот, за кого он себя выдает.
4. Секрет премастера . Браузер отправляет еще одну случайную строку байтов, называемую предварительным секретом , которая зашифрована открытым ключом , который браузер берет из SSL-сертификат с сервера. Предварительный секрет может быть расшифрован сервером только с помощью закрытого ключа.
5. Использован закрытый ключ . Сервер расшифровывает предварительный секрет .
6. Сеансовые ключи созданы . Браузер и сервер генерируют сеансовые ключи из случайного клиента, случайного сервера и предварительного секрета.
7. Клиент завершен . Браузер отправляет сообщение на сервер о завершении.
8. Сервер завершен . Сервер отправляет браузеру сообщение о том, что он также завершил работу.
9. Безопасное симметричное шифрование достигнуто . Рукопожатие завершено, и связь может быть продолжена с использованием сеансовых ключей.

Теперь можно начинать запрашивать и получать данные с сервера.

Справочные материалы:

• MDN Web Docs
• Блог Cloudflare
• Ворота исследований
• Блог Cloudflare

Что такое веб-браузер? Как это работает?

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

Родственные | Упрощенный Web 3.0 — что это? Как это повлияет на вас?

Содержание

Что такое веб-браузер?

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

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

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

Например, Chrome предлагает встроенные инструменты, такие как Менеджер паролей, Проверка пароля, Защита от фишинга и другие.

Как работает веб-браузер?

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

Компоненты веб-браузера

Любой веб-браузер состоит из двух элементов — внешнего интерфейса и внутреннего интерфейса . Интерфейс — это интерфейс, с которым мы взаимодействуем, который выглядит довольно просто. Тем не менее, это сложная серверная часть, которая облегчает основную работу браузера. Браузер состоит из следующих основных компонентов:

1. Пользовательский интерфейс

Интерфейс — это пространство, в котором вы взаимодействуете с браузером. Он включает в себя адресную строку, экранные элементы управления, такие как «Домой», «Назад», «Вперед» и «Обновить», за которыми следует часть, в которой отображается веб-страница, кнопка закладок и все другие параметры на экране браузера.

2. Механизм браузера

Механизм браузера обеспечивает связь между пользовательским интерфейсом и механизмом рендеринга. Он управляет и манипулирует механизмом рендеринга на основе входных данных из различных пользовательских интерфейсов.

3. Механизм визуализации

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

Работает с документами HTML и XML и другими файлами для создания макета, отображаемого в пользовательском интерфейсе. Механизм рендеринга также может работать с другими типами данных с помощью определенных плагинов и расширений. Ниже приведены механизмы рендеринга, используемые основными веб-браузерами:

• Blink — Google Chrome, Opera, Microsoft Edge (ранее использовался EdgeHTML).
• WebKit — Используется в Safari.
• Gecko — Mozilla Firefox.
• Trident – ​​ Internet Explorer.
• Presto — Устаревший движок рендеринга для Opera.

4. Сеть

Компонент сети обеспечивает связь и безопасность в Интернете. Он извлекает URL-адреса, используя распространенные интернет-протоколы, такие как HTML и FTP.

5. Интерпретатор JavaScript

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

6. Бэкенд пользовательского интерфейса

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

7. Хранилище данных

Это единый уровень, который браузер использует для хранения всех своих данных, включая файлы cookie, локальное хранилище, хранилище сеансов, IndexedDB, WebSQL и файловую систему.

Пошаговая инструкция работы браузера

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

Он включает в себя многоэтапный процесс, включающий DNS-разрешение , HTTP-обмен между браузером и веб-сервером, рендеринг и т. д., а именно: Кредиты: HackerNoon

• Вы вводите URL-адрес в веб-браузере. .
• Браузер находит IP-адрес домена с помощью DNS.
• Браузер устанавливает соединение с сервером.
• Затем он отправляет HTTP-запрос на веб-сервер.
• Сервер обрабатывает запрос и отправляет ответ HTTP.
• Браузер визуализирует и отображает HTML-контент, т. е. веб-страницу.

Общие термины, связанные с браузерами

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

• URL-адрес – Универсальный указатель ресурсов – это адрес данного уникального ресурса в Интернете.
• HTML – HTML означает язык гипертекстовой разметки, используемый для создания веб-страниц и приложений.
• HTTP – HTTP — это протокол, позволяющий извлекать ресурсы, например HTML-документы. Это протокол клиент-сервер, что означает, что ваш веб-браузер инициирует запросы.
• IP-адрес — Он определяет местоположение определенного сервера, подключенного к Интернету. Каждый веб-сайт имеет свой уникальный IP-адрес и может иметь несколько IP-адресов при размещении в нескольких местах. Например, общий IP-адрес для Facebook — 157.240.241.35.
• DNS – DNS или система доменных имен — это база данных, содержащая записи о доменах. Он помогает обнаруживать веб-сайты, используя удобочитаемые адреса.
• Файлы cookie – Файлы cookie — это небольшие фрагменты данных, которые веб-сайты хранят в памяти вашего устройства.

Список популярных веб-браузеров

1. Chrome от Google

Google Chrome в настоящее время является самым популярным веб-браузером в мире с долей рынка более 64%. Впервые он был выпущен в 2008 году. Браузер использует механизм рендеринга Google Blink. Вот еще о эволюция Chrome за 12 лет.

2. Firefox от Mozilla

Firefox — это бесплатный веб-браузер с открытым исходным кодом от Mozilla. Впервые он был выпущен еще в 2002 году. Firefox использует механизм компоновки Gecko для отображения веб-страниц. Согласно статистике StatCounter, в настоящее время он занимает более 4% доли мирового рынка браузеров.

3. Microsoft Edge

Впервые Microsoft Edge был выпущен в 2015 году для замены Internet Explorer в качестве браузера по умолчанию в Windows 10. Позже он стал доступен для Android, iOS и macOS.

Первоначально использовался механизм рендеринга EdgeHTML. Однако в 2019 году Microsoft выпустила новый Edge на основе Chromium, используя тот же механизм рендеринга, что и Chrome, то есть Blink. У него по-прежнему мизерная доля мирового рынка — немногим более 3%.

Вот как Edge развился из Internet Explorer.

4. Opera

Opera — это мультиплатформенный веб-браузер, разработанный Opera Software и выпущенный в 1995 году. Это один из старейших веб-браузеров на рынке. Изначально у него был собственный проприетарный механизм компоновки Presto. Однако в 2013 году Opera перешла на Chromium.

Он был приобретен китайским консорциумом во главе с Golden Brick Capital Private в 2016 году. Opera недавно выпустила специальный браузер Web 3 Crypto.

5. Safari от Apple

Safari — еще один браузер, популярный среди пользователей продукции Apple. Впервые он появился в 2003 году для Mac OS X, а мобильная версия была представлена ​​​​в iPhone OS 1 в 2007 году. У него также была версия для Windows, доступная с 2007 по 2012 год.

Safari использует механизм рендеринга WebKit и использует Google в качестве поиска по умолчанию. двигатель. В настоящее время он занимает более 18% доли рынка браузеров по всему миру.

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

• Samsung Internet
• Brave Browser
• Vivaldi Browser
• UC Browser и т.д. космос может скоро изменить то, как мы используем наши браузеры. Вот некоторые браузеры Web 3.0, которые могут вас заинтересовать, и да, Brave является их частью.