输入URL之后，都发生了什么

前言当我们在浏览器导航栏输入URL网址之后按下回车enter就会跳转到这个页面。从输入URL开始后面都发生了什么让我们聚焦 “浏览器地址栏输入 URL 并回车” 这一日常操作拆解背后从网络解析到页面渲染的全链路技术流程覆盖 HTTP/HTTPS、TCP、DNS、浏览器缓存 / 渲染等核心知识点这既是技术科普也是面试高频考点梳理。一、URL解析浏览器第一步会对输入的 URL 进行结构化拆解明确请求的协议、目标服务器、资源位置等关键信息这是整个网络流程的起点。比如https://www.example.com:8080/blog/article?id123page2#comment-456组成部分示例内容代表含义协议 (Scheme)https通信协议这里是加密的 HTTPS比 HTTP 更安全也可以是http/ftp等域名 (Domain)www.example.com要访问的服务器 “名字”相当于网络里的 “门牌号”后续会通过 DNS 解析成 IP 地址端口 (Port):8080服务器上的服务入口HTTPS 默认是443HTTP 默认是80这里显式指定了8080如果 URL 里没写就用协议默认端口路径 (Path)/blog/article要访问的服务器资源路径对应 “文件夹 / 文件” 结构这里表示要访问博客的文章页面查询参数 (Query)?id123page2传给服务器的指令 / 数据用分隔多个参数这里表示 “查看 id123 的文章显示第 2 页”片段 (Fragment)#comment-456页面内定位不会发给服务器这里表示页面加载后直接跳转到 id 为comment-456的评论位置✅提问URL 中的片段#会发送给服务器吗答不会仅用于浏览器页面内定位不参与网络请求。二、浏览器检查缓存URL 解析完成后浏览器不会直接发起网络请求而是会优先检查本地缓存比如浏览器、电脑里的旧资源。✅目的避免重复请求、提升页面加载速度、节省网络资源。如果缓存里有最新的资源直接用缓存后面的步骤就省了没命中缓存才继续下一步。✅提问浏览器为什么要先检查缓存再发起网络请求答减少重复网络请求加快页面加载节约网络资源。三、DNS域名解析当本地缓存未命中时浏览器仅拥有域名无法直接与服务器通信网络通信依赖 IP 地址因此需要通过 DNS 服务将域名转换为服务器的 IP 地址。DNSDomain Name System域名系统所谓DNS域名查询解析就是域名 → IP地址核心逻辑DNS是解析是“就近查、优先用缓存”先查自己浏览器→ 电脑 → 家里 / 公司路由器 → 运营商 最后才查互联网的 “根服务器”。✅目的让 DNS 解析尽可能快同时减轻根服务器的压力。是一套「尽量少跨网、优先用缓存」的优化策略。✅提问1. 问DNS 解析的核心目的是什么答把域名转换为服务器 IP 地址实现网络通信。2. 问DNS 解析为什么采用「优先缓存、就近查询」策略答加快解析速度减轻根服务器压力。四、建立TCP连接当DNS解析完成拿到IP地址的时候浏览器会自动开始跟TCP建立连接HTTP/HTTPS都基于TCP1.TCP三次握手TCP 是可靠的面向连接的传输协议必须通过「三次握手」确认双方能正常收发数据才能建立连接。在浏览器访问网站的场景下客户端就是你本地电脑上运行的浏览器进程比如 Chrome、Edge它主动发起 TCP 连接请求。服务端就是你要访问的目标网站服务器比如百度、淘宝的远程服务器它被动等待并接受连接。在TCP中「客户端 / 服务端」是连接角色不是固定的硬件客户端主动发起连接的一方谁先喊「我要连接」谁就是客户端服务端被动监听、接受连接的一方谁在等别人来连谁就是服务端✅三次握手的核心目的确认客户端和服务端的「发送、接收」能力均正常。第一次握手客户端浏览器发 “请求连接” 的包告诉服务器 “我要连你”。第二次握手服务器回复 “同意连接 确认收到”告诉客户端 “我能接也能发”。第三次握手客户端再回复 “确认”双方连接正式建立。✅提问TCP 三次握手的核心目的是什么答确认客户端和服务端的发送、接收能力都正常。2.HTTPS场景TLS握手了解如果是https://协议TCP 三次握手的连接建好后会多一步 TLS 握手。HTTPS 为实现数据加密传输会在 TCP 三次握手完成后立即进行 TLS 握手并在 TCP 四次握手之前关闭 TLS 加密会话。也就是说HTTPS在 HTTP 外面套一层 TLS走 TCP 传输。目的是① 验证服务器身份防止中间人攻击② 协商加密规则加密套件和会话密钥保证后续数据传输不被窃听③ 建立加密通道后续所有 HTTP 数据都会被加密传输HTTPSHTTPTLS 加密✅提问HTTPS 比 HTTP 多了哪一步关键流程作用是什么答多了 TLS 握手实现数据加密传输防止窃听和中间人攻击。五、浏览器发起请求HTTP请求报文TCPTLS连接建立好之后浏览器会给服务器发送HTTP 请求告诉服务器我要访问哪个页面、我用的什么浏览器、需要什么格式的内容。HTTPS 场景下该报文还会被 TLS 加密后再通过 TCP 传输确保数据传输安全。1. HTTP请求报文Request的组成HTTP 请求报文整体由请求行、请求头、空行、请求体四部分组成且空行是必备项用于明确分隔请求头和请求体即使没有请求体空行也不能省略。组成通俗解释请求行核心指令请求方法GET/POST 为主 资源路径 HTTP 版本比如 GET /blog/article HTTP/1.1请求头额外信息比如告诉服务器 “我是 Chrome 浏览器”“我要 JSON 格式数据”常用的有 Host访问的域名、User-Agent客户端信息、Cookie登录信息空行分隔请求头和请求体必须有请求体可选POST 请求用比如登录时传的账号密码GET 请求一般没有1.1 请求行最开头一行写三件事用什么方式请求、要哪个资源、用的 HTTP 版本。即请求方法 URL HTTP版本例GET /blog/article?id123page2 HTTP/1.1地址不包含#后面的锚点那部分浏览器自己留着用请求方法GET获取资源POST提交数据PUT更新或创建指定资源DELETE删除资源PATCH部分更新HEAD只获取响应头不返回 bodyOPTIONS查询服务器支持的方法1.2 请求头Headers键值对用来描述请求的额外信息比如类型、长度、认证例Authorization: Bearer xxx带身份凭证证明是合法用户Content-Type: application/json声明数据格式让服务器正确解析请求体常见的请求头Request Headers字段字段示例说明通俗理解Hostexample.com请求目标主机告诉服务器你要访问哪一个网站。User-AgentMozilla/5.0客户端信息告诉服务器你用的是什么客户端。Acceptapplication/json希望返回的数据类型告诉服务器我希望你返回什么格式的数据给我。AuthorizationBearer token携带认证信息身份凭证告诉服务器 “我是谁我已经登录了”。CookieuserId100携带 Cookie把服务器之前存在你浏览器里的小数据再带回给服务器。Content-Typeapplication/json请求体格式告诉服务器我传给你的请求体是什么格式。Refererhttps://google.com来源页面防盗链告诉服务器我是从哪个页面跳过来的。这些请求头不是每个请求都必须带而是浏览器 / 客户端根据场景自动决定要不要加只有需要时才会出现其中Host基本是必带的。1.3 空行必须有用来隔开请求头和请求体告诉服务器 “头信息结束了”1.4 请求体(Body可选)用来放要传给服务器的数据、登录、发帖子这种 POST 请求作为参数的账号密码 / 内容放这里✅提问1. 问GET 请求和 POST 请求在请求体上有什么区别答GET 一般无请求体POST 有请求体用于提交账号密码等数据。2. 问HTTP 请求报文中的空行可以省略吗答不可以必须有用于分隔请求头和请求体。2. 浏览器给example.com的服务器发了一条消息POST /api/login HTTP/1.1 Host: example.com User-Agent: Mozilla/5.0 Content-Type: application/json Content-Length: 35 {username: Ryne, password: 123}通信规则用 POST 请求方法调用/api/login登录接口基于 HTTP/1.1 协议向example.com服务器发起请求。请求头说明包含 Host、User-Agent、Content-Type、Content-Length 等信息给服务器补充请求的目标是example.com网站、客户端信息告知服务器本次请求来自浏览器、数据格式JSON 格式需按 JSON 规则解析后续提交的业务数据和请求体的字节长度为 35。空行分隔请求头和请求体之间的空行是 HTTP 协议强制要求用来划分请求头和请求体的边界。核心逻辑通过 JSON 格式的请求体{username: Ryne, password: 123}向服务器提交用户的登录账号和密码服务器校验后返回登录结果。六、服务器响应HTTP请求HTTP响应报文经过TCP传输服务器收到浏览器发送的 HTTP 请求后会解析请求、执行业务逻辑如验证登录账号密码处理完成后返回HTTP 响应报文告知浏览器对于该请求的处理结果。HTTPS 场景下该报文同样会经 TLS 加密后传输浏览器接收后先解密再解析。1. HTTP响应报文Response的组成组成通俗解释状态行处理结果HTTP 版本 状态码 描述比如 200 OK 表示成功404 Not Found 表示资源不存在响应头服务器的额外信息比如返回内容是 HTML、设置 Cookie空行分隔响应头和响应体必须有响应体核心内容传统网站返回完整 HTMLVue/React 项目只返回 “空骨架”后续加载 JS 填内容1.1 状态行表示请求处理的结果HTTP版本 状态码 状态描述示例HTTP/1.1 200 OKHTTP/1.1 404 Not Found状态码 记分类就行分类范围含义常见示例1xx100–199信息性表示请求已接收继续处理2xx200–299成功200请求成功3xx300–399重定向301永久跳新地址、302 临时跳转、304用本地缓存4xx400–499客户端错误401没登录、404资源不存在5xx500–599服务器错误500服务器出问题✅提问问重定向类3xx是什么答请求资源的地址有问题是「重定向 / 缓存提示」属于正常的业务跳转服务器没出错、浏览器也没出错。如果是301就是说原来的旧地址不用了服务器会将返回一个新地址浏览器会记住这个跳转下次再输旧网址会直接访问新地址不再问服务器。如果是302旧地址还能用暂时让你去旧地址还能用、只是暂时让你去别的地方比如未登录访问个人中心服务器临时让你跳登录页下次再访问旧地址依旧会先请求服务器不会直接跳过。如果是304它和 “地址更换” 没关系只是服务器说你本地缓存的文件还是最新的别重新下载了直接用本地的1.2 响应头Headers用于传递服务器关于响应的元数据信息等示例Content-Type: application/jsonSet-Cookie: sessionidabc123Cache-Control: max-age3600常见响应头Response Headers字段示例说明Content-Typetext/html返回内容类型Content-Length1024返回体长度Cache-Controlmax-age3600缓存策略Set-Cookiesessionabc123设置 CookieAccess-Control-Allow-Origin*允许跨域访问ETaga1b2c3内容唯一标识缓存验证特殊头部CORS 跨域相关Access-Control-Allow-Origin缓存控制ETag、Last-Modified、强缓存有效期内完全不发请求直接读缓存性能最优、零网络开销Cache-Control、Expires协商缓存每次都发请求验证后决定是否读缓存精准控制、避免过期资源1.3 空行必须有用来隔开响应头和响应体告诉服务器 “头信息结束了”1.4 响应体不同于api接口请求在导航栏输入URL的这种场景下HTTP响应报文的响应体是HTML而这个HTML会分为两种情况传统的网站服务器直接把整个页面内容全部拼好返回给你——文字、列表、图片路径、甚至表格数据全都写在 HTML 里浏览器拿到直接渲染就能看到完整页面现代Vue/React前后端分离网站返回的是HTML的完整骨架内容等JS加载完填充进去而决定响应体返回的是传统HTML、Vue、React是由部署在服务器的前端静态文件当浏览器访问URL时服务器会直接读取这个部署好的index.html文件原封不动的返回给浏览器。2. 最终浏览器收到响应报文的示例2.1 传统html# 1. 状态行固定第一行 HTTP/1.1 200 OK # 2. 响应头键值对 Server: nginx/1.21.6 Content-Type: text/html; charsetutf-8 Content-Length: 320 Cache-Control: max-age3600 # 3. 空行必备分隔符 # 4. 响应体完整HTML页面渲染的核心数据 !DOCTYPE html html head meta charsetUTF-8 title博客页面/title /head body h1我的博客/h1 p这是文章内容/p /body /html通信规则返回 200 成功响应服务器用 Nginx内容是 UTF-8 编码的 HTML。缓存策略max-age3600表示缓存 1 小时提升重复访问的加载速度。完整内容HTML 里直接写满了页面所有文字、标签是完整的页面代码。核心逻辑服务器直接把完整页面一次性发给浏览器浏览器拿到后直接渲染显示无需额外下载 JS。2.2 Vue版本# 1. 状态行 HTTP/1.1 200 OK # 2. 响应头 Server: nginx/1.21.6 Content-Type: text/html; charsetutf-8 Content-Length: 280 Cache-Control: no-cache # 3. 必备空行 # 4. 响应体Vue 完整空白骨架HTML !DOCTYPE html html langzh-CN head meta charsetUTF-8 titleVue 项目/title /head body !-- Vue 根节点内容由JS动态渲染 -- div idapp/div !-- 加载Vue核心JS -- script src/js/app.js/script /body /html通信规则返回200 成功响应服务器用 Nginx内容是 UTF-8 编码的 HTML。缓存策略no-cache 表示不缓存确保用户每次都能拿到最新的前端代码。空壳骨架HTML 里只有一个空的 div idapp 容器没有任何页面文字它只是一个占位符。核心逻辑通过 script src/js/app.js 让浏览器去下载 Vue 核心代码。代码加载完成后会自动把动态内容渲染到 div idapp 这个盒子里。2.3 React版本# 1. 状态行 HTTP/1.1 200 OK # 2. 响应头 Server: nginx/1.21.6 Content-Type: text/html; charsetutf-8 Content-Length: 290 Cache-Control: no-cache # 3. 必备空行 # 4. 响应体React 完整空白骨架HTML !DOCTYPE html html langzh-CN head meta charsetUTF-8 titleReact 项目/title /head body !-- React 根节点内容由JS动态渲染 -- div idroot/div !-- 加载React核心JS -- script src/js/main.js/script /body /html通信规则返回 200 成功响应服务器用 Nginx内容是 UTF-8 编码的 HTML。缓存策略no-cache表示不缓存确保用户每次都能拿到最新的前端代码。空壳骨架HTML 里只有一个空的div idroot容器没有任何页面文字它只是一个占位符。核心逻辑通过script src/js/main.js让浏览器去下载 React 核心代码。代码加载完成后会自动把动态内容渲染到div idroot这个盒子里。七、浏览器渲染服务器返回完整的HTTP 响应报文后浏览器会先解析报文结构通过空行分隔响应头和响应体提取响应体中的完整 HTML 文件传统页面 / Vue/React 骨架以此为核心原材料执行固定的渲染流程最终将页面展示在屏幕上。传统网站 HTML 响应体包含完整页面内容直接解析、渲染完成后就能看到页面Vue/React 项目框架的 HTML 响应体仅为空白骨架如div idapp/div解析、渲染完成后需加载 JS 代码由 JS 动态生成页面内容并完成二次渲染。✅ 核心最终把代码转换成咱们能看的可视化页面。完整流程图如下✅提问1. 问图层的分层、合并是什么为什么有这一步答浏览器会根据页面的情况将绘制好的内容拆分为多个独立的渲染图层完成布局和绘制后会按照特定的堆叠顺序将这些图层叠加、合并成一张完整的图像并最终显示在屏幕上。拆分图层可以让浏览器单独处理需要重新渲染的部分提高性能视频、3D变换......会在独立的图层、GPU可以更加高效的合成到画面上保证画面不卡顿。2. 问现代 Vue/React 项目的 HTML 响应体和传统网站有什么不同答Vue/React 仅返回空白骨架内容由 JS 动态填充传统网站返回完整页面内容。八、TCP断开连接页面加载完后TCP并不会立即断开连接HTTP/1.1默认持久连接 (Keep-Alive)支持多个请求复用同一个 TCP 连接因为可能后续还有网络请求。只有满足以下任一条件才会断开连接空闲超时页面加载完成后闲置几十秒没有任何请求服务器主动关闭服务器设置了最大连接时间 / 次数手动关闭你关闭网页、关闭浏览器所有请求彻底结束没有任何资源需要加载了否则TCP会一直连接并保持空闲等待可能的新请求✅提问为什么TCP不会立即断开答页面可能还需要加载后续资源图片、接口请求、JS 异步数据TCP 建立三次握手 断开四次挥手很消耗性能保持连接能避免重复握手提升速度HTTPS 场景TLS 挥手了解按照 TLS 规范数据传输完成 → 先进行 TLS 挥手 → 再执行 TCP 四次挥手TLS 挥手双方发送close_notify告警安全结束加密会话避免被判定为截断攻击实际生产环境Nginx、浏览器等为提升性能通常省略 TLS 挥手数据传输完成后直接发起 TCP 四次挥手数据传输完成后TCP 连接需要通过「四次挥手」安全断开因为 TCP 是全双工双方都要关闭各自的发送通道TCP四次挥手核心记 “全双工分步关闭”TCP 是双向传输全双工关闭时要分别关闭双方的发送通道所以需要 4 步客户端说 “我没数据要发了关我的发送通道”服务器回复 “收到我这边准备关”服务器说 “我也没数据了关我的发送通道”客户端回复 “收到确认关闭”等待片刻后连接彻底断开。当TCP彻底断开连接标志着从输入URL开始的这个网络通信流程正式结束。HTTPS 场景下会先关 TLS 加密会话再走 TCP 四次挥手了解即可✅提问1. 问为什么建立连接是三次握手关闭连接却是四次挥手答三次握手服务端可以把 SYN同意连接 和 ACK确认请求 合并成一个包发送所以少一次。四次挥手服务端收到客户端的 FIN 后只能先回复 ACK 确认等自己数据也发完了才能再发 FIN 关闭自己的通道两个步骤无法合并因此需要四次。问TCP 四次挥手的核心原因是什么答TCP 是全双工需分别关闭双方的发送通道分步断开更安全。总结从输入 URL 到页面显示核心流程就 8 步URL解析 → 检查本地缓存 → DNS域名解析 → TCP连接 → 浏览器发出HTTP请求 → 服务器返回响应 → 浏览器渲染页面 → 满足条件后TCP断开连接✅需要掌握的浏览器查询缓存的完整过程缓存和 DNS 解析的共同优化策略是 “优先本地提升速度”HTTP请求 / 响应报文的核心组成常见的请求头、响应头字段HTTPS 相比 HTTP 多了什么关键步骤TCP三次握手建连接、四次挥手断连接的流程与目的浏览器渲染的核心逻辑和过程。整个过程其实就是计网课上学的 “应用层HTTP→ 传输层TCP→ 网络层IP/DNS” 的实际落地把知识点串起来就很好理解啦