38.在浏览器是怎么获取到服务器返回的数据流

1. 输入https://example.com，DNS解析为 93.184.216.34。

2. TCP 三次握手建立连接，TLS 握手协商加密。

3. 发送 GET 请求，服务器返回分块 HTML。

4. 浏览器解析首个 HTML 块，发现<link rel="stylesheet">，立即发起 CSS 请求。

5. CSS 通过同一 TCP 连接到达，浏览器解析并应用样式。

6. 继续接收 HTML 剩余块，渲染可见内容，同时异步加载图片等资源。

7. 页面完全加载后，保持连接以备后续请求（如用户交互触发 AJAX）。

1. URL 解析与 DNS 查询

• 输入 URL：用户输入网址（如http://example.com），浏览器解析出协议、主机名、端口和路径。

• DNS 查询：浏览器通过 DNS 将主机名解析为 IP 地址。若缓存中存在记录则直接使用，否则递归查询直至获取 IP。

2. 建立网络连接

• TCP 三次握手：浏览器与服务器通过 IP 和端口建立 TCP 连接，确保可靠传输。

• TLS 握手（HTTPS）：若使用 HTTPS，在 TCP 连接后进行 TLS 握手，协商加密算法并交换密钥，后续数据加密传输。

3. 发送 HTTP 请求

• 构造请求报文：浏览器生成 HTTP 请求（如 GET /index.html），包含请求头（User-Agent、Accept 等）。

• 发送请求：通过 TCP 连接发送请求报文，若为 HTTP/2 则使用二进制分帧多路复用，提升效率。

4. 服务器处理与响应

• 处理请求：服务器解析请求，定位资源（如 HTML 文件），生成响应。

• 返回数据流：响应包含状态码（如 200 OK）、响应头（Content-Type、Content-Length）及分块数据（可能使用 Transfer-Encoding: chunked）。

5. 接收与处理数据流

• 流式接收：浏览器通过 TCP 连接逐步接收数据包，TCP 确保顺序和完整性，重组为连续数据流。

• 即时处理：

HTML 解析：边下载边解析，触发预加载（如发现<img>标签时提前请求资源）。

分块处理：若响应为分块传输，浏览器按块解析并渲染，提升加载速度。

• 解密（HTTPS）：若为 HTTPS，浏览器使用 TLS 会话密钥解密数据，得到明文响应。

6. 资源加载与渲染

• 加载子资源：解析 HTML 时发现的 CSS、JS、图片等，浏览器发起新请求（可能复用 TCP 连接）。

• 渲染页面：构建 DOM 树、应用 CSS、执行 JS，逐步渲染内容，无需等待所有数据到达。

7. 连接管理

• 持久连接：HTTP/1.1 默认保持连接（Connection: keep-alive），复用同一 TCP通道发送后续请求。

• 关闭连接：数据传输完成后，根据头信息决定关闭或保持连接（HTTP/2 支持多路复用，减少连接开销）