文章目录
一、整体概述
在浏览器输入网址到页面完整展示，一共7大步骤
完整流程顺序：
寻址（DNS解析域名→IP）→ 建连接（TCP三次握手）→ 发请求（HTTP请求）→ 收响应（HTTP响应）→ 渲染页面 → 断连接（TCP四次挥手）
其他问题：
涉及通信角色：浏览器、本地DNS缓存、根域名服务器、顶级域名服务器、目标域名服务器、网站服务器
二、分步骤详细
步骤1：浏览器输入网址，发起访问请求
- 操作：用户在地址栏输入域名（如www.baidu.com）按下回车
- 前置判断：浏览器先查自身缓存，看之前是否保存过该域名对应的IP地址
- 有缓存：直接拿IP，跳过DNS解析
- 无缓存：启动DNS解析流程
- 通俗理解：你想找一家店铺，先翻自己备忘录有没有店铺地址，没有就去查通讯录
核心知识点：
- 浏览器自动补全URL：www.baidu.com → https://www.baidu.com/（现代浏览器优先HTTPS）；
- URL结构：协议://域名/路径?参数（百度首页路径为空）；
- 本地缓存查询：先查Hosts文件、浏览器DNS缓存、系统DNS缓存，看是否有域名-IP映射。
- HTTP与HTTPS核心区别对比表
| 对比维度 | HTTP | HTTPS |
|---|---|---|
| 全称 | 超文本传输协议 | 超文本传输安全协议（HTTP+SSL/TLS） |
| 传输方式 | 明文传输，数据无加密 | 加密传输，通过SSL/TLS对数据加密 |
| 默认端口 | 80 | 443 |
| 安全证书 | 无需CA数字证书 | 必须配置CA颁发安全证书（免费/付费） |
| 数据安全性 | 低，抓包可直接看到账号、密码等信息；易被窃听、篡改、钓鱼 | 高，截获数据包为乱码；防窃听、防篡改、身份认证防钓鱼 |
| 浏览器标识 | 地址栏无小锁，浏览器标注"不安全" | 地址栏显示安全小锁图标 |
| 传输流程 | TCP三次握手后直接发送请求 | TCP三次握手后，额外进行SSL/TLS握手，再传输加密请求 |
| 性能 | 无加密运算，速度稍快 | 多一层加密解密计算，轻微性能损耗（日常几乎无感） |
| 适用场景 | 内网系统、无敏感信息本地页面 | 官网、购物、支付、登录、所有对外公开网站 |
步骤2：DNS域名解析（把域名翻译成服务器IP）
核心作用：电脑网络只识别数字IP，看不懂英文域名（把人类好记的域名转换成机器识别的IP地址），DNS负责域名↔IP转换
递归查询全过程：
- 浏览器询问本地DNS（运营商DNS）
- 本地DNS无记录 → 去找根DNS服务器
- 根DNS指引去找顶级域名服务器（.com/.cn）
- 顶级域名服务器指引去找目标域名DNS（百度DNS）
- 目标DNS返回网站服务器真实IP
- 本地DNS把IP传回浏览器，同时缓存IP，下次不用重复查询
- DNS解析流程：本地DNS → 根DNS → com顶级域DNS → 百度权威DNS → 返回IP（如110.242.68.4）；
- 解析方式：递归查询（本地DNS替浏览器查）+ 迭代查询（根/顶级域指引方向）；
通俗比喻： 你不知道店铺地址，先问小区物业（本地DNS），物业不知道→问国家总局（根DNS）→省级分局（顶级DNS）→店铺前台（目标DNS），最终拿到店铺门牌号（IP）
步骤3：TCP三次握手（建立稳定连接通道）
拿到服务器IP后，浏览器和服务器先建立可靠传输通道，用TCP协议，三次握手保证双方收发功能正常
- 第一次：浏览器发消息：我想和你建立连接 （SYN ）
- 第二次：服务器回复：收到，我准备好了，我也想连你 （SYN+ACK）
- 第三次：浏览器再回复：收到你的消息，连接正式建立 （ACK）
通俗理解： 打电话
-
你：喂能听见吗？
-
对方：能听见，你能听见我吗？
-
你：可以，咱们开始说话吧
核心知识点：
- TCP是"面向连接、可靠的传输层协议"（HTTP基于TCP）；
- 三次握手流程：
- 客户端→服务器：SYN（请求连接）+ 序列号X；
- 服务器→客户端：ACK（确认X+1）+ SYN（请求连接）+ 序列号Y；
- 客户端→服务器：ACK（确认Y+1）→ 连接建立；
- 目的： 避免无效连接，确保双方都能收发数据。
特点： 连接建立完成后，才会传输网页数据，不会出现数据丢失、乱序
步骤4：浏览器发送HTTP/HTTPS请求
连接建好后，浏览器按照HTTP协议规范，向服务器发送请求报文
请求包含内容：
- 请求方式：GET（查看页面）/POST（提交表单）
- 请求域名、浏览器设备信息、Cookie、携带参数
通俗理解：打通电话后，你向店家说：我想要看你们首页商品
核心知识点：
- HTTP请求报文结构：
- 请求行：GET / HTTP/1.1（GET获取资源、路径/、协议版本）；
- 请求头：Host（目标域名）、User-Agent（浏览器信息）、Cookie（身份信息）；
- 请求体：GET请求为空（POST请求才有，如登录传账号密码）；
- 请求方法：GET（查）、POST（提交）、PUT/DELETE等。
步骤5：服务器处理请求，返回响应数据
核心知识点：
- 服务器处理：解析请求 → 调取首页HTML/CSS/JS资源 → 组装响应报文；
- HTTP响应报文：
- 状态行：HTTP/1.1 200 OK（200成功，404资源不存在，500服务器错误）；
- 响应头：Content-Type（响应格式）、Server（服务器软件）、Set-Cookie（设置Cookie）；
- 响应体：百度首页的HTML源代码；
- 状态码分类：2xx成功、3xx重定向、4xx客户端错、5xx服务器错。
通俗理解： 百度客服核对你的请求后，把"首页内容的纸质版"（HTML代码）通过快递（TCP连接）寄给你，快递单标注"内容类型：HTML、重量：12345字节"
步骤6：浏览器接收资源，渲染页面
浏览器拿到HTML/CSS/JS等文件，按顺序渲染出可视化网页：
- 解析HTML，生成DOM树（页面结构）
- 解析CSS，生成CSSOM样式树
- 结合两棵树生成渲染树
- 布局（计算元素位置大小）→ 绘制（上色、图片文字）→ 合成页面
额外：JS会动态修改页面内容、交互效果
通俗理解：拿到画册后，一页一页展开、上色、排版，完整展示出店铺全貌
步骤7：TCP四次挥手（断开网络连接）
页面加载完成，双方不需要传输数据，安全断开TCP连接，分四次消息交互
- 四次挥手流程：
- 浏览器：我这边没有数据要传了，准备关闭 （FIN）
- 服务器：收到，我还有一点数据传完 （ACK）
- 服务器：所有数据传输完毕，我这边也可以关闭 （FIN）
- 浏览器：确认关闭，连接断开 （ACK）
- 目的： 确保双方数据都传输完毕，避免数据丢失；
- HTTP/1.1默认短连接（一次请求响应后断开），HTTP/2/3支持长连接。
通俗理解： 通话结束
- 你：我说完了，准备挂电话
- 店家：稍等，我还有一点信息告诉你
- 店家：我这边也说完了
- 你：好的，挂断
三、核心总结
- DNS：翻译域名和IP，解决"记不住数字地址"的问题
- TCP三次握手：建立安全可靠通道，保证数据不出错
- HTTP：规定浏览器和服务器对话的标准格式，传递网页资源
- 四次挥手：通信结束，优雅断开连接，释放网络资源
四·、易混知识点区分
- DNS：只做地址翻译，不传输网页内容
- TCP：负责稳定的数据传输通道，不负责页面内容
- HTTP：负责传输网页文本、图片等业务数据，依托TCP通道工作
- HTTPS：加密传输，通过SSL/TLS对数据加密
- 握手/挥手：只在TCP连接建立、断开阶段执行，页面加载中间不重复执行
五、常见问题
- 其他问题：
- 若Hosts文件写了www.baidu.com 127.0.0.1，输入网址会访问哪里？（答：本机，不走DNS解析）
- HTTP状态码404和500分别代表什么？（答：404资源不存在，500服务器内部错误）
- TCP为什么需要三次握手而非两次？（答：确认双方收发能力，避免无效连接）