浏览器从输入 Url 到展示出页面都经历了哪些过程

文章写于 2017 年，首发于微信公众号：字节流动

输入域名

在浏览器输入网址时，浏览器会根据历史记录、书签智能匹配补全域名或者 url 。
例如 chrome 浏览器，甚至会根据匹配结果直接把网页加载出来。

解析域名

请求发起时，浏览器首先解析域名，一般会首先查看本地的 hosts 文件，查找相关域名与 ip 地址的对应规则，若查找到的话，就直接使用 hosts 文件里面的 ip 地址。

若在本地 hosts 文件中，未找到目标域名与 ip 地址的对应关系，浏览器便会向本地 DNS 服务器发起一个 DNS 请求，本地 DNS 服务器收到请求之后，便会查询其缓存记录，若查询到此记录便直接返回结果。

若本地 DNS 服务器缓存中未查询到相关记录，便向 DNS 根服务器进行查询，根 DNS 服务器没有记录具体的域名与 ip 地址的映射关系，而是返回域服务器的地址。

本地 DNS 继续向域服务器发起请求，域服务器收到请求之后，返回域名解析服务器的地址。最后本地 DNS 服务器向域名解析服务器发送请求，域名解析服务器收到请求之后，返回域名与 ip 映射关系信息，然后本地 DNS 服务器将映射信息保存到其缓存中，同时也将 ip 地址返回给用户电脑。

浏览器发起 http 请求

浏览器获取到域名对应的 ip 地址之后，便会以一个随机端口（1024< port < 65535）向服务端 web 程序 80 端口发起 TCP 连接请求。

浏览器与服务端经过 3 次 TCP 握手之后，建立 TCP 连接，然后浏览器发起一个 http 请求。一般的浏览器只能发起 GET 或者 POST 请求。

请求信格式包含四个部分：

1. 请求行（请求方法 URI 协议/版本）
2. 请求头(缓存、客户端身份信息等)
3. 空行
4. 消息体

http 请求格式示例：

GET /index.html HTTP/1.1
Cache-Control:max-age=0
Cookie:gsScrollPos=; _ga=GA1.2.329038035.1465891024; _gat=1
If-Modified-Since:Sun, 01 May 2016 23:59:59 GMT
User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.84 Safari/537.36

//消息体

PS：
常用的请求方法有 GET/POST/DELETE/PUT/HEAD 。

TCP 三次握手的目的是：为了防止已经失效的连接请求报文发送到服务端，服务端因而产生不必要的响应开销。

在谢希仁著《计算机网络》第四版中讲“三次握手”的目的是“为了防止已失效的连接请求报文段突然又传送到了服务端，因而产生错误”。在另一部经典的《计算机网络》一书中讲“三次握手”的目的是为了解决“网络中存在延迟的重复分组”的问题。

TCP 四次挥手的目的是：为确保收发双方数据传输的完整性。

那四次分手又是为何呢？TCP协议是一种面向连接的、可靠的、基于字节流的运输层通信协议。TCP是全双工模式，这就意味着，当主机1发出FIN报文段时，只是表示主机1已经没有数据要发送了，主机1告诉主机2，它的数据已经全部发送完毕了；但是，这个时候主机1还是可以接受来自主机2的数据；当主机2返回ACK报文段时，表示它已经知道主机1没有数据发送了，但是主机2还是可以发送数据到主机1的；当主机2也发送了FIN报文段时，这个时候就表示主机2也没有数据要发送了，就会告诉主机1，我也没有数据要发送了，之后彼此就会愉快的中断这次TCP连接。如果要正确的理解四次分手的原理，就需要了解四次分手过程中的状态变化。

服务器返回 http 响应

服务端返回 http 响应的格式包含四个部分:

1. 响应行（状态行）（协议/版本号 状态码 状态说明）
2. 响应头（响应头是服务器传递给客户端用于说明服务器的一些信息，以及将来继续访问该资源时的策略。）
3. 空行
4. 消息体（响应体是服务端返回给客户端的 HTML 文本内容，或者其他格式的数据，比如：视频流、图片或者音频数据。）

http 响应格式示例：

HTTP/1.1 200 OK
Date: Sat, 31 Dec 2016 23:59:59 GMT
Content-Type: text/html;charset=ISO-8859-1
Content-Length: 113

＜html＞
＜head＞
＜title＞Haohao＜/title＞
＜/head＞
＜body＞
Hello World！
＜/body＞
＜/html＞

PS：
服务器在返回响应之前可能会经过重定向、反向代理服务器请求等过程。

浏览器处理响应

以服务端响应消息体为 HTML 文本为例，浏览器解析 HTML 文本时，会”自上而下“加载，并在加载过程中进行解析渲染展现给用户。在解析过程中，如果遇到请求外部资源时，如图片、外链的 CSS 、 js 等，请求过程是异步的，并不会影响整个 HTML 文档的加载。

联系与交流