【网络面试篇】从输⼊ URL 到⻚⾯展示到底发⽣了什么？

一、大致流程

[1. 流程概述](#1. 流程概述)

[2. 全流程描述](#2. 全流程描述)

二、流程解析

[1. URL 解析](#1. URL 解析)

[2. DNS 查询](#2. DNS 查询)

[3. TCP 连接](#3. TCP 连接)

[4. 渲染页面](#4. 渲染页面)

一、大致流程

1. 流程概述

（1）URL 解析

（2）DNS 查询

（3）TCP 连接

（4）处理请求

（5）接受响应

（6）渲染页面

2. 全流程描述

1. 浏览器接收到用户请求，先检查浏览器缓存里是否有缓存该资源，如果有直接返回；如果没有进入下一步网络请求。

2. 网络请求前，进行 DNS 解析，以获取请求域名的 IP 地址。如果请求协议是 HTTPS，那么还需要建立 TLS 连接。DNS 解析时会按本地浏览器缓存 -> 本地 Host 文件-> 路由器缓存 -> DNS 服务器 -> 根 DNS 服务器的顺序查询域名对应 IP，直到找到为止。

3. 浏览器与服务器 IP 建立 TCP 连接。连接建立后，浏览器端会构建请求行、请求头等信息，并把和该域名相关的 Cookie 等数据附加到请求头中，向服务器构建请求信息。

4. 服务器接收到请求信息，根据请求生成响应数据。

5. 浏览器解析响应头。若响应头状态码为 301、302，会重定向到新地址；若响应数据类型是字节流类型，一般会将请求提交给下载管理器；若是 HTML 类型，会进入下一部渲染流程。

6. 浏览器解析 HTML 文件，创建 DOM 树，解析 CSS 进行样式计算，然后将 CSS 和 DOM 合并，构建渲染树；最后布局和绘制渲染树，完成页面展示。

二、流程解析

1. URL 解析

URI 格式由 URI 协议名（例如 http、ftp、maito、file），一个冒号，和协议对应的内容所构成。特定的协议定义了协议内容的语法和语义。

URL 的格式由下列三部分组成：

第一部分是协议（或称为服务方式）。

第二部分是存有该资源的主机 IP 地址（有时也包括端口号）。

第三部分是主机资源的具体地址。

具体 URI 的格式如下：

[协议名]://[用户名]:[密码]@[服务器地址]:[服务器端口号]/[路径]?[查询字符串]#[片段ID]

例如：scheme://host.domain:port/path/filename
① scheme - 定义因特网服务的类型。常见的协议有 http、https、ftp、file。
② host - 定义域主机（http 的默认主机是 www）
③ domain - 定义因特网域名，比如 http://baidu.com
④ port - 定义主机上的端口号（http 的默认端口号是 80）
⑤ path - 定义服务器上的路径（如果省略，则文档必须位于网站的根目录中）。
⑥ filename - 定义文档/资源的名称

2. DNS 查询

ISP DNS 就是在客户端电脑上设置的首选 DNS 服务器，它们在大多数情况下都会有缓存。