【面试官】从输入URL到展示出页面这个过程发生了什么

从输入URL到展示出页面这个过程发生了什么

1,通过域名解析查找到对应的IP地址

域名解析的过程,可以简单的理解为:发送端主机作为域名系统树形结构的一个子节点,通过域名信息,从下到上查找对应IP地址的过程。如果到根节点(根域名服务器)还找不到,即找不到该主机。
域名解析使用DNS协议来传输数据。DNS协议是应用层协议,基于传输层UDP或TCP协议来实现

2,封装TCP和Http包

应用层数据通过协议栈发到网络上时,每层协议都要加上一个数据首部(header),称为封装
首部信息中包含了一些类似于首部有多长,载荷(payload)有多长,上层协议是什么等信息。
数据封装成帧后发到传输介质上,到达目的主机后每层协议再剥掉相应的首部,根据首部中的 “上层协议字段” 将数据交给对应的上层协议处理

3,建立TCP连接(三次挥手)

拿到域名对应的IP地址之后,浏览器会以一个随机端口(1024<端口<65535)向服务器的WEB程序(常用的有nginx等)80端口发起TCP的连接请求

第一次握手: 客户端A将标志位SYN置为1,随机产生一个值为seq=J(J的取值范围为=1234567)的数据包到服务器,客户端A进入SYN_SENT状态,等待服务端B确认;

第二次握手:服务端B收到数据包后由标志位SYN=1知道客户端A请求建立连接,服务端B将标志位SYN和ACK都置为1,ack=J+1,随机产生一个值seq=K,并将该数据包发送给客户端A以确认连接请求,服务端B进入SYN_RCVD状态。

第三次握手:客户端A收到确认后,检查ack是否为J+1,ACK是否为1,如果正确则将标志位ACK置为1,ack=K+1,并将该数据包发送给服务端B,服务端B检查ack是否为K+1,ACK是否为1,如果正确则连接建立成功,客户端A和服务端B进入ESTABLISHED状态,完成三次握手,随后客户端A与服务端B之间可以开始传输数据了

4,客户端发送Http请求

建立了TCP连接之后,发起一个http请求。一个典型的 http request header 一般需要包括请求的方法,例如 GET 或者 POST 等,不常用的还有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法,一般的浏览器只能发起 GET 或者 POST 请求。
客户端向服务器发起http请求的时候,会有一些请求信息,请求信息包含三个部分:

GET /books/?sex=man&name=Professional HTTP/1.1
Host: www.wrox.com
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7.6)
Gecko/20050225 Firefox/1.0.1
Connection: Keep-Alive

  • 首行:方法+url+版本,用来说明请求类型,要访问的资源以及所使用的HTTP版本,其中请求类型为GET 方法,/books/?sex=man&name=Professional为请求资源,使用HTTP1.1版本
  • 请求头部:从第二行开始,HOST将指出请求的目的地,User-Agent,服务器端和客户端脚本都能访问它,它是浏览器类型检测逻辑的重要基础,该信息由你的浏览器来定义,并且在每个请求中自动发送等等
  • 空行:请求头部后面的空行是必须的,请求正文是空也有空行
  • 请求正文:空行后面的内容都是Body. Body允许为空字符串. 如果Body存在, 则在Header中会有⼀个Content-Length属性来标识Body的长度

5,服务器处理请求并响应

后端从在固定的端口接收到TCP报文开始,它会对TCP连接进行处理,对HTTP协议进行解析,并按照报文格式进一步封装成HTTP Request对象,供上层使用。
一些大一点的网站会将你的请求到反向代理服务器中,因为当网站访问量非常大,网站越来越慢,一台服务器已经不够用了。于是将同一个应用部署在多台服务器上,将大量用户的请求分配给多台机器处理。

HTTP/1.1 200 OK
Date: Fri, 22 May 2009 06:07:21 GMT
Content-Type: text/html; charset=UTF-8

<html>
      <head></head>
      <body>
            <!--body goes here-->
      </body>
</html>

  • 首行:版本号+状态码+状态码解释,HTTP/1.1表明HTTP版本为1.1版本,状态码为200,状态消息为ok
  • 请求头部:请求的属性,消息报头,用来说明客户端要使用的一些附加信息
  • 空行:请求头部后面的空行是必须的,请求正文是空也有空行
  • 响应正文:服务器返回给客户端的文本信息,空行后面的html部分为响应正文

6,断开TCP连接(四次挥手)

  • 第一次:客户端(主动断开连接)发送数据包给服务器,其中标志位FIN=1,序号位seq=u,并停止发送数据;
  • 第二次:服务器收到数据包后,由于还需传输数据,无法立即关闭连接,先返回一个标志位ACK=1,序号seq=v,确认号ack=u+1的数据包;
  • 第三次: 服务器准备好断开连接后,返回一个数据包,其中标志位FIN=1,标志位ACK=1,序号seq=w,确认号ack=u+1;
  • 第四次:客户端收到数据包后,返回一个标志位ACK=1,序号seq=u+1,确认号ack=w+1的数据包。

7,浏览器展示HTML

在浏览器还没有完全接收 HTML 文件时便开始渲染、显示网页;
执行 HTML 中代码时,根据需要,浏览器会继续请求图片、CSS、JavsScript等文件,过程同请求 HTML ;
浏览器是一个边解析边渲染的过程。首先浏览器解析HTML文件构建DOM树,然后解析CSS文件构建渲染树,等到渲染树构建完成后,浏览器开始布局渲染树并将其绘制到屏幕上。这个过程比较复杂,涉及到两个概念: reflow(回流)和repain(重绘)。

猜你喜欢

转载自blog.csdn.net/qq_55660421/article/details/125122664