浏览器从输入网址都看到网页都发生了什么?

本文详细阐述了TCP/IP连接的三次握手过程,包括客户端发送SYN数据包、服务端回应SYN/ACK以及客户端确认的ACK数据包。同时,介绍了连接成功后数据的传输、服务端处理及响应,以及断开连接的四次挥手过程,涉及客户端请求关闭、服务端确认、无数据传输的确认和最终的断开连接。此外,还提及了浏览器解析HTML、构建DOM树、CSS规则树以及渲染和执行JavaScript的相关步骤。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、域名解析成ip地址

2、客户端发送一个带有SYN标志的数据包给服务端(三次握手,第一次)

3、服务端收到后,回传一个带有SYN/ACK标志的数据包以示传达确认信息(三次握手,第二次)

4、客户端再回传一个带ACK标志的数据包,代表握手结束,连接成功(三次握手,第三次)

5、服务端处理数据并返回数据

6、客户端请求关闭连接(四次挥手,第一次)

7、服务端确认是否还有数据要传输(四次挥手,第二次)

8、服务端没有要传输的数据了,准备关闭连接(四次挥手,第三次)

9、客户端断开连接(四次挥手,第四次)

10、浏览器解析HTML,生成DOM树,解析CSS,生成CSS规则树

11、DOM树和CSS规则树合并成渲染树,开始渲染

12、执行JavaScript脚本

<think>我们正在回答用户关于“浏览器输入网址后的工作流程”的问题。根据用户提供的引用内容,我们需要整合这些信息并详细描述整个过程。同时,我们需要按照用户的要求,使用LaTeX格式的数学表达式(如果有必要的话),并生成相关问题。注意,虽然用户要求使用LaTeX,但在这个问题中,数学公式可能不会太多,但如果有计算过程(如DNS解析、TCP连接等)需要公式,则使用。 步骤概述: 1. 解析URL 2. DNS域名解析 3. 建立TCP连接(三次握手) 4. 发送HTTP请求 5. 服务器处理请求并返回HTTP响应 6. 浏览器解析渲染页面 7. 关闭TCP连接(四次挥手) 详细过程: 1. **解析URL**: 浏览器首先解析用户输入的URL,提取出协议(如http、https)、域名(如www.baidu.com)、端口(默认80或443)、路径(如/index.html)和查询参数等。 2. **DNS域名解析**: 将域名转换为IP地址。步骤包括: - 浏览器缓存:检查浏览器自身的DNS缓存。 - 操作系统缓存:如果浏览器缓存没有,则检查操作系统的hosts文件以及系统缓存。 - 路由器缓存:查询路由器缓存。 - ISP的DNS服务器:如果以上都没有,则向ISP(Internet Service Provider)的DNS服务器发起请求。如果ISP的DNS服务器没有,则会进行递归查询,从根域名服务器开始,依次查询顶级域名服务器(如.com)、权威域名服务器(如baidu.com)直到获得IP地址。 这个过程可以用递归查询来描述。设查询的域名为$D$,则查询过程为: $$ \text{本地DNS缓存} \rightarrow \text{系统缓存} \rightarrow \text{路由器缓存} \rightarrow \text{ISP DNS} \rightarrow \text{根域名服务器} \rightarrow \text{顶级域名服务器} \rightarrow \text{权威域名服务器} $$ 3. **建立TCP连接**: 获取到IP地址后,浏览器通过操作系统的网络协议栈向服务器发起TCP连接请求。TCP通过三次握手建立连接: - 第一次:客户端发送SYN包(序列号$x$)到服务器。 - 第二次:服务器返回SYN+ACK包(序列号$y$,确认号$x+1$)。 - 第三次:客户端发送ACK包(序列号$x+1$,确认号$y+1$)。 连接建立后,就可以进行数据传输。 4. **发送HTTP请求**: 浏览器构造一个HTTP请求报文,通过TCP连接发送给服务器。请求报文包括: - 请求行(方法、URL、协议版本) - 请求头(如Host、User-Agent、Accept等) - 请求体(如果有,如POST请求的数据) 5. **服务器处理请求并返回响应**: 服务器接收到请求后,根据请求的内容(如URL路径、参数等)处理请求,可能涉及后端应用程序、数据库操作等。处理完成后,服务器生成HTTP响应报文,包括: - 状态行(协议版本、状态码、状态描述) - 响应头(如Content-Type、Content-Length等) - 响应体(如HTML、CSS、JS等资源内容) 6. **浏览器解析渲染页面**: 浏览器收到响应后,根据响应头的Content-Type解析响应体。如果是HTML,则开始解析HTML,构建DOM树。同时,如果遇到CSS和JS资源,会发起新的请求(重复上述过程获取资源)。然后: - 解析CSS,构建CSSOM树。 - 结合DOM和CSSOM构建渲染树(Render Tree)。 - 布局(Layout):计算每个节点在屏幕中的位置和大小。 - 绘制(Painting):将节点绘制到屏幕上。 注意:JavaScript的执行可能会阻塞DOM解析,除非使用异步加载(如async或defer)。 7. **关闭TCP连接**: 数据传输完成后,需要断开TCP连接(四次挥手): - 第一次:客户端发送FIN包(序列号$u$)给服务器。 - 第二次:服务器发送ACK包(确认号$u+1$)。 - 第三次:服务器发送FIN包(序列号$v$)给客户端。 - 第四次:客户端发送ACK包(确认号$v+1$)给服务器。 等待一段时间后,连接关闭。 其他考虑: - 如果使用了HTTPS,在建立TCP连接后,还要进行TLS握手(交换密钥、验证证书等),然后再通过加密通道传输HTTP请求。 - HTTP/1.1中默认使用持久连接(Connection: keep-alive),所以一个TCP连接可以传输多个HTTP请求,而不用每次请求都重新建立连接。HTTP/2.0则更进一步,支持多路复用等特性。 生成相关问题: 1. 什么是DNS缓存,如何清除DNS缓存? 2. TCP三次握手和四次挥手的具体过程是怎样的? 3. 浏览器渲染页面的详细步骤是什么? 4. HTTPS在HTTP工作流程的基础上增加了哪些步骤? 5. 如何优化网页加载速度? 现在,我们将上述内容组织成回答。</think>### 🌐 浏览器输入网址后的完整工作流程 当你在浏览器输入 `https://www.example.com` 并回车时,系统级流程如下(按时间顺序): --- #### 1. **URL 解析与预处理** - 浏览器解析 URL 结构: $$ \text{协议} + \text{域名} + \text{端口} + \text{路径} \quad (e.g., \ \text{https://www.example.com:443/home}) $$ - 自动补全协议(如 `http://`)或端口号(HTTP 默认为 80,HTTPS 为 443)[^1][^2]。 --- #### 2. **DNS 域名解析** 将域名转换为 IP 地址,查询顺序: ```mermaid graph LR A[浏览器缓存] --> B[操作系统缓存] B --> C[Hosts 文件] C --> D[本地 DNS 服务器] D --> E[根域名服务器] E --> F[顶级域名服务器 .com] F --> G[权威域名服务器 example.com] ``` - 最终获得目标服务器 IP(如 `93.184.216.34`)[^2][^3]。 --- #### 3. **建立 TCP 连接(三次握手)** ```mermaid sequenceDiagram 客户端->>服务器: SYN(序列号=x) 服务器->>客户端: SYN-ACK(序列号=y, 确认号=x+1) 客户端->>服务器: ACK(序列号=x+1, 确认号=y+1) ``` - 若为 HTTPS,在 TCP 连接后立即启动 **TLS 握手**(交换密钥、验证证书)[^1][^4]。 --- #### 4. **发送 HTTP 请求** 浏览器构造 HTTP 请求报文并通过 TCP 连接发送: ```http GET /home HTTP/2.0 Host: www.example.com User-Agent: Chrome/125.0 Accept: text/html Cookie: session_id=abc123 ``` - 若为 HTTP/2.0,请求会被二进制分帧传输[^1][^3]。 --- #### 5. **服务器处理与响应** - 服务器接收请求后: - 解析请求头 - 执行后端逻辑(如数据库查询) - 生成 HTTP 响应(状态码 + 数据) ```http HTTP/2.0 200 OK Content-Type: text/html Cache-Control: max-age=3600 <!DOCTYPE html> <html>...</html> ``` - 若页面包含子资源(CSS/JS/图片),浏览器重复步骤 3-5 发起新请求[^1][^4]。 --- #### 6. **浏览器渲染页面** 解析响应内容并渲染: ```mermaid flowchart TB A[解析 HTML → 构建 DOM 树] --> B[解析 CSS → 构建 CSSOM 树] --> C[合并 DOM+CSSOM → 渲染树] --> D[布局 Layout] --> E[绘制 Painting] ``` - **关键过程**: - JavaScript 执行可能阻塞渲染(需用 `async/defer` 优化) - 图片等资源异步加载[^1][^3]。 --- #### 7. **关闭 TCP 连接(四次挥手)** ```mermaid sequenceDiagram 客户端->>服务器: FIN(序列号=u) 服务器->>客户端: ACK(确认号=u+1) 服务器->>客户端: FIN(序列号=v) 客户端->>服务器: ACK(确认号=v+1) ``` - HTTP/1.1 默认启用 `Keep-Alive` 复用连接,避免重复握手[^4]。 --- ### ⚡ 性能优化关键点 1. **DNS 预解析**:`<link rel="dns-prefetch" href="//cdn.example.com">` 2. **TCP 复用**:HTTP/2.0 多路复用减少连接数 3. **资源压缩**:Gzip/Brotli 压缩 HTML/CSS/JS 4. **缓存策略**:`Cache-Control` 头减少重复请求 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值