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

最新推荐文章于 2025-04-30 02:36:52 发布
最新推荐文章于 2025-04-30 02:36:52 发布
阅读量130 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： web 文章标签： 前端 javascript css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Web_S/article/details/125892798
本文详细阐述了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脚本

从浏览器输入网址(URL)，到最终展示页面，都发生了什么？
CYK_byte的博客
11-01 4011
从（如下图）到你按下回车，再到最后出现这个网页界面（如下图）中间到底发生了什么？接下来就带你一步步进行解析~
经典面试题：输入网址后会发生什么？
doreen211的博客
10-30 699
从输入网址到看到网页中间经历了什么？“是一个常见面试题，这个问题贯穿了整个网络系统，对回答者的网络综合素质要求较高。本文中对此问题的大致流程进行较细致的阐述，但篇幅有限，其中仍有一些细节性的知识需要读者自行查阅。
浏览器从输入网址到看到网页发生了什么
weixin_59168532的博客
07-12 407
浏览器从输入网址都看到网页都发生了什么？1、域名解析成ip地址2、客户端发送一个带有SYN标志的数据包给服务端（三次握手，第一次）3、服务端收到后，回传一个带有SYN/ACK标志的数据包以示传达确认信息（三次握手，第二次）4、客户端再回传一个带ACK标志的数据包，代表握手结束，连接成功（三次握手，第三次）5、服务端处理数据并返回数据6、客户端请求关闭连接（四次挥手，第一次）7、服务端确认是否还有数据要传输（四次挥手，第二次）8、服务端没有要传输的数据了，准备关闭连接（四次挥手，第三次）9、客户端断开连接（四
从输入网址到看到网页发生了什么？
tyxjolin的专栏
04-01 1469
从输入网址到看到网页的整个过程，其实是一个非常复杂的过程，涉及到了多个环节和技术。首先，浏览器需要解析URL，建立TCP连接，并发送HTTP请求；然后，Web服务器收到HTTP请求后，生成HTTP响应，返回给浏览器；最后，浏览器根据HTTP响应的内容，进行渲染和交互处理，最终呈现给用户。在这个过程中，涉及到了多个重要的技术，例如DNS解析、TCP协议、HTTP协议、HTML、CSS、JavaScript等。
输入一个网址到网页过程中都发生了什么？
weixin_45639224的博客
10-03 3902
输入一个网址到网页过程中都发生了什么？
【计算机网络】在浏览器中输入网址，直到显示出网页内容的整个过程中都发生了什么？
sinat_21791203的专栏
04-13 617
1.在输入URL之后，浏览器会按照一定的规则分析这个网址，包括使用的协议、服务器的域名以及要访问的文件； 2.接下来会根据解析内容生成请求消息，比如使用的是HTTP协议，则会生成HTTP请求报文，同时会通过DNS解析出服务器域名对应的IP地址； 3.随后会委托协议栈发送生成的请求消息； 4.协议栈会将从浏览器接收到的消息打包，加上目的地址等控制信息，在传输过程中还包括了重传错误的包、丢失的包以及进行一些流量控制和拥塞控制等操作； 5.协议栈会将包交给网卡，网卡会将包转换为电信号并通过网线发送出去；
浏览器中输入网址到看到网页内容经历了哪些过程
h295928126的博客
09-20 2813
浏览器中输入网址到看到网页内容经历了哪些过程
前端面试：浏览器输入网址后发生了什么？
小隐的博客
04-25 1415
从前端面试题出发分析一系列知识点 大致来看，从输入url到网页显示会经历下列五个阶段 将url转换为ip地址 同服务器进行通信 获取网页内容 浏览器进行渲染 断开通信 下面来具体分析每个阶段都做了什么，因为是一道非常经典的前端面试题，并且覆盖面非常广，所以尽量做到深挖知识要点。有些可以单独写文章的地方会用黄色记号标记，之后会用文章链接替代！ #1. url到ip地址的转换 —— DNS解析 为了向www.baidu.com发送请求，必须获得www.baidu.com的ip地址，理所当然应该使用DNS去
从在浏览器的输入框输入一个网址，到看到网页的内容，这个过程中发生了什么？
NitefullSand
05-15 1546
https://www.cnblogs.com/ouyang99-/p/10284271.html 从在浏览器的输入框输入一个网址，到看到网页的内容，这个过程中发生了什么？ 当在浏览器地址栏输入网址，如：www.baidu.com后浏览器是怎么把最终的页面呈现出来的呢？这个过程可以大致分为两个部分：网络通信和页面渲染。 一、网络通信 互联网内各网络设备间的通信都遵循TCP/IP协议，利用TCP/IP协议族进行网络通信时，会通过分层顺序与对方进行通信。分层由高到低分别为：应用层、...
浏览器中输入URL后发生了什么？
qq_45859087的博客
07-31 4152
浏览器中输入URL后发生了什么？DNS域名解析使用IP协议、ARP协议、OSPF等协议将消息上传到服务器上客户端和服务端建立连接客户端发送HTTP请求服务端响应HTPP请求浏览器解析html代码，并请求HTML代码中的资源断开TCP连接浏览器对页面进行渲染呈现给用户 在浏览器中输入URL后，执行的全部过程、也就是一次http请求的过程 DNS域名解析 1.DNS域名解析协议 DNS协议的产生主要是IP地址不便记忆，在TCP／IP协议中、起初有一个叫做主机识别码的机制，这种的识别的方式指的是为每一台计算机都
当输入网址后，到网页显示，期间发生了什么
小金的博客
07-22 717
当输入网址后，到网页显示，期间发生了什么，你想知道数据包在中间经过了什么吗，仔细看看，对你应该会有帮助，干货建议反复阅读
笔记整理:当在浏览器上输入完地址后看到页面这个过程发生了什么?
neverlandkk的博客
03-23 111
dns解析 把域名转换为IP地址的过程客户端先检查本地是否有对应的IP地址，若找到则返回响应的IP地址。若没找到则请求上级DNS服务器，直至找到或到根节点。 向服务器发送一次HTTP请求（要一个东西） 服务器会在它的磁盘上找到一个对应的文件给到客户端（一般来说是html，jpg，png，css，js等等） 浏览器将根据已接受的文件将代码或图片解析成可视的图片 ...
H5 经典面试题 从输入网址到看到页面内容,其中都发生了什么
a305292690的博客
07-12 348
最近很多小伙伴都说总是碰到一个面试题,不知道该怎么回答,那是什么问题这么棘手呢,这道面试题就是问,''当在浏览器上输入url之后,直到看到页面中间都是发生了什么''。 这道题看似平常，但实际是考验一个前端工程师对浏览器和服务器交互的理解。今天在这里简单说一些其中的过程，不喜勿喷！！ 1、浏览器的地址栏输入URL并按下回车。 ———— 包含协议名、域名、端...
一个页面从输入 URL 到页面加载显示完成，这个过程中都发生了什么
娃娃鱼的博客
04-12 676
从用户在浏览器中输入URL到页面加载显示完成，整个过程涉及多个步骤，包括域名解析、TCP连接建立、HTTP请求与响应、页面渲染等。
TCP三次握手和四次挥手简述
weixin_42601148的博客
11-03 247
三次握手、四次挥手 三次握手：客户端与服务端传输数据 第一次：客户端向服务端发送消息，此信息主要确定的是服务端是否处于运行状态，传输内容包括（标识为0，协议为syn） 注：syn：同步序列编号（Synchronize Sequence Numbers），是TCP/IP建立连接时使用的握手信号。 第二次：服务端向客户端发送消息，此信息主要是告诉客户端，服务器处于运行状态，传输内容包括（标识为0+1，协议为syn+ack）当客户端接收到此消息后，客户端与服务端就处于连接状态 注：ACK (Acknowledge
计算机网络——键入网址到网页显示，期间发生了什么？
S_ZaiJiangHu的博客
04-30 600
服务器接收到客户端发来的密文之后，会用自己的私钥对其进行非对称解密，解密之后得到客户端密钥，然后用客户端密钥对返回数据进行对称加密，这样数据就变成了密文。客户端收到服务器端的数字证书之后，会对其进行检查，如果不通过，则弹出警告框。服务器必须要有一套数字证书，可以自己制作，也可以向组织申请，区别就是自己颁发的证书需要客户端验证通过。客户端收到服务器发返回的密文，用自己的密钥（客户端密钥）对其进行对称解密，得到服务器返回的数据。客户端会发起HTTPS中的第二个HTTP请求，将加密之后的客户端密钥发送给服务器。
从输入URL到页面展示到底发生了什么
qq_38470315的博客
04-18 996
刚开始写这篇文章还是挺纠结的，因为网上搜索“从输入url到页面展示到底发生了什么”，你可以搜到一大堆的资料。而且面试这道题基本是必考题，二月份面试的时候，虽然知道这个过程发生了什么，不过当面试官一步步追问下去的，很多细节就不太清楚了。本文的目的是通过输入url之后发生的事情来做知识的总结和扩展。所以文章可能会很杂。
【面试常问之网络】在浏览器上输入一个网址后，发生了什么？/HTTP的工作流程/DNS域名解析过程
m0_52165864的博客
08-14 8306
在浏览器中输入url并且获取响应的过程，其实就是浏览器和该url对应的服务器的网络通信过程。就比如在浏览器中输入：www.baidu.com，那么会返回一个百度搜素的界面，这其实就是浏览器和百度服务器之间的网络通信过程。浏览器就是客户端，用于发出请求，而百度的服务器就是服务器，用于接收并响应请求。......
当键入网址后，到网页显示，其间发生了什么？
小林coding
03-16 8885
你知道「当键入网址后，到网页显示，其间发生了什么」吗？这常见的问题，我用 25 张图给你说明白！
输入网址时和输入后浏览器都发生了什么
最新发布
07-19
<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、付费专栏及课程。

余额充值