Что именно происходит от ввода URL до представления страницы?

внешний интерфейс

С точки зрения разработки, эксплуатации и обслуживания он обычно делится на следующие процессы:

  • Разрешение DNS: разрешает доменные имена в IP-адреса
  • TCP-соединение: трехстороннее рукопожатие TCP
  • отправить HTTP-запрос
  • Сервер обрабатывает запрос и возвращает HTTP-сообщение.
  • Браузер анализирует отображаемую страницу
  • Отключено: TCP махнул четыре раза

1. Что такое URL?

URL (унифицированный локатор ресурсов), унифицированный локатор ресурсов, используется для поиска ресурсов в Интернете, широко известных как URL-адреса.

scheme: // host.domain:port / path / filename ? abc = 123 # 456789

scheme       - 定义因特网服务的类型。常见的协议有 http、https、ftp、file，
               其中最常见的类型是 http，而 https 则是进行加密的网络传输。
host         - 定义域主机（http 的默认主机是 www）
domain       - 定义因特网域名，比如 baidu.com
port         - 定义主机上的端口号（http 的默认端口号是 80）
path         - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
filename     - 定义文档/资源的名称
query        - 即查询参数
fragment     - 即 # 后的hash值，一般用来定位到某个位置

2. Разрешение доменного имени DNS

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

  1. айпи адрес
IP 地址是指互联网协议地址，是 IP Address 的缩写。IP 地址是 IP 协议提供的一种统一的地址格式，
它为互联网上的每一个网络和每一台主机分配一个逻辑地址，以此来屏蔽物理地址的差异。
  1. Что такое DNS
DNS 协议提供通过域名查找 IP 地址，或逆向从 IP 地址反查域名的服务。
DNS 是一个网络服务器，我们的域名解析简单来说就是在 DNS 上记录一条信息记录。
  1. Как браузер запрашивает IP-адрес, соответствующий URL-адресу, через доменное имя?
DNS域名解析分为递归查询和迭代查询两种方式，现一般为迭代查询。

Оптимизация и применение DNS

  1. Кэш DNSDNS存在着多级缓存，从离浏览器的距离排序的话，有以下几种: 浏览器缓存，系统缓存，路由器缓存，IPS服务器缓存，根域名服务器缓存，顶级域名服务器缓存，主域名服务器缓存。

  2. Балансировка нагрузки DNS(DNS重定向) DNS负载均衡技术的实现原理是在DNS服务器中为同一个主机名配置多个IP地址，在应答DNS查询时， DNS服务器对每个查询将以DNS文件中主机记录的IP地址按顺序返回不同的解析结果，将客户端的访问 引导到不同的机器上去，使得不同的客户端访问不同的服务器，从而达到负载均衡的目的。

  • Хорошо известная сеть CDN (сеть доставки контента) использует технологию перенаправления DNS, и DNS-сервер будет возвращать последующее сообщение. Пользователю предоставляется IP-адрес ближайшей к пользователю точки, а сервер узла CDN отвечает за ответ на запрос пользователя и предоставление необходимого контента.
  1. dns-prefetch DNS Prefetch 是一种 DNS 预解析技术。当你浏览网页时，浏览器会在加载网页时对网页中的域名进行解析缓存，这样在你单击当前网页中的连接时就无需进行 DNS 的解析，减少用户等待时间，提高用户体验。

Эталонная модель OSI и четырехуровневая модель TCP/IP


Три, трехстороннее рукопожатие TCP

  • Клиент отправляет пакет с SYN=1, Seq=X на порт сервера（第一次握手，由浏览器发起，告诉服务器我要发送请求了）

  • Сервер отправляет ответный пакет с SYN=1, ACK=X+1, Seq=Y для передачи подтверждающей информации.（第二次握手，由服务器发起，告诉浏览器我准备接受了，你赶紧发送吧）

  • Клиент отправляет обратно пакет с ACK=Y+1, Seq=Z, что означает «конец рукопожатия».（第三次握手，由浏览器发送，告诉服务器，我马上就发了，准备接受吧）


В-четвертых, отправьте HTTP-запрос

После завершения трехэтапного рукопожатия TCP начинается отправка сообщения HTTP-запроса.

为避免篇幅过长，http协议、缓存等相关内容请参阅： От HTTP к WEB-кэшированию


5. Сервер обрабатывает запрос и возвращает HTTP-сообщение.

На каждом сервере установлено приложение, обрабатывающее запрос - веб-сервер. Общие продукты для веб-серверов включают apache, nginx, IIS, Lighttpd и т. д.

假装我是一个传统的MVC模型，RD同学请无视

6. Браузер анализирует и отображает страницу

Основные компоненты браузера

用户界面    (User Interface)    － 包括地址栏、后退/前进按钮、书签目录等，也就是你所看到的除了用来显示你所请求页面的主窗口之外的其他部分

浏览器引擎  (Browser Engine)    － 用来查询及操作渲染引擎的接口

渲染引擎    (Rendering Engine)  － 用来显示请求的内容，例如，如果请求内容为html，它负责解析html及css，并将解析后的结果显示出来

网络        (Networking)        － 用来完成网络调用，例如http请求，它具有平台无关的接口，可以在不同平台上工作

JS解释器    (JS Interpreter)    － 用来解释执行JS代码

UI后端      (UI Backend)        － 用来绘制类似组合选择框及对话框等基本组件，具有不特定于某个平台的通用接口，底层使用操作系统的用户接口

数据存储    (DB Persistence)    － 属于持久层，浏览器需要在硬盘中保存类似cookie的各种数据，HTML5定义了web database技术，这是一种轻量级完整的客户端存储技术

1. Многопроцессный браузер

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

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

  • Браузерный процесс: основной процесс браузера (отвечает за координацию и главный контроль), есть только один
  • Процессы сторонних подключаемых модулей: один процесс для каждого типа подключаемого модуля, создаваемый только при использовании подключаемого модуля.
  • Процесс GPU: максимум один, для 3D-рендеринга
  • Процесс рендеринга браузера (ядро): по умолчанию один процесс на странице вкладки, независимо друг от друга, управляет рендерингом страницы, выполнением скрипта, обработкой событий и т. д. (иногда оптимизировано, например, несколько пустых вкладок будут объединены в один процесс)

2. Многопоточное ядро ​​браузера

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

  1. Графический поток
  2. Поток движка JS
  3. поток триггера события
  4. поток таймера
  5. поток сетевых запросов

После того, как ядро ​​браузера получит содержимое, этапы рендеринга можно условно разделить на следующие этапы:

1. 解析HTML，构建DOM树

2. 解析CSS，生成CSS规则树

3. 合并DOM树和CSS规则，生成render树

4. 布局render树（Layout/reflow），负责各元素尺寸、位置的计算

5. 绘制render树（paint），绘制页面像素信息

以webkit内核为例

1. Парсинг HTML, построение DOM

Проще говоря, процесс этого шага выглядит следующим образом: браузер анализирует HTML и строит DOM-дерево. Конечно, процесс парсинга HTML для построения DOM можно кратко описать следующим образом:

Bytes → characters → tokens → nodes → DOM

其中比较关键的几个步骤

1. Conversion转换：浏览器将获得的HTML内容（Bytes）基于他的编码转换为单个字符

2. Tokenizing分词：浏览器按照HTML规范标准将这些字符转换为不同的标记token。每个token都有自己独特的含义以及规则集

3. Lexing词法分析：分词的结果是得到一堆的token，此时把他们转换为对象，这些对象分别定义他们的属性和规则

4. DOM构建：因为HTML标记定义的就是不同标签之间的关系，这个关系就像是一个树形结构一样
例如：body对象的父节点就是HTML对象，然后段略p对象的父节点就是body对象

2. Разберите CSS и сгенерируйте дерево правил CSS

Аналогичным образом генерируются деревья правил CSS.

Bytes → characters → tokens → nodes → CSSOM

3. Объедините дерево DOM и правила CSS для создания дерева рендеринга.

Когда у дерева DOM и CSSOM есть и то, и другое, пора начинать строить дерево рендеринга.

Вообще говоря, дерево рендеринга соответствует дереву DOM, но оно не строго взаимно однозначно, потому что есть некоторые невидимые элементы DOM, которые не будут вставлены в дерево рендеринга, такие как невидимые теги, такие как head или display: нет и т.д.

4. Дерево рендеринга макета (Layout/Reflow), отвечающее за расчет размера и положения каждого элемента

Макет: Рассчитайте положение и размер каждого объекта рендеринга с помощью информации об объектах рендеринга в дереве рендеринга.

5. Нарисуйте дерево визуализации (Paint) и нарисуйте информацию о пикселях страницы.

На этапе рисования система просматривает дерево рендеринга и вызывает метод «paint» модуля рендеринга для отображения содержимого модуля рендеринга на экране.

这张图片中重要的四个步骤
1. 计算CSS样式

2. 构建渲染树

3. 布局，主要定位坐标和大小，是否换行，各种position overflow z-index属性

4. 绘制，将图像绘制出来
  • Макет, также известный как Reflow, представляет собой перекомпоновку. Обычно означает, что содержимое, структура, положение или размер элемента изменились, что требует пересчета стилей и деревьев рендеринга.
  • Перекрашивать, то есть перекрашивать. Это означает, что изменение элемента влияет только на внешний вид элемента (например, цвет фона, цвет границы, цвет текста и т. д.), в настоящее время вам нужно только применить новый стиль для рисования элемента.

7. Отключить

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

  • Инициатор отправляет пассивной стороне пакеты Fin, Ack и Seq, указывающие на отсутствие передачи данных. и войдите в состояние FIN_WAIT_1.(第一次挥手：由浏览器发起的，发送给服务器，我请求报文发送完了，你准备关闭吧)
  • Пассивная сторона отправляет сообщение Ack, Seq, указывающее, что она согласна с запросом на завершение работы. В этот момент инициатор хоста переходит в состояние FIN_WAIT_2.(第二次挥手：由服务器发起的，告诉浏览器，我请求报文接受完了，我准备关闭了，你也准备吧)
  • Пассивное направление отправляет инициатору сегменты сообщений Fin, Ack, Seq с просьбой закрыть соединение. и войдите в состояние LAST_ACK.(第三次挥手：由服务器发起，告诉浏览器，我响应报文发送完了，你准备关闭吧)
  • Инициатор отправляет пассивной стороне сегменты Ack и Seq. Затем войдите в состояние ожидания TIME_WAIT. Пассивная сторона закрывает соединение после получения сегмента сообщения от инициатора. Если инициатор ждет в течение определенного периода времени и не получает ответа, он нормально завершает работу.(第四次挥手：由浏览器发起，告诉服务器，我响应报文接受完了，我准备关闭了，你也准备吧)

Справочная статья:

Категории