从输入URL到浏览器显示

865 阅读2分钟

浏览器拿到url,对url进行解析

protocol: 协议头,譬如有http,ftp等。
host: 主机域名或IP地址。
port: 端口号。
path: 目录路径。
query: 即查询参数。
fragment: 即 # 后的 hash 值,一般用来定位到某个位置。

DNS查询得到IP地址

  1. 浏览器有缓存
  2. 电脑本地缓存
  3. host文件
  4. 向DNS服务器查询
    • 中间可能会经过路由,路由中可能会存在缓存,或者路由中就有自定义的DNS解析

image.png

建立TCP/IP通信

  互联网进行通信时,需要相应的网络协议,TCP/IP是为使用互联网而开发定制的协议族。因此,互联网的协议就是TCP/IP。
注意:TCP/IP不是一个协议,而是一个协议族的统称。里面包括IP协议、IMCP协议、TCP协议等等等。而浏览器发出的http请求的本质上就是tcp/ip请求。TCP将http长报文划分为短报文,通过三次握手与服务端建立连接,进行可靠传输。建立连接成功后,接下来就正式传输数据。

image.png

发起http请求

  1. 客户端和服务器建立通讯后,由客户端发起http请求
  2. 服务器接收到http请求后,会对http请求进行处理,并返回客户端处理结果
  3. 客户端接收服务器返回的数据

image.png

关闭TCP/IP链接

在到断开连接时,需要进行四次挥手(因为是全双工的,所以需要四次挥手)。

image.png

浏览器处理返回结果

  1. 浏览器解析HTML,生成DOM树 image.png
  2. 浏览器解析CSS规则,生成CSS规则树 image.png
  3. 浏览器通过DOM树和CSS规则树构,生成Render渲染树 image.png
  4. 显示页面 image.png

完整流程

image.png