用户打开URL到浏览器发生了什么呢？（浏览器渲染网页全过程）

袋鱼不重
87 阅读5分钟

用户打开一个 URL 并在浏览器中完全渲染页面的全过程可以分为多个阶段，从用户输入 URL 开始，到页面完全显示出来结束。

整个流程可以简单分为以下几个步骤：

1.1. 工作流程

  1. 用户请求：用户向某个网站发出请求（如打开一个网页或视频）。
  2. CDN调度：CDN 根据用户的 IP 地址判断最近的 CDN 节点，并将请求定向到该节点。
  3. 缓存检查：CDN 节点检查是否有该内容的缓存。
  • 有缓存：直接返回缓存内容给用户
  • 无缓存：向原始服务器请求内容并缓存，然后返回给用户
  1. 返回内容：用户接收到响应内容。

1.2. 完整流程

完整流程共分为 8 个核心步骤：

  1. 用户输入 URL
  2. DNS 解析 -> 获取 IP 地址
  3. 建立 TCP 连接 （三次握手）
  4. 发送 HTTP 请求
  5. 服务器处理请求并返回响应
  6. 浏览器接收响应 -> 构建 DOM 和 CSSOM
  7. 构建渲染树 -> 布局 -> 绘制
  8. 执行 JS -> 完成页面渲染

1.3. 详细解释

  1. 用户输入 URL

当用户在浏览器地址栏中输入 URL 并按下回车，浏览器会开始处理这个请求。

  1. DNS 解析

浏览器首先通过 DNS （域名系统）解析 URL 中的域名，将其转换为 IP 地址。

这个过程可能涉及以下步骤：

  • 浏览器缓存：浏览器先查找本地缓存中是否已经有该域名的 IP 地址
  • 操作系统缓存：如果浏览器没有缓存，操作系统会查找其缓存
  • 路由器缓存：如果操作系统没有缓存，查询会继续通过路由器
  • ISP 的 DNS 服务器：最终，查询可能需要通过互联网服务提供商（ISP）的 DNS 服务器获取 IP 地址
  1. 建立 TCP 连接

通过 IP 地址确定了目标服务器后，浏览器与服务器通过 TCP 三次握手 建立连接。三次握手过程如下：

① 客户端发送 SYN （同步）请求

② 服务器收到请求后，返回 SYN + ACK

③ 客户端收到 ACK 后，发送 ACK 确认连接

  1. 发送 HTTP 请求

一旦 TCP 连接建立，浏览器向服务器发送 HTTP 请求，包括请求头和相关参数。请求头中包含以下信息：

  • 请求的资源类型（HTML、CSS、JS等）
  • 浏览器信息（User-Agent）
  • 可接收的内容类型（Accept）
  • 缓存信息（Cache-Control）等
  1. 服务器处理请求

服务器接收到请求后，处理请求并返回相应的资源（HTML文件、图片、CSS、JavaScript 等）。这一步包括：

  • 服务器可能需要从数据库或文件系统中获取数据
  • 如果是动态网页，服务器需要运行相关代码生成 HTML 内容（例如 PHP、Node.js 等服务器端语言）
  1. 服务器返回 HTTP 响应

服务器返回 HTTP 响应，包括状态码（如 200 OK）、响应头（例如内容类型、缓存控制等）和请求的资源数据（例如 HTML、CSS、JS 等）

  1. 浏览器接收响应并开始解析

浏览器接收到响应后，开始解析 HTML 文档并逐步构建 DOM 树。同时，浏览器会发出进一步的请求以获取页面中引用的资源：如果 HTML 中有外部的 CSS 文件、JS 文件或图片资源等，浏览器会并行发送 HTTP 请求来获取这些资源

  1. 构建 DOM 和 CSSOM
  • DOM 树构建：浏览器从 HTML 构建文档对象模型（DOM），每个 HTML 标签都会转换成 DOM 树的节点。
  • CSSOM 构建：浏览器解析 CSS 文件或内嵌的 CSS 样式，生成 CSSOM （CSS对象模型）
  1. 合并 DOM 和 CSSOM，生成渲染树

当 DOM 和 CSSOM 都构建完成后，浏览器将它们结合在一起，生成 渲染树。渲染树包含页面的可见元素以及它们的样式信息。

  1. 布局（Layout）

浏览器根据渲染树进行布局，计算每个元素的位置和大小。这一阶段决定了页面元素在屏幕上的确切位置

  1. 绘制（Painting）

在完成布局后，浏览器开始 绘制，将渲染树的每个节点绘制到屏幕上，生成页面的视觉内容。

  1. JS执行与事件绑定

（1）如果页面中包含 JS 文件，浏览器会根据 HTML 的解析顺序和脚本位置决定何时下载并执行 JS

  • 默认情况下，JS 是阻塞解析的，意味着浏览器会暂停 DOM 树的构建，直到脚本执行完毕
  • 如果脚本被标记为 async 或 defer，则浏览器可以异步加载和执行脚本

（2）浏览器执行 JS 后，可能会修改 DOM 或 CSSOM ，并重新触发布局和绘制

  1. 页面完全渲染

当所有资源加载完毕、DOM 构建完成、JS 执行完毕，页面内容会被完整呈现给用户。

  1. 浏览器空闲与后续交互

页面渲染完成后，浏览器处于等待状态，用户可以进行交互（如点击按钮、输入表单）。任何用户交互事件都会触发 JS 事件监听器，可能引发进一步的页面重绘（Repaint）或 重新布局（Reflow）。

avatar
文章
阅读
粉丝