浏览器输入URL到服务器响应的过程

当在浏览器输入URL后,会经历DNS解析、TCP三次握手建立连接、发送HTTP请求、服务器处理请求并返回数据、浏览器解析渲染页面、最后通过TCP四次挥手关闭连接。整个过程涉及DNS缓存、TCP连接的可靠性、HTTP请求与响应以及页面渲染的细节。

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

https://www.cnblogs.com/fundebug/p/what-happens-from-url-to-webpage.html

经典面试题:从 URL 输入到页面展现到底发生什么?

浏览器通过向 DNS 服务器发送域名,DNS 服务器查询到与域名相对应的 IP 地址,然后返回给浏览器,浏览器再将 IP 地址打在协议上,同时请求参数也会在协议搭载,然后一并发送给对应的服务器。接下来介绍向服务器发送 HTTP 请求阶段,HTTP 请求分为三个部分:TCP 三次握手、http 请求响应信息、关闭 TCP 连接。

¥¥¥¥¥¥¥¥¥¥¥¥¥4¥¥¥¥¥¥¥¥¥¥¥¥¥4¥¥¥¥¥¥¥¥¥¥¥¥¥4
1.DNS解析
DNS解析的过程就是寻找哪台机器上有你需要资源的过程,寻找的过程遵循就近原则。
输入一个网址并按回车的时候浏览器会根据输入的URL去查找对应的IP(就是根据输入的URL查找对应的IP),过程如下:

DNS根据域名查询IP地址的过程为:浏览器缓存 --> 操作系统缓存 --> 路由器缓存–>本地(ISP)域名服务器缓存 --> 根域名服务器。

2.进行TCP连接
这时候浏览器终于得到了IP以后,向服务器发送TCP连接,TCP连接经过三次握手。

3.浏览器发送HTTP请求
4.服务器处理请求
5.浏览器解析渲染页面
1)浏览器显示HTML
2)浏览器向服务器发送请求获取嵌入在HTML中的对象
3)浏览器发送异步(AJAX)请求

6.关闭TCP连接
当数据完成请求到返回的过程之后,根据Connection的Keep-Alive属性可以选择是否断开TCP连接。

TCP的断开与连接不一样,断开可以分为主动关闭和被动关闭,需要经过4次握手。

最后 当浏览器需要的全部数据都已经加载完毕,一个页面就显示完了。
————————————————
版权声明:本文为优快云博主「何敏华」的原创文章,遵

<think>我们正在回答用户关于“从浏览器输入URL到页面渲染的完整流程”的问题。用户提供了5个引用,我们需要参考这些引用,并结合我们的知识,给出完整的流程。根据引用[4]中提到的骨架,我们可以将整个流程分为以下几个主要步骤:1.浏览器接收URL并开启新进程2.解析URL3.DNS解析4.建立TCP连接(三次握手)5.发送HTTP请求6.服务器处理请求并返回响应7.浏览器接收响应并解析8.构建DOM树和CSSOM树,合并成渲染树,布局和绘制9.断开TCP连接(四次挥手)同时,引用[1][2]提到了JavaScript的加载、解析和执行会阻塞DOM的构建,引用[5]对加载、解析和渲染做了定义。因此,我们可以按照以下步骤详细描述:步骤1:浏览器进程处理-用户输入URL后,浏览器进程会进行处理。如果是URL,则准备发起网络请求。步骤2:解析URL-浏览器解析URL,提取协议、域名、端口、路径等信息。步骤3:DNS查询-浏览器将域名发送给DNS服务器,DNS服务器返回对应的IP地址(可能经过本地缓存、本地DNS服务器、根域名服务器等多层查询)。步骤4:建立TCP连接-浏览器根据IP地址和端口(默认为80或443)与服务器建立TCP连接(三次握手)。步骤5:发送HTTP请求-浏览器构建HTTP请求报文(包括请求行、请求头和请求体),通过TCP连接发送给服务器。步骤6:服务器处理请求并返回响应-服务器接收到请求后,根据请求路径和参数处理请求,生成HTTP响应(包括状态行、响应头和响应体),将资源(HTML、CSS、JS等)返回。步骤7:浏览器接收响应-浏览器接收到响应后,根据状态码(如200)判断请求成功,然后开始解析响应内容。步骤8:解析HTML构建DOM树-浏览器解析HTML文件,构建DOM树。这个过程是逐步进行的,浏览器从网络接收数据并解析。-在解析过程中,如果遇到外部资源(如CSS、图片、JS等),会并行下载这些资源(注意:JS可能会阻塞DOM解析)。步骤9:解析CSS构建CSSOM树-浏览器解析CSS文件(包括内联样式、外部样式表),构建CSSOM树。步骤10:合并DOM和CSSOM形成渲染树(RenderTree)-将DOM树和CSSOM树合并,排除不可见元素(如head、display:none的元素),形成渲染树。步骤11:布局(Layout/Reflow)-根据渲染树计算每个节点的几何位置和大小(布局)。步骤12:绘制(Paint)-将布局后的节点绘制到屏幕上(像素填充)。步骤13:合成(Compositing)-浏览器将各层合成,最终显示页面。步骤14:断开TCP连接(四次挥手)-当页面加载完成后,如果不需要保持连接,则会断开TCP连接(四次挥手)。注意:在解析HTML时,如果遇到JavaScript:-根据引用[1][2],当HTML解析器遇到JavaScript(无论是内联还是外链)时,会暂停DOM的解析,执行JavaScript代码。-但是,如果JavaScript代码中操作了CSS,而CSSOM尚未构建完成,则JavaScript的执行会被延迟,直到CSSOM构建完成(因为JavaScript可能依赖CSS样式)。-因此,JavaScript的执行会阻塞DOM解析,而CSS的加载和解析也会阻塞JavaScript的执行。另外,现代浏览器使用预解析(pre-scan)技术,在构建DOM的同时,提前下载外部资源(如CSS、JS、图片等),以优化性能。下面我们按照这个流程详细展开,并注意在关键步骤引用用户提供的引用内容。</think>### 浏览器输入URL到页面渲染完整流程 以下是浏览器输入URL到页面渲染的详细过程,包含网络请求、解析、渲染和脚本执行等关键环节: #### 1. **URL解析与准备阶段** - **URL分解**:浏览器解析协议(HTTP/HTTPS)、域名、端口和路径[^4] - **进程分配**:浏览器为新页面分配独立进程(通常每个标签页一个渲染进程) - **HSTS检查**:检查是否在HSTS列表,强制HTTPS连接(安全策略) #### 2. **网络请求阶段** 1. **DNS解析**: - 查询浏览器缓存 → 操作系统缓存 → 本地DNS服务器 → 递归查询至根域名服务器[^4] - 最终获取域名对应的IP地址(如 `www.example.com` → `192.0.2.1`) ```mermaid graph LR A[浏览器缓存] --> B[系统缓存] B --> C[路由器缓存] C --> D[本地DNS] D --> E[根域名服务器] ``` 2. **TCP连接**: - 三次握手建立TCP连接(SYN → SYN-ACK → ACK)[^4] - HTTPS额外进行TLS握手(交换证书、协商密钥) 3. **HTTP请求**: - 构建请求报文(请求行 + 头部 + 空行 + 可选的body) - 发送请求到服务器(如 `GET /index.html HTTP/1.1`) 4. **服务器响应**: - 服务器返回状态码(如200 OK)和响应体(HTML文件)[^3] - 包含响应头(Content-Type, Cache-Control等) #### 3. **解析与构建阶段** 1. **HTML解析与DOM构建**: - 字节流 → 字符流 → 令牌化 → 构建DOM树 - **关键特性**:增量解析(边下载边解析) ```html <!-- 示例:解析过程 --> <html> <body> <div>Hello</div> <!-- 解析到此即创建DOM节点 --> </body> </html> ``` 2. **CSS解析与CSSOM构建**: - 解析外部CSS文件/内联样式,构建CSSOM树(样式规则层级) - **阻塞规则**:CSS不阻塞DOM解析,但阻塞渲染[^5] 3. **JavaScript处理**: - 遇到 `<script>` 标签时: - 暂停DOM解析[^1][^2] - 下载并执行JS(若为外部脚本) - 执行完毕恢复DOM解析 - **优化机制**:`async/defer` 属性可改变阻塞行为 #### 4. **渲染与绘制阶段** 1. **渲染树合成**: - 合并DOM树和CSSOM树 → 生成渲染树(Render Tree) - 排除不可见节点(如`<head>`、`display:none`) 2. **布局(Layout/Reflow)**: - 计算元素几何信息(位置、尺寸) - 受CSS盒模型、浮动、定位等影响 3. **绘制(Paint)**: - 将布局结果转换为像素数据 - 分层绘制(不同层合成最终界面)[^5] - 触发重绘(颜色变化)或回流(几何变化) 4. **合成(Compositing)**: - GPU加速合成各图层 - 最终输出到屏幕显示 #### 5. **关键阻塞点与优化** | 阶段 | 阻塞行为 | 优化方案 | |---------------|----------------------------------|----------------------------| | CSS加载 | 阻塞渲染树合成 | 内联关键CSS,媒体查询 | | JS执行 | 阻塞DOM解析和后续渲染 | `async/defer`,代码分割 | | 图片加载 | 不阻塞解析但延迟布局完成 | 懒加载,尺寸预定义 | | 字体加载 | 可能导致FOUT/FOIT | `font-display: swap` | > **完整流程图**: > ``` > URL输入 → DNS解析 → TCP握手 → HTTP请求 → 接收响应 > → 解析HTML构建DOM → 解析CSS构建CSSOM > → 执行JavaScript(可能暂停解析) > → 合并渲染树 → 布局 → 绘制 → 合成显示 > ``` #### 6. **后续行为** - **异步资源加载**:图片、字体等非阻塞资源继续加载 - **事件触发**:触发 `DOMContentLoaded`(DOM就绪)和 `load`(所有资源加载完成)事件 - **保持连接**:HTTP/1.1默认keep-alive复用连接,HTTP/2支持多路复用 > 此流程解释了为何将CSS放在头部(尽早加载)而JS放底部(减少阻塞)[^1][^2][^5]。 --- ### 相关问题 1. **CSS加载为何会阻塞渲染?JavaScript执行如何影响DOM构建?** [深入解析阻塞机制与优化方案] 2. **现代浏览器如何通过预加载扫描器优化页面加载性能?** [探讨资源优先级、预连接、预渲染等机制] 3. **重排(Reflow)和重绘(Repaint)触发场景及优化策略有哪些?** [分析CSS属性影响、GPU加速、批量更新等技术]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值