浏览器地址栏输入 URL 到显示网页,这个过程到底发生了什么?

作者: tww844475003 分类: 前端开发 发布时间: 2021-07-05 20:14
  • 域名解析
  • TCP连接
  • 发送 HTTP 请求
  • 服务器处理请求并返回HTTP报文
  • 渲染页面
  • 断开TCP连接

域名解析

网址到ip地址的转换过程就是DNS解析。然后建立 TCP 连接

TCP连接

HTTP协议是使用TCP协议作为其传输层协议的,在拿到服务器的IP地址后,浏览器客户端会与服务器建立TCP连接。该过程包括三次握手:

第一次握手:建立连接时,客户端向服务端发送请求报文
第二次握手:服务器收到请求报文后,如同意连接,则向客户端发送确认报文
第三次握手,客户端收到服务器的确认后,再次向服务器给出确认报文,完成连接。
三次握手主要是为了防止已经失效的请求报文字段发送给服务器,浪费资源。

发送 HTTP 请求

浏览器构建http请求报文,并通过TCP协议传送到服务器的指定端口。http请求报文一共包括三个部分:

请求行:指定http请求的方法、url、http协议版本等
请求头:描述浏览器的相关信息,语言、编码等。

请求正文:当发送POST, PUT等请求时,通常需要向服务器传递数据。这些数据就储存在请求正文中。

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

服务器处理http请求,并返回响应报文。响应报文包括三个部分:

 状态码:略
 响应头:包含了响应的相关信息,如日期等 
 响应正文:服务器返回给浏览器的文本信息,通常的html、js、css、图片等就包含在这一部分里面。

渲染页面

浏览器接受到http服务器发送过来的响应报文,并开始解析html文档,渲染页面。具体的渲染过程包括:构建DOM树、构建渲染树、定位页面元素、绘制页面元素等。

  • 遇见HTML标记,浏览器调用HTML解析器解析成Token,并构建成dom树
  • 遇见style/link标记,浏览器调用css解析器
  • 遇见script标记,调用javascript解析器,处理script代码(绑定时间,修改dom树/css dom树)
  • 根据渲染树计算布局,计算每个节点的几何信息(布局)
  • 将各个节点颜色绘制到屏幕上(渲染)

断开TCP连接

客户端与服务器四次挥手,断开tcp连接。

第一次挥手:客户端想分手,发送消息给服务器
第二次挥手:服务器通知客户端已经接受到分手请求,但还没做好分手准备
第三次回收:服务器已经做好分手准备,通知客户端
第四次挥手:客户端发送消息给服务器,确定分手,服务器关闭连接

前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注