从输入 URL 到页面加载完成的过程
Web

从输入 URL 到页面加载完成的过程

Flying
2017-09-06 / 0 评论 / 151 阅读 / 正在检测是否收录...

很久以前理解过一个URL从在浏览器地址栏输入,到呈现页面都发生了什么。前两天碰到一个nginx反向代理的问题,又回想起这个流程,我想是对这个流程理解的还不够透彻,所以特意抽出时间来总结一下。

  1. DNS解析域名,查找网页对应的IP地址
  2. 客户端和服务器通过三次握手建立TCP连接
  3. 发出HTTP请求
  4. 服务器处理请求并返回HTTP响应报文
  5. 浏览器解析渲染界面
  6. 四次挥手释放TCP连接

flow.jpg

DNS解析

DNS解析就是使用你输入的域名:www.kaola.com 去定位真正的ip地址

DNS解析是一个递归查询的过程,具体步骤如下图:

dns.jpg

  1. 本地域名服务器查找有没有www.kaola.com所对应的ip
  2. 本地服务器未查找到,则去根域名服务器查找
  3. 根域名服务器未找到相应ip,会返回一级域名服务器地址
  4. 查找一级域名服务器
  5. 一级域名服务器未找到相应ip,返回二级域名服务器地址
  6. 查找二级域名服务器
  7. 二级域名服务器查看本地name.conf,是否有www主机的记录
  8. 查到www主机的记录,返回www主机的ip到二级域名服务器
  9. 返回ip到本地域名服务器
  10. 返回ip到浏览器
**第9步,本地域名服务器拿到ip以后,会存入本地DNS缓存

DNS优化

  • DNS缓存: 浏览器缓存,系统缓存,路由器缓存,IPS服务器缓存,根域名服务器缓存,顶级域名服务器缓存,主域名服务器缓存。通过缓存直接读取域名相对应的ip,减去了繁琐的查找ip的步骤,大大加快访问速度。
  • DNS负载均衡:使用CDN进行负载均衡,利用DNS的重定向技术,同步服务器运行情况,然后根据该情况及时适当调整调度策略,从而使得负载均衡能力大大提高。

TCP三次握手

在客户端发送数据之前会发起tcp三次握手用以同步客户端和服务端的序列号和确认号,并交换TCP窗口大小信息。tcp三次握手的过程如下:

  1. 第一次握手:客户端向服务端发送连接请求报文段,SYN和Seq,等待服务端确认(你在吗?)
  2. 第二次握手:服务端收到报文段确认后,向客户端发送报文段。SYN、ACK和Seq(我在的!)
  3. 第三次握手:客户端收到服务器的报文段,向服务器发送ACK和Seq。(好的,我知道你在了。)

开始发送HTTP请求报文

TCP三次握手结束后,开始发送HTTP请求报文

http请求报文

HTTP请求报文由请求行(request line)、请求头部(header)、请求主体三个部分组成。如下图所示:

request.jpg

请求行包含:请求方法、URL、协议版本

  • 请求方法包含8种:GET、POST、PUT、DELETE、PATCH、HEAD、OPTIONS、TRACE。
  • URL即请求地址,由 <协议>://<主机>:<端口>/<路径>?<参数>组成
  • 协议版本即http版本号

请求头部包含请求的附加信息,由 名/值 对组成

请求主体包含回车符、换行符和请求数据,并不是所有请求都具有请求数据

http响应报文

http请求报文发送后,经过nginx服务器转发(图一5)、服务端servlet处理请求(图一6)之后,响应信息会以响应报文的形式返回给客户端。

(图一5步骤后续补充)

HTTP响应报文由响应行(request line)、响应头部(header)、响应主体三个部分组成。如下图所示:

response.jpg

响应行包含:协议版本,状态码,状态码描述

状态码规则如下:

  • 1xx:指示信息--表示请求已接收,继续处理。
  • 2xx:成功--表示请求已被成功接收、理解、接受。
  • 3xx:重定向--要完成请求必须进行更进一步的操作。
  • 4xx:客户端错误--请求有语法错误或请求无法实现。
  • 5xx:服务器端错误--服务器未能实现合法的请求。

响应头部包含响应报文的附加信息,由名/值对组成

响应主体包含回车符、换行符和响应返回数据,并不是所有响应报文都有响应数据

关闭TCP连接,四次挥手

当数据传送完毕,需要断开tcp连接,此时发起tcp四次挥手

  • 发起方向被动方发送报文,Fin、Ack、Seq,表示已经没有数据传输了。并进入FIN_WAIT_1状态。(嗨,我要走了)
  • 被动方发送报文,Ack、Seq,表示同意关闭请求。此时主机发起方进入FIN_WAIT_2状态。(好的,准了)
  • 被动方向发起方发送报文段,Fin、Ack、Seq,请求关闭连接。并进入LAST_ACK状态。(我也要走啦!)
  • 发起方向被动方发送报文段,Ack、Seq。然后进入等待TIME_WAIT状态。被动方收到发起方的报文段以后关闭连接。发起方等待一定时间未收到回复,则正常关闭。(好的,我也批准了……怎么一直没回音?好吧,那我真的走了。)

nginx反向代理

反向代理即指:将来自客户端的请求转发至内部网络中的服务器进行处理。并将服务器的结果返回给客户端。具体实现步骤如下图:

nginx.jpg

  • 保护服务器,外网只能访问到反向代理服务器,对真正提供服务的服务器起到了保护的作用
  • 节约ip资源
  • 负载均衡,减少WEB服务器压力,提高响应速度
  • 解决ajax跨域问题
  • 可对所有请求进行的统一控制;

浏览器解析渲染页面

详见Reflow和Repaint简介

参考链接

从输入页面地址到展示页面信息都发生了些什么?

8

评论 (0)

取消