Процесс от ввода доменного имени до финальной презентации

внешний интерфейс сервер браузер CSS

Конкретные шаги

1. Введите URL-адрес в адресную строку браузера и нажмите Enter.
2. Браузер проверяет, существует ли текущий URL-адрес в кеше, и сравнивает, истек ли срок действия кеша.
3. DNS разрешает IP-адрес, соответствующий URL-адресу.
4. Установите TCP-соединение в соответствии с IP (трехстороннее рукопожатие).
5. HTTP инициирует запрос.
6. Сервер обрабатывает запрос, и браузер получает HTTP-ответ.
7. Визуализируйте страницу и постройте DOM-дерево.
8. Закройте соединение TCP (четыре волны).

Подробное описание

1. Существуют различные правила кэширования HTTP, которые делятся на два типа в зависимости от необходимости повторной инициации запроса к серверу: принудительное кэширование и кэширование сравнения.

强制缓存：
    cache-control：中的max-age保存一个相对时间。表示浏览器接收到文件之后，缓存在相对应的时间内均有效。如果同时存在cache-control和Expires,浏览器优先使用cache-control
    Expires：是一个绝对时间，即服务器时间。浏览器检查当前时间，如果还没有失效就直接用缓存文件。该方法有一个问题，服务器可能和客户端时间不一致，因此该字段很少使用。 
对比缓存：
    last-modified是第一次请求资源时，服务器返回的字段，表示最后一次更新时间。下次浏览器请求资源时就发送if-modified-since字段。服务器用本地last-modified时间与if-modified-since时间比较，如果不一致则认为缓存已过期并返回新的资源给浏览器，如果时间一致则返回304状态码，让浏览器继续使用缓存。
    Etag：资源的实体标识（哈希字符串），当资源内容更新时，Etag会改变。服务器会判断Etag是否变化，如果变化返回新资源，否则返回304。

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

Ввод доменного имени в адресную строку не является фактическим местоположением последнего ресурса, доменное имя — это просто сопоставление IP-адреса.

1.首先浏览器会先查找本地hosts文件是否有这个网址映射关系，如果有就调用这个IP地址映射，完成域名解析。
2.如果没有找到则会查找本地的DNS解析器缓存，如果找到则返回。
3.如果还是没有找到则会查找本地DNS服务器，如果找到则返回。
4.最后迭代查询，按根域服务器->顶级域名.cn->第二层域名->子域名的顺序找到IP地址

3. Инициировать трехстороннее рукопожатие TCP

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

第一次握手：建立连接时，客户端发送syn包(syn=j)到服务器，并进入SYN_SENT状态，等待服务器确认；
第二层握手：服务器接收到syn包，必须确认客户端的SYN(ack=j+1)，同时自己也发送一个SYN包(syn=k)，即SYN+ACK包，此时服务器进入SYN_RECV状态；
第三次握手：客户端收到服务器的SYN_ACK包，向服务器发送确认包ACK(ack=k+1)，此包发送完毕，客户端和服务器进入ESTABLISHED(TCP连接成功)状态，完成三次握手。

4. После установления TCP-соединения инициируйте http-запрос.

完整的HTTP请求包含请求行，请求头部，请求主体三个部分。(具体就不一一讲述了)

5. Сервер отвечает на http-запрос, и браузер получает ответ

服务器在收到浏览器发送的HTTP请求之后，会收到HTTP报文封装成HTTP的Request对象，并通过不同的web服务器进行处理，处理完的结果以HTTP的Response对象返回，主要包括状态码，响应头，响应报文三个部分。
状态码主要包括以下部分：
    1xx：指示信息-表示请求已接收，继续处理
    2xx：成功-表示请求已被成功接收，理解，接收
    3xx：重定向-要完成请求必须进行更进一步的操作
    4xx：客户端错误-请求语法错误或请求无法实现
    5xx：服务器端错误：服务器未能合法实现请求
响应头主要由：cache-control、connection、date、pragma等组成。

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

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

    reflow：也称作layout，中文叫回流，一般意味着元素的内容、结构、位置或尺寸发生了变化，需要重新计算样式和渲染树，这个过程称为reflow。
    repaint：中文重绘，意味着元素发生的改变只是影响了元素的一些外观之类的时候(例如：背景色，边框颜色，文字颜色等)，此时只需要应用新样式绘制这个元素就可以了。

7. После четырех волн закройте TCP-соединение.

Соединение закрывается четырьмя ручными взмахами (FIN ACK, ACK, FIN ACK, ACK).

    第一次挥手：浏览器发完数据后，发生FIN请求断开连接
    第二次挥手：服务器发送ACK表示同意断开连接
    第三次挥手：服务器发送FIN请求断开连接
    第四次挥手：浏览器需要返回ACK表示同意断开
Категории