浏览器从输入url发生了什么

浏览器输入 URL 后发生了什么

浏览器输入 URL → DNS 解析 → 建立 TCP 连接（三次握手）→ 发起 HTTP 请求 → 服务器响应 → 浏览器渲染页面

1️⃣ 检查浏览器缓存

• 查看是否已有该页面的缓存（包括 URL 重定向、DNS、HTTP 缓存等）。
• 如果命中强缓存（如 Cache-Control: max-age=xxx），直接使用缓存页面，流程终止。

2️⃣ DNS 解析（域名解析为 IP）

• 查询浏览器缓存 → 操作系统缓存 → hosts 文件 → 本地 DNS 服务器
• 最终获取目标服务器 IP 地址

3️⃣ 建立 TCP 连接（三次握手）

• 客户端与服务器建立连接，使用 TCP 协议（HTTP端口 80/HTTPS443）
• 若使用 HTTPS，还会在 TCP 上进行 TLS/SSL 握手

4️⃣ 发起 HTTP 请求

• 浏览器向服务器发送请求数据，如 GET /index.html HTTP/1.1
• 携带 headers（Cookie、User-Agent、Accept-Encoding 等）

5️⃣ 服务器处理请求并返回响应

• 服务器根据请求路径处理业务逻辑
• 返回响应（包括状态码、响应头和响应体）

6️⃣ 浏览器接收响应并开始渲染页面

渲染过程大致如下（Chrome 浏览器的渲染流程）：

步骤	说明
HTML 解析成 DOM 树	词法 + 语法解析，生成 DOM
CSS 解析成 CSSOM 树	CSS 文件解析成样式对象
JS 执行	JS 会阻塞 DOM 构建（遇到 <script> 标签）
DOM + CSSOM 合并成渲染树	render tree（可见元素+应用样式）
布局（Layout）	计算元素几何位置
分层 + 分块	图层划分、栅格化准备
栅格化 + 合成	GPU 加速生成位图，合成显示

7️⃣ 页面展示

• 浏览器完成首屏渲染（首次 Paint）
• 后续资源如图片、异步脚本可能继续加载