浏览器页面加载步骤

发布时间： at 02:19
本文收录在以下合集中：

加载步骤

当你在浏览器中输入一个链接并按下回车键后，直到页面加载完成，大致会经历以下步骤：

  1. 域名解析（DNS查询）：
    • 浏览器检查域名是否在本地缓存中。
    • 如果不在缓存中，浏览器会向本地DNS服务器发送请求。
    • 如果本地DNS服务器没有记录，它会递归地查询根域名服务器、顶级域名服务器和权威域名服务器，直到找到负责该域名的DNS服务器。
    • 最终，浏览器获得域名对应的IP地址。
  2. 建立TCP连接：
    • 浏览器使用获取到的IP地址，通过三次握手过程与网站服务器建立TCP连接。
      • 第一次握手：客户端发送一个带有SYN标志的TCP段，以开始一个新的连接。
      • 第二次握手：服务器接收到这个段后，发送一个带有SYN/ACK标志的段作为应答。
      • 第三次握手：客户端再发送一个带有ACK标志的段，确认连接建立。
  3. 发送HTTP请求：
    • 浏览器通过建立的TCP连接向服务器发送一个HTTP请求（如果是HTTPS，还需要进行SSL/TLS握手来加密通信）。
    • 请求通常包括：请求方法（GET、POST等）、请求的URL、协议版本、请求头部（如Host、User-Agent、Accept等）以及可能包含请求体。
  4. 服务器处理请求：
    • 服务器接收到请求后，根据请求类型和资源位置进行处理。
    • 如果请求的是静态资源（如HTML页面、图片、CSS文件等），服务器通常直接返回资源。
    • 如果请求的是动态内容，服务器可能需要执行服务器端代码（如PHP、Python、Java等），生成响应内容。
  5. 服务器响应：
    • 服务器将响应数据发送回浏览器，响应通常包括：状态码（如200表示成功）、响应头部（如Content-Type、Content-Length等）以及响应体（如HTML内容）。
  6. 浏览器处理响应：
    • 浏览器根据状态码判断请求是否成功。
    • 如果成功，浏览器开始解析响应体中的内容。
    • 浏览器解析HTML文档，构建DOM树，并根据HTML中的标签和CSS样式信息构建渲染树。
  7. 加载外部资源：
    • 浏览器发现HTML中引用的外部资源（如图片、CSS文件、JavaScript文件等），会发送额外的HTTP请求来获取这些资源。
    • 这个过程可能会重复多次，因为JavaScript文件可能会在执行时动态加载更多资源。
  8. 执行JavaScript：
    • 浏览器解析并执行页面中的JavaScript代码。
    • JavaScript可能会修改DOM结构，或者加载额外的资源，这可能导致页面重新渲染。
  9. 渲染页面：
    • 浏览器根据渲染树和CSS样式信息计算每个节点的确切位置和大小，这个过程称为布局（Layout）。
    • 随后进行绘制（Paint），将内容显示在屏幕上。
  10. 页面加载完成：- 当所有资源都加载完毕，且所有的JavaScript代码执行完成后，浏览器认为页面加载完成。- 此时，浏览器可能会触发一个load事件，通知开发者页面已经加载完毕。 这个过程可能因为各种原因（如网络延迟、服务器响应慢、资源体积大等）而有所差异，但大体上遵循上述步骤。

涉及到的缓存

在浏览器从输入链接到页面加载完成的过程中，可能会涉及到以下几种缓存：

  1. 浏览器缓存：
    • 内存缓存：内存缓存是浏览器为了快速读取缓存资源而设置的，通常用于存储较小或者经常访问的资源。内存缓存读取速度快，但生命周期短，一旦关闭浏览器，内存缓存就会被清空。
    • 磁盘缓存：磁盘缓存是浏览器将资源存储在硬盘上的缓存。与内存缓存相比，磁盘缓存容量更大，但读取速度较慢。磁盘缓存可以在多次会话之间持续存在。
  2. DNS缓存：
    • 浏览器DNS缓存：浏览器会缓存一定时间内访问过的网站的DNS记录，以减少DNS查询的时间。
    • 操作系统DNS缓存：操作系统的网络栈也会缓存DNS记录，这些缓存可能比浏览器缓存持久。
    • 本地DNS服务器缓存：本地网络中的DNS服务器同样会缓存DNS记录，这些缓存可以被网络中的所有设备使用。
  3. HTTP缓存：
    • 强制缓存：通过设置Cache-Control和Expires头部，服务器可以告诉浏览器资源可以直接从缓存中读取，无需再次请求服务器。
    • 协商缓存：如果资源过期，浏览器会向服务器发送一个请求，询问资源是否有更新。如果有更新，服务器返回新资源；如果没有，服务器返回304 Not Modified，浏览器使用缓存中的资源。
  4. 代理服务器缓存：
    • 企业或ISP代理缓存：企业或互联网服务提供商（ISP）可能会设置代理服务器来缓存常用的网页内容，以减少对原始服务器的请求，并加快内容的加载速度。
  5. CDN缓存：
    • 内容分发网络（CDN）缓存：CDN是一种分布式网络服务，它会将内容的副本存储在遍布全球的服务器上。当用户请求资源时，可以从最近的服务器获取，从而加快资源的加载速度。
  6. Service Worker缓存：
    • Service Worker缓存：Service Worker是运行在浏览器背后的脚本，可以拦截网络请求，并根据需要决定是从网络加载资源还是从缓存中读取资源。
  7. 数据库缓存：
    • Web SQL Database / IndexedDB：现代浏览器支持在客户端存储大量结构化数据，这些数据库可以作为缓存使用，存储应用数据以供快速访问。
  8. 应用缓存（已废弃）：
    • AppCache：尽管HTML5的AppCache已经被废弃，但一些旧的应用可能仍在使用它来缓存应用资源，以便在没有网络连接时也能使用。 每种缓存都有其特定的用途和生命周期，它们共同工作以提高网络性能和用户体验。需要注意的是，缓存策略应该根据资源类型和应用需求进行合理配置，以避免用户获取到过时的内容。