前端浏览器渲染页面

Nash

• 4 min read

详细描述了浏览器从接收到 URL 到最终渲染页面的过程

1. 用户输入 URL 并回车

  • 用户在浏览器的地址栏输入一个 URL（例如 https://www.example.com）并按下回车。

2. 浏览器解析 URL

  • URL 解析：浏览器会解析 URL，拆分成不同的部分，如协议（https://）、主机名（www.example.com）、路径（/）等。
  • 检查缓存：浏览器首先会检查是否有该页面的缓存内容（如缓存的 DNS 结果或页面资源），如果有且未过期，则直接使用缓存。

3. DNS 查询

  • DNS 解析：浏览器会检查本地 DNS 缓存，看是否已经有该网站的 IP 地址。如果没有，浏览器会向 DNS 服务器发起请求，解析出该域名对应的 IP 地址。
  • DNS 服务器响应：DNS 服务器返回网站的 IP 地址（例如 93.184.216.34）。

4. 发起 TCP 连接

  • 建立 TCP 连接：浏览器通过 TCP 协议与服务器建立连接，通常使用端口 80（HTTP）或 443（HTTPS）。
  • 三次握手：浏览器和服务器之间会通过三次握手建立可靠的连接：
  1. 浏览器向服务器发送 SYN 请求。
  2. 服务器回应 SYN-ACK。
  3. 浏览器发送 ACK 响应确认。

5. 发起 HTTPS 请求（如果是 HTTPS）

  • SSL/TLS 握手：如果是 HTTPS 协议，浏览器与服务器会进行 SSL/TLS 握手，建立加密的通信通道。握手过程包括验证服务器证书、交换加密密钥等。
  • 加密通信：在建立加密连接后，浏览器可以安全地向服务器发送请求数据。

6. 浏览器发送 HTTP 请求

  • 发送请求：浏览器通过建立的 TCP 连接，向服务器发送 HTTP 请求。这个请求包含请求头和一些额外信息，例如用户代理、语言、接受的编码方式等。 例如：http复制代码GET / HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/92.0.4515.159 Safari/537.36

7. 服务器处理请求

  • 处理请求：服务器接收到请求后，会解析并处理请求。它可能会访问数据库、处理业务逻辑、生成页面内容等。
  • 响应 HTTP 请求：服务器生成响应并返回给浏览器。响应包含状态码（如 200 OK 或 404 Not Found）、响应头、页面内容等。http复制代码HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Content-Length: 1234

8. 浏览器接收并解析响应

  • 解析响应头：浏览器首先解析服务器返回的响应头，检查状态码（是否成功），并根据 Content-Type 来决定如何处理响应内容。
  • 下载页面内容：浏览器会根据响应头中的 Content-Type 和响应体，开始下载页面内容（HTML 文件）。

9. 解析 HTML 内容并构建 DOM 树

  • 构建 DOM 树：浏览器将 HTML 内容解析成 DOM（文档对象模型）树，DOM 树表示页面的结构和内容。
  • 在解析过程中，如果遇到 script 标签，浏览器会暂停 DOM 构建，下载和执行 JavaScript 文件，然后继续解析 HTML。
  • 如果有外部资源（如图片、CSS、JavaScript 文件），浏览器会发送请求获取这些资源。

10. 渲染页面

  • CSS 解析：浏览器会解析页面中的 CSS（通过 <style> 标签或外部 CSS 文件），并将样式信息与 DOM 树结合，构建渲染树（Render Tree）。
  • 布局计算：根据渲染树，浏览器计算每个元素的尺寸和位置（布局阶段）。
  • 绘制页面：浏览器将页面内容绘制到屏幕上（绘制阶段），显示最终的网页内容。

11. 执行 JavaScript

  • JavaScript 执行：浏览器会执行页面中的 JavaScript 代码，修改 DOM、更新样式、处理事件等。通常 JavaScript 会影响页面内容和交互性。
  • 异步请求：JavaScript 代码还可能发起异步请求（如 AJAX 请求），获取更多数据并更新页面。

12. 完成页面加载

  • 页面完成加载，浏览器可能会触发 load 事件，通知页面已经完全渲染。

总结

当用户在浏览器中输入网址并按下回车时，浏览器会经历以下几个主要步骤：

  1. 解析 URL 并检查缓存。
  2. 进行 DNS 查询以获得服务器 IP 地址。
  3. 建立 TCP 或 HTTPS 连接。
  4. 发送 HTTP 请求并接收服务器响应。
  5. 解析 HTML 内容，构建 DOM 树。
  6. 解析 CSS，构建渲染树。
  7. 执行 JavaScript，渲染并展示页面。

苏ICP备2025153828号