一个页面从输入URL到展示页面的过程

一个页面从输入URL到展示页面的过程

1.用户在浏览器中输入URL地址

2.浏览器先从缓存中找是否存在域名，如果存在就直接取出对应的ip地址

• 缓存资源寻找路线：浏览器缓存（离线缓存、内存缓存、硬盘缓存）-> 各种中间代理服务器的缓存（如：CDN缓存）

3.浏览器通过DNS域名解析协议寻找服务器ip地址

• 开启一个DNS域名解析器
• 首先访问顶级域名服务器,将ip地址发给客户端
• 再访问根域名服务器,将ip地址发给客户端
• 最后访问本地域名服务器,将ip地址发给客户端

4.通过TCP三次握手建立起客户端和服务端的连接

• 第一次握手
  1. 操作:客户端请求建立连接,向服务器发送一个同步包(SYN=1), 同时选择一个随机数(seq=x)作为初始序列号
  2. 状态:客户端发送请求之前处于closed关闭状态,服务器处于listen监听状态,表示监听来自远程应用的TCP连接请求。握手之后，客户端处于SYN_SENT（同步已发送）状态，表示等待远端的确认
• 第二次握手
  1. 操作:服务器收到连接请求之后,如果同意连接,则向客户端发送同步确认包(SYN=1,ACK=1),确认号为ack=x+1,同时选择一个随机数seq=y作为初始序列号。
  2. 状态:握手之后,服务器处于SYN_RECV(同步已收到)状态,表面收到了连接请求并发送了确认报文,等待最终的确认
• 第三次握手
  1. 操作:客户端收到服务器的确认后,向服务器发送一个确认包(ACK=1),确认号为ack=y+1,序列号为seq=x+1;
  2. 状态:握手之后，服务端和客户端都处于ESTABLISHED（建立连接）状态，表明连接建立成功。

5.浏览器发送HTTP请求,获取页面的静态资源

• 浏览器和服务器之间进行数据传输，每次数据传输都是通过数据包（请求包+响应包）的形式来传输的，其中浏览器发送HTTP请求是请求包，服务器回应是数据包称为响应包

• TCP连接建立完毕，浏览器可以和服务器开始通信，即浏览器开始发送 HTTP 请求，其中请求中要携带三样东西:请求行Line(请求方法method + HTTP协议版本),请求头Header和请求体Body

6.服务器发送HTTP响应报文给客户端，客户端获取到页面静态资源

• HTTP 请求到达服务器，服务器进行对应的处理。最后要把数据传给浏览器，也就是返回网络响应，跟请求部分类似,网络响应具有三个部分:响应行 Line(HTTP协议版本 + 状态码 + 状态描述),响应头 Header和响应体(判断Connection字段, 如果请求头或响应头中包含Connection: Keep-Alive，表示建立了持久连接，这样TCP连接会一直保持，之后请求统一站点的资源会复用这个连接，否则断开TCP连接，请求-响应流程结束)

7.浏览器解析静态资源并渲染页面

• 浏览器解析文档资源并渲染页面流程：

  1. 解析html资源，构建DOM Tree
  2. 解析css资源，构建CSS Rule Tree
  3. JS通过DOM API和CSS OM API来操作DOM Tree和CSS Tree
  4. 解析完成后综合DOM Tree和CSS Tree会生成Render Tree，计算每个元素的位置，这个过程就是回流
  5. 调用操作系统Native GUI的绘制
  6. 页面绘制完成

8.浏览器通过四次挥手断开与服务器的连接

• 第一次挥手

  1.操作:浏览器向服务器发送连接释放包(FIN=1),主动关闭连接,同时等待服务器的确认,发送序号为seq=m,这个序列号是浏览器上次发送报文的最后一个字节的序号加1。发送确认号ack = n，表明对上次请求的回应。

  2.状态: 挥手前,服务器和浏览器都处于ESTABLISTHED(建立连接)状态；挥手后,服务器处于FIN_WAIT_1(终止等待1)状态，表示发送了连接终止请求等待确认。

• 第二次挥手

  1. 操作:服务器收到了连接释放报文后,立即发出确认包(ACK=1),序列号为(seq=n),确认号为ack=m+1
  2. 状态:挥手后,服务器处于CLOSE_WAIT(关闭等待)状态,当服务器收到确认消息后,处于FIN_WAI_2(等待状态2),表示已经收到了服务器的远程确认,等待服务器发送终止请求

• 第三次挥手

  1. 操作:服务器向浏览器发送连接释放包(FIN=1,ACK=1),主动关闭连接,同时等待A的确认,序列号为seq=p,并再次发送确认号(ack=m+1)
  2. 状态:挥手后,服务器处于LAST_ACK最后确认状态,表明等待发送的终止请求的确认

• 第四次挥手

  1. 操作:浏览器收到服务器的连接释放请求报文后,立即发出确认包(ACK=1),序列号seq = m+1,确认号为ack=p+1
  2. 状态:挥手后,浏览器处于TIME_WAIT(时间等待)状态,表明等待足够的时间,以确保远程TCP收到其连接终止请求的确认；当服务端收到确认信息后,处于CLOSED(连接断开状态)；经过2MSL后,客户端也处于CLOSED（连接断开状态）。