从URL 输入到页面展示完整过程

URL

URL,统一资源定位符，用于定位互联网上的资源，俗称网址。
scheme://host.domain:port/path/filename?params#fragment

• scheme：协议如http、https、file等
• host：主机域 www
• domain：域名 baidu.com.cn
• port：端口号 http默认为80，https默认为443
• path：服务器上的路径，省略表示根目录
• filename：文档资源的名称
• params：从?开始到#截止的部分为参数部分，多参数用&作为分隔符
• fragment：锚部分或称为片段，HTTP请求不包括锚部分，用于链接到文档中的锚点位置

从URL 输入到页面展示完整过程

一、在浏览器输入网址后，经过域名解析

• 浏览器向DNS服务器发送域名
• DNS服务器查询到和域名相对应的IP地址，返回给浏览器

DNS服务器查询IP地址途径：浏览器缓存》操作系统缓存》路由器缓存》ISP运营商的DNS服务器缓存》根服务器

• 浏览器拿到IP地址向服务器建立TCP连接

二、TCP 三次握手，建立连接

同步客户端和服务端的序列号和确认号，并交换TCP窗口大小信息
位码即TCP 标志位，有6种标示：SYN 建立联机、ACK 确认、PSH 传送、FIN 结束、RST 重置、URG 紧急、Sequence number 顺序号码、Acknowledge number 确认号码

1. 客户端发送一个带SYN=1，SEQ=X 的数据包给服务端（第一次握手，由浏览器发起，告诉服务器我要发送请求了）客户端状态为SYN_SEND；
2. 服务器返回一个带SYN=1，ACK=X+1，SEQ=Y 的响应包给客户端以示传达确认信息（第二次握手，由服务端发起，告诉客户端我准备好了）服务端状态为SYN_RECV；
3. 客户端再回传一个带ACK=Y+1，SEQ=Z 的数据包，代表握手结束（第三次握手，由客户端发起，告诉服务器，我马上就发了，准备接收吧）客户端和服务端均为ESTABLISHED状态，连接建立，可以开始数据传输了。

为什么是三次握手：为了防止已经失效的连接请求报文段突然又传送到了服务端，而产生错误

三、发送HTTP 请求

• 请求行
• 请求头
• 请求体

四、服务器处理请求并返回HTTP 报文

• 响应行
• 响应头
• 响应体

五、浏览器解析渲染页面

浏览器拿到响应文本HTML 后，进行渲染

• 根据HTML 解析出DOM 树
• 根据CSS 解析出CSS 规则树
• 结合DOM树和CSS规则树，生成渲染树
• 根据渲染树计算每个节点的信息
• 根据计算好的信息绘制页面

六、断开TCP 连接

1. 客户端向服务端发送报文，FIN、ACK、SEQ，表示已经没有数据传输了（客户端》服务端，我的请求报文发送完了，你准备关闭吧）进入FIN_WAIT_1 状态；
2. 服务端发送报文，ACK、SEQ，表示同意关闭请求。（服务端》客户端，你的请求报文接收完了，我准备关闭了，你也准备吧）进入FIN_WAIT_2 状态；
3. 服务端发送报文，FIN、ACK、SEQ，请求关闭连接。（服务端》客户端，我的响应报文发送完了，你可以准备关闭了）进入LAST_ACK 状态；
4. 客户端发送报文，ACK、SEQ。（客户端》服务端，你的响应报文接收完了，我准备关闭了）进入TIME_WAIT 状态。等待一定时间未收到回复，则正常关闭。

掘金
CSDN