浏览器输入一个网址后,看到返回结构,都经历了哪些流程

最新推荐文章于 2025-11-10 08:32:34 发布

原创最新推荐文章于 2025-11-10 08:32:34 发布 · 1k 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

当你在浏览器地址栏输入一个网址（比如 https://www.shop.com）并按下回车后，浏览器和网络系统会执行一系列复杂的操作，最终将网页内容呈现给你。以下是这个过程的详细步骤：

1. URL解析

浏览器解析输入的网址：

检查输入是URL还是搜索词
解析URL的各个部分：

2. DNS查询（域名解析）

将域名转换为IP地址：

检查浏览器缓存 → 检查本地hosts文件 → 检查系统DNS缓存
向配置的DNS服务器发起查询（递归查询）
DNS服务器可能进行的迭代查询过程：
根域名服务器 → .com顶级域名服务器 → example.com权威域名服务器
最终获得目标服务器的IP地址（如 203.0.113.5）

3. 建立TCP连接

三次握手建立可靠连接：

客户端→服务端：SYN（同步序列编号）
服务端→客户端：SYN-ACK（确认收到）
客户端→服务端：ACK（确认建立）
如果是HTTPS，还会进行TLS握手（见下一步）

4. TLS握手（HTTPS安全连接）

建立加密通信通道：

客户端发送"Client Hello"（支持的加密套件等）
服务器响应"Server Hello"（选择的加密方式+证书）
客户端验证证书（颁发机构、有效期、域名匹配等）
客户端生成预主密钥并用证书公钥加密发送
双方根据预主密钥生成会话密钥
加密通信开始

5. 发送HTTP请求

构造并发送HTTP请求报文：

GET /path/page.html HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0
Accept: text/html,application/xhtml+xml
Accept-Language: zh-CN,zh;q=0.9
Connection: keep-alive
(空行)

6. 服务器处理请求

服务器端处理流程：

Web服务器（如Nginx/Apache）接收请求
静态资源：直接返回文件内容
动态请求：
- 转发给应用服务器（如Tomcat/Node.js）
- 执行相关业务逻辑（数据库查询等）
- 生成响应内容

7. 接收HTTP响应

服务器返回响应报文：

HTTP/1.1 200 OK
Date: Mon, 23 May 2022 22:38:34 GMT
Content-Type: text/html; charset=UTF-8
Content-Length: 138
Last-Modified: Wed, 08 Jan 2022 23:11:55 GMT
Server: Apache/2.4.1 (Unix)
(空行)
<!DOCTYPE html>
<html>
<head>
    <title>Example Page</title>
</head>
<body>
    <p>Hello World!</p>
</body>
</html>

8. 浏览器渲染页面

关键渲染步骤：

(1) 解析HTML构建DOM树

将HTML字节流转换为Token
根据Token构建DOM节点
形成DOM树结构

(2) 解析CSS构建CSSOM

解析外部CSS文件和内联样式
构建CSS对象模型（CSSOM）

(3) 合并DOM和CSSOM形成渲染树

组合DOM和CSSOM
排除不可见元素（如<head>、display:none的元素）

(4) 布局（Layout/Reflow）

计算每个节点的精确位置和大小
确定所有元素的几何信息

(5) 绘制（Paint）

将渲染树转换为屏幕上的像素
分为多个图层进行绘制

(6) 合成（Composite）

将各图层合并为最终页面
处理透明、重叠等效果

9. 加载附加资源

处理页面中的其他资源：

解析到<img>、<script>、<link>等标签时
对每个资源重复上述HTTP请求过程
注意：
- JavaScript可能阻塞解析（除非标记async/defer）
- CSS不阻塞DOM构建但阻塞渲染

10. 执行JavaScript

处理脚本内容：

下载JS文件（如果是外部脚本）
解析和执行JavaScript代码
可能修改DOM/CSSOM（触发重排reflow或重绘repaint）
执行事件处理程序等

可视化流程总结

1. 输入URL → 2. DNS查询 → 3. TCP连接 → 4. TLS握手(HTTPS) → 5. HTTP请求 →
6. 服务器处理 → 7. HTTP响应 → 8. 浏览器渲染 → 9. 加载资源 → 10. 执行JS

标签

#java