从计算机网络原理剖析浏览器加载页面的全过程

18 阅读4分钟
  1. 用户在浏览器地址栏输入一个地址,例如example.com。

  2. 应用层(Application Layer):

    • 浏览器将该地址转化为HTTP请求,并封装在应用层的HTTP报文中。
  3. DNS解析:

    • 浏览器首先检查本地DNS缓存,如果有对应的IP地址,就直接使用。
    • 如果本地缓存中没有对应的IP地址,浏览器会向本地DNS服务器发起请求,获取域名对应的IP地址。
    • 如果本地DNS服务器没有缓存该域名的IP地址,它会向根DNS服务器发起请求,逐级向上查找,直到找到对应的IP地址。
    • DNS解析完成后,浏览器将得到目标服务器的IP地址。
  4. 缓存检查:

    • 浏览器检查自己的浏览器缓存,看是否有该页面的缓存副本。
  5. 缓存命中:

    • 如果浏览器缓存中存在该页面的缓存副本,并且缓存副本仍然有效(未过期),浏览器会直接从缓存中获取页面内容,并跳至第11步进行页面展示。
  6. 缓存未命中:

    • 如果浏览器缓存中不存在该页面的缓存副本,或者缓存副本已过期,浏览器需要向服务器发送HTTP请求获取最新的页面内容。
  7. 传输层(Transport Layer):

    • 浏览器使用传输控制协议(TCP)来将HTTP请求分割成数据包(或称为报文段)。
    • TCP在传输层负责可靠地将数据包从源主机传输到目标主机。
    • TCP使用源端口和目标端口来标识应用程序之间的通信。
  8. 网络层(Network Layer):

    • 数据包通过网络层的Internet协议(IP)进行路由选择。
    • IP负责将数据包从源主机传递到目标主机,通过互联网中的路由器进行中转。
    • IP使用源IP地址和目标IP地址来标识主机之间的通信。
  9. 数据链路层(Data Link Layer):

    • 数据包在数据链路层被封装成帧(Frame)。
    • 帧包括了源和目标的物理地址(如MAC地址)。
    • 数据链路层负责将帧从一个节点传输到相邻节点。
  10. 物理层(Physical Layer):

    • 物理层将帧转换为电信号,并通过物理介质进行传输,如光纤、电缆或无线信号等。
    • 传输的电信号在目标主机处被还原为帧。
  11. 目标主机接收到数据后,上述过程的逆向过程会发生:

    • 物理层将帧转换为电信号,传输到数据链路层。
    • 数据链路层解析帧,提取数据包,并将其传递到网络层。
    • 网络层根据目标IP地址进行路由选择,将数据包传递到传输层。
    • 传输层根据目标端口将数据包传递给相应的应用程序。
  12. 应用层(Application Layer):

    • 目标主机的Web服务器接收到HTTP请求后,根据请求的资源路径进行处理。
    • 强缓存机制:服务器检查HTTP请求中的缓存相关头部(如Expires和Cache-Control),如果资源在客户端的缓存中仍然有效(未过期),服务器会返回一个HTTP 304 Not Modified响应,告诉浏览器可以使用缓存的版本。
    • 如果资源在客户端的缓存中已过期或没有缓存,服务器会返回一个HTTP 200 OK响应,并包含资源的内容和相关的缓存头部。
  13. 浏览器缓存:

    • 浏览器接收到服务器返回的HTTP响应后,根据响应中的缓存头部信息(如Cache-Control、ETag和Last-Modified)判断是否可以使用缓存版本。
    • 如果资源可以使用缓存版本,浏览器会从自己的浏览器缓存中获取资源,并跳至第16步进行页面展示。
  14. 服务器响应:

    • 如果资源不能使用缓存版本,服务器会返回完整的HTTP响应,包含资源的内容和相关的缓存头部。
  15. 页面展示:

    • 浏览器将解析和渲染后的页面内容展示给用户。
  16. 浏览器缓存更新:

    • 浏览器在展示页面后,会将页面的资源(如HTML、CSS、JavaScript、图像等)缓存到自己的浏览器缓存中,以便下次访问时可以直接使用缓存。