浏览器输入网址后

浏览器输入URL后的完整流程(DNS/TCP/HTTP/渲染)

#platform / browser #type / concept #status / evergreen

浏览器输入网址后发生的事

当在浏览器中输入网址（URL）并按下回车后，浏览器会执行一系列复杂的步骤来加载网页。这个过程涉及多种技术和协议，以下是详细说明：

1. URL解析与输入处理

  • 作用：浏览器解析用户输入的URL（协议、域名、端口、路径等），判断其合法性并补全默认协议
  • 技术：浏览器内置的URL解析器

2. DNS域名解析

  • 作用：将域名转换为对应的IP地址
  • 过程：
    1. 浏览器缓存 → 2. 系统缓存 → 3. 路由器缓存 → 4. ISP DNS服务器 → 5. 根域名服务器迭代查询
  • 协议：DNS使用UDP协议（端口53）
  • 优化技术：DNS缓存、DNSSEC（防篡改）

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

  • 作用：确保可靠的数据传输
  • 过程：
    1. 客户端发送SYN → 2. 服务器回复SYN-ACK → 3. 客户端发送ACK
  • 协议：TCP协议

4. TLS握手（HTTPS场景）

  • 作用：加密通信
  • 过程：
    1. 客户端发送加密算法列表 → 2. 服务器返回证书 → 3. 验证证书并生成密钥
  • 协议：TLS（基于SSL）

5. 发送HTTP请求

  • 请求结构：
    • 请求行（方法、URL、协议版本）
    • 请求头（Host、User-Agent等）
    • 请求体（POST数据）
  • 协议：HTTP/1.1（端口80）或HTTPS（端口443）

获得cookie：若服务器需要建立会话（如用户登录），会在首次访问时在 HTTP 响应头中添加Set-Cookie字段，浏览器接收后保存到本地（内存或硬盘）

6. 服务器处理请求

  • 过程：
    • 后端处理（数据库查询等）
    • 返回HTTP响应（状态码、响应头、响应体）
  • 技术：负载均衡（Nginx）、动态内容生成

7. 浏览器接收响应并渲染

  • 渲染过程：
    1. 构建DOM树 → 2. 构建CSSOM树 → 3. 生成渲染树 → 4. 布局 → 5. 绘制
  • 优化：
    • 预加载扫描器
    • 缓存机制（强缓存/协商缓存）

8. 关闭TCP连接（四次挥手）

  • 过程：
    1. 客户端发送FIN → 2. 服务器回复ACK → 3. 服务器发送FIN → 4. 客户端回复ACK

关键技术与协议总结

步骤技术/协议作用
DNS解析DNS (UDP)域名→IP地址转换
TCP连接TCP三次握手可靠传输通道建立
加密通信TLS/SSL数据加密与身份验证
数据传输HTTP/HTTPS请求与响应规范
浏览器渲染WebKit/Blink解析HTML/CSS/JS并显示页面
缓存优化DNS缓存、HTTP缓存减少重复请求，提升加载速度

性能与安全优化

  • DNS预取：提前解析页面中的链接域名
  • HTTP/2：多路复用减少连接数
  • CDN：分布式服务器加速资源加载
  • DNSSEC：防止DNS劫持

面试要点

来自 browser-url-to-page-interview-question 的面试视角整理。

一句话回答

浏览器输入 URL 后，一般会经历 URL 解析、DNS 解析、TCP 或 TLS 建连、HTTP 请求与响应、浏览器渲染以及后续资源加载与缓存复用。

面试时最稳的回答顺序

  1. 解析 URL，确认协议、域名、路径
  2. 做 DNS 解析，拿到目标 IP
  3. 建立 TCP 连接；如果是 HTTPS，还会做 TLS 握手
  4. 浏览器发送 HTTP 请求，服务端返回响应
  5. 浏览器解析 HTML、CSS、JS，构建页面并渲染
  6. 后续还会继续加载子资源，并结合缓存、连接复用等机制优化

一个更完整的面试表达

可以这样答：

浏览器输入 URL 后，先会解析协议、域名和路径；然后通过 DNS 把域名解析成 IP。拿到 IP 之后，如果是 HTTP 就建立 TCP 连接，如果是 HTTPS 还会多一层 TLS 握手。连接建立后浏览器发送 HTTP 请求，服务端返回 HTML 响应。浏览器再继续解析 HTML、CSS、JS，构建 DOM 和 CSSOM，完成布局和绘制。页面并不是一次性结束的，后面还会继续加载脚本、图片、样式等资源，并结合缓存、连接复用和渲染优化来提升体验。

这题真正想考什么

  • 你是否知道网络和浏览器渲染是串起来的
  • 你能不能按顺序讲，不把 DNS、TCP、TLS、HTTP、渲染搅乱
  • 你是否理解“页面显示出来”背后不只是一个 HTTP 请求

每一步可以怎么展开

1. URL 解析

  • 判断协议是 http 还是 https
  • 拿到域名、端口、路径、查询参数

2. DNS 解析

  • 浏览器需要把域名解析成 IP
  • 中间可能命中浏览器缓存、系统缓存、DNS 缓存

3. 建立连接

  • HTTP：通常建立 TCP 连接
  • HTTPS：TCP 之后还要做 TLS 握手

4. 发请求和收响应

  • 浏览器发 HTTP 请求
  • 服务端返回状态码、响应头、响应体
  • 如果命中缓存，可能不会走完整网络链路

5. 浏览器渲染

  • 解析 HTML，构建 DOM
  • 解析 CSS，构建 CSSOM
  • 合并后做布局和绘制
  • JS 可能参与修改 DOM、阻塞解析或触发后续渲染

6. 后续资源与优化

  • 图片、脚本、字体、样式会继续请求
  • 可能涉及缓存、预加载、懒加载、HTTP/2 多路复用

面试里最容易加分的几句

  • 如果是 HTTPS，比 HTTP 多了 TLS 握手和证书校验
  • 页面首次显示不代表已经可交互，还要看脚本执行和客户端接管
  • 缓存可能让浏览器跳过部分网络请求

常见追问

DNS 会先查哪里

常见会先看浏览器缓存、系统缓存，再继续向外查询。

HTTPS 比 HTTP 多了什么

多了 TLS 握手和证书校验过程。可继续看 http-vs-https-interview-question。

浏览器什么时候开始渲染

当 HTML 和 CSS 逐步被解析后，会进入 DOM、CSSOM、布局、绘制等流程。可继续看 reflow-vs-repaint-interview-question 和 browser-rendering-process。

缓存会影响哪些环节

缓存可能让浏览器跳过部分网络请求，直接走强缓存或协商缓存。可继续看 浏览器缓存分类与 304 / memory cache / disk cache。

HTTP/2 优化了什么

它更强调连接复用、多路复用和头部压缩，能减少传统 HTTP/1.1 下的一些队头阻塞和连接浪费。可继续看 http1-http2。

最适合背诵的短答案

浏览器输入 URL 后，先解析地址并做 DNS 解析，拿到 IP 后建立 TCP 连接；如果是 HTTPS，还要做 TLS 握手。之后浏览器发送 HTTP 请求，服务端返回 HTML。浏览器再解析 HTML、CSS、JS，构建页面并渲染，后续还会继续加载子资源，并结合缓存、连接复用和渲染优化提升体验。

最短记忆方式

输入 URL = 解析地址 -> DNS -> 建连 -> 请求响应 -> 浏览器渲染。

创建于 2025/1/1 更新于 2026/5/27