从 url 输入到浏览器的完整过程

参考文章: https://febook.hzfe.org/awesome-interview/book2/browser-render-mechanism

渲染关键环节

1. URL 解析（URL Parsing）

• 用户在浏览器地址栏中输入 URL，浏览器首先将其解析成可识别的格式。URL 格式包括协议（如 HTTP、HTTPS）、主机名、端口号、路径和查询参数等部分。

2. DNS 解析（DNS Resolution）

• 浏览器根据解析得到的主机名（域名）查询 DNS（Domain Name System）服务器，获取对应主机名对应的 IP 地址。如果 DNS 缓存中存在该域名的解析记录，则直接使用缓存，否则进行 DNS 解析。

3. 建立 TCP 连接（TCP Connection Establishment）

• 浏览器使用解析得到的 IP 地址和端口号，通过 TCP 协议与服务器建立连接。在建立连接的过程中可能会进行 TCP 的三次握手，确保客户端和服务器之间的可靠连接。

4. 发起 HTTP 请求（HTTP Request）

• 浏览器向服务器发送 HTTP 请求，请求中包含了用户需要的资源信息，如请求的路径、请求方法（GET、POST 等）、请求头部等。如果是 HTTPS 请求，还会进行 SSL/TLS 握手，建立安全连接。

5. 服务器处理请求（Server-Side Processing）：

• 服务器接收到浏览器发来的请求后，根据请求的路径和其他信息，调用相应的后端程序进行处理。后端程序可能会访问数据库、调用其他服务或执行逻辑处理，然后生成响应数据。

6. 返回 HTTP 响应（HTTP Response）

• 浏览器接收到服务器返回的 HTTP 响应后，开始接收响应数据。如果响应数据较大，可能会分多次接收，直到接收完整个响应体(html文本)。

7. 浏览器渲染过程

• 解析 HTML 和 CSS（HTML and CSS Parsing）
  • 浏览器对接收到的 HTML 和 CSS 进行解析，构建文档对象模型（DOM）和样式对象模型（CSSOM）。
  • 解析过程中，可能会遇到外部资源（如图片、脚本、样式表等），需要进一步请求获取。
• 构建
  • HTML parser --> DOM Tree
    • 标记化算法，进行元素状态的标记
    • dom 树构建
  • CSS parser --> Style Tree
    • 解析 css 代码，生成样式树
  • attachment --> Render Tree
    • 结合 dom树 与 style树，生成渲染树
• 布局和绘制
  • 浏览器根据渲染树计算每个节点在页面中的位置和大小，然后进行布局（Layout）。
  • 接着，浏览器将布局信息转换成绘制命令，进行绘制（Painting）操作，将页面内容绘制到屏幕上。
• 页面渲染
  • 浏览器根据绘制得到的内容在屏幕上展示页面，用户可以看到页面内容。同时，浏览器可能会触发 JavaScript 的执行、处理用户交互等操作，以提供更丰富的用户体验。