一个页面从输入 URL 到页面加载显示完成,这个过程中都发生了什么

这个是在2017年7月百度一面的时候面试官给我出的题,当然当时我没有答出来。最近又涉及到了这个问题,说一些自己的理解,看了些博客、回答,决定翻译一篇国外朋友的文章。

一、个人理解

1) DNS解析

根据浏览器缓存->操作系统缓存(host)->路由器缓存->DNS服务器…..->全世界的顶级DNS上,逐级递归向上找,找到该域名对应的IP地址。

2) TCP连接

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

3) 发送HTTP请求

TCP连接完成后,根据解析的IP发起请求,通常请求格式为:
> 请求方式 路径 协议/版本
> Key1: value1
> Key2: value2
> Key3: value3
> Content-Type: application/x-www-form-urlencoded
> Host: www.xxx.com
> User-Agent: curl/7.54.0
>
> 要上传的数据

4) 服务器处理请求并返回HTTP报文

服务器接收到请求 -> 服务器处理请求 -> 服务器发起响应并发送HTTP报文,通常响应数据的格式为:
所有的响应格式为:
> 协议/版本 状态码 状态解释
> Key1: value1
> Key2: value2
> Key3: value3
> Content-Length: 17931
> Content-Length: text/html
>
> 要下载的内容

5) 浏览器解析渲染页面

浏览器边解析边渲染:解析HTML文件并构建DOM树 -> 解析css文件并渲染 -> 解析JS并进行Ajax请求

6) 连接结束

二、