浏览器输入url到渲染完成经历了那些内容

问：

浏览器输入url到渲染完成经历了那些内容

回答：

从浏览器输入 URL 到页面渲染完成的过程涉及多个步骤，每个步骤都涉及特定的网络和计算机科学技术。以下是这一过程的基本流程：

1. URL 解析：

   • 用户在浏览器地址栏输入 URL（统一资源定位符）。
   • 浏览器解析 URL，分解成协议（如 HTTP/HTTPS）、域名、路径、查询参数等。

2. DNS 查询：

   • 浏览器检查本地缓存是否有该域名的 IP 地址。如果没有，发起 DNS 查询，将域名转换为 IP 地址。
   • DNS 服务器返回域名对应的 IP 地址。

3. 建立 TCP 连接：

   • 使用 IP 地址和端口号（通常是 80 端口用于 HTTP，443 端口用于 HTTPS）与服务器建立 TCP 连接。
   • 如果是 HTTPS，还需要进行 SSL/TLS 握手，建立加密通道。

4. 发送 HTTP 请求：

   • 浏览器构造并发送 HTTP 请求给服务器，包含请求头（如浏览器信息、接受的内容类型）和请求体（如表单数据）。

5. 服务器处理请求：

   • 服务器接收到请求，处理并生成响应。响应通常包括状态码（如 200、404）、响应头和响应体。

6. 接收 HTTP 响应：

   • 浏览器接收到服务器的 HTTP 响应，解析响应头和响应体。
   • 如果响应状态码是 200，浏览器继续处理响应体；如果是 4xx 或 5xx，浏览器会显示相应的错误信息。

7. 解析 HTML：

   • 浏览器开始解析 HTML 文档，构建 DOM（文档对象模型）树。
   • 在解析过程中，如果遇到 CSS 链接、JavaScript 脚本、图片等资源，浏览器会发起额外的网络请求。

8. 加载 CSS：

   • 浏览器请求并加载 CSS 文件，解析 CSS 规则，并应用于 DOM 元素，构建 CSSOM（CSS 对象模型）树。

9. 构建渲染树：

   • 将 DOM 和 CSSOM 结合起来，生成渲染树。渲染树只包含需要显示的内容和样式。

10. 布局（回流）：

    • 根据渲染树计算每个元素的大小和位置，确定元素的确切位置和尺寸。

11. 绘制：

    • 将渲染树中的内容绘制到屏幕上，包括背景颜色、文本、图片等。

12. 执行 JavaScript：

    • 浏览器执行 JavaScript 代码，可能会修改 DOM 和 CSSOM，引起重新布局或重绘。

13. 完成渲染：

    • 页面内容完全渲染到屏幕上，并且所有的资源（如图像、视频）都已加载完成。

这个过程中的每个步骤都是复杂且优化的，以确保网页能够快速和高效地加载和渲染