浏览器输入一处网址的时候,会发生什么事情

当在浏览器中输入网址,首先会判断是否为域名并进行DNS查询找到主机号,接着通过TCP三次握手建立连接,请求数据。后台接收到请求后处理业务逻辑,如读取静态文件。最后,浏览器接收数据,解析HTML构建DOM树,同时加载CSS和JavaScript,完成页面渲染。

浏览器输入一处网址的时候,会发生什么事情

1.请求部分

  1. 首先判断请求的地址是不是一个域名,如果是域名,则进入步骤2
  2. 地址是一个域名,需要向DNS服务器进行查询域名所对应的主机号,因为只有主机号才能找到互联网中的主机,首先确定采取的是运输层的UDP协议,即应用层发一个报文下去UDP发送请求
    • DNS查询的时候,会优先向本地域名服务器进行查询(可能不止一个),如果查询不到的话,会采用递归查询的方式向另外一个本地域名服务器进行请求。(递归即域名服务器会进行代理查询)。
    • 如果查询不到的话,会向权限域名服务器进行查询,权限域名服务器采取迭代查询的方式,即如果没有对应关系的话,会找到下一台权限域名服务器的地址返回给客户端,由客户端开启另外的UDP请求
  3. 拿到ip地址后。先明确输入地址是一个get请求,以http为例吧,会将请求加上请求头,然后转为字节流传到运输层,然后发送TCP请求。
  4. TCP首先要进行三次握手创建连接状态。建立连接后,将应用层下来的字节流根据大小封装成TCP数据包,然后进行传输,采用滑动窗口的形式进行传输数据。
  5. 服务端的TCP接受到所有数据后,会将字节流按正确的顺序合并在一起,然后进行协议升级,确认是http协议,根据端口发送到对应的后台应用。

2.后台部分

  1. 后台应用拿到请求头,根据url路径,在后台的router里面判断是对应哪个方法,如果是文件读取的话,会根据url读取对应的静态文件,以字节流的方式写回到TCP进行返回数据。

3.页面渲染部分

  1. 浏览器拿到所有数据后,TCP进行四次挥手结束会话。
  2. 解析HTML文件,将HTML转为DOM树,遇到css的话,阻塞去请求css文件。在加载完一个css的时候会跟dom树进行渲染,所以在加载的过程中会发生页面布局的重排和重绘。
  3. 加载script标签,由同步加载、异步加载。其中异步加载还分为加载完毕后直接执行、等到文档加载完毕后再执行。
  4. 文档加载完毕后,调用DOMContentLoaded事件
  5. 所有资源文件加载完毕后,调用window.onload事件
<think> 嗯,用户想了解输入域名回车后的完整过程。这个问题看似常见,但涉及计算机网络多个核心层面,需要系统性地梳理。 用户提供的四个引用材料很有价值,特别是引用[3]的八个步骤框架非常清晰,但需要补充技术细节。引用[1]提到的DNS解析比喻和引用[4]的路由缓存机制也值得整合。 考虑从物理操作到最终渲染的完整链路展开: 首先必须强调DNS解析的细节,包括浏览器缓存→hosts文件→本地DNS服务器的查询顺序,这点引用[4]的路由缓存描述很准确。TCP三次握手部分要解释SYN/ACK包交换过程,但避免术语堆砌。 注意到引用[2]提到HTTP请求头细节容易被忽略,比如User-Agent和Accept字段,这部分对理解浏览器行为很重要。页面渲染环节需要补充关键路径渲染(Critical Rendering Path)的概念,解释HTML/CSS/JS如何变成像素。 安全机制是用户没问但必须涵盖的:TLS握手在HTTPS场景的触发时机,以及证书验证过程。引用材料中都没提到Service Worker等现代特性,考虑在异步请求环节补充。 最后要强调流程的非线性——浏览器预解析、连接复用等优化手段会使某些步骤并行。用户可能是开发者或面试准备者,考虑在回答末尾添加三个进阶问题:关于HTTP/3的QUIC协议、前端性能优化切入点、网络安全防护层,形成知识闭环。 </think> 在浏览器输入域名(如 `www.example.com`)并按下回车后,整个流程涉及网络协议栈、操作系统和浏览器引擎的协同工作。以下是详细步骤: --- ### 🌐 **1. URL解析** - 浏览器解析输入内容: - 若输入非完整URL(如 `example`),浏览器尝试补全协议(`https://`)和后缀(`.com`)。 - 特殊输入(如直接输入IP)跳过DNS解析。 - 检查**HSTS列表**(强制HTTPS的域名)[^4]。 --- ### 🔍 **2. DNS解析(获取服务器IP)** 1. **浏览器缓存**:检查本地DNS缓存(如 Chrome 的 `net-internals`)。 2. **系统缓存**:查询操作系统 hosts 文件(如 Windows 的 `C:\Windows\System32\drivers\etc\hosts`)。 3. **路由器缓存**:向本地路由器发送 DNS 查询。 4. **ISP DNS服务器**: - 递归查询根域名服务器 → 顶级域(`.com`)服务器 → 权威域名服务器。 - 最终返回目标域名的 IP 地址(如 `93.184.216.34`)[^1][^3][^4]。 > **比喻**:DNS 解析如同查找电话号码簿,将域名“翻译”为服务器 IP。 --- ### 🤝 **3. 建立TCP连接(三次握手)** - **步骤**: 1. 客户端发送 `SYN` 包(序列号 `x`)。 2. 服务器回复 `SYN-ACK` 包(序列号 `y`,确认号 `x+1`)。 3. 客户端发送 `ACK` 包(确认号 `y+1`)。 - 若为 HTTPS 请求,后续启动 **TLS 握手**(交换密钥、验证证书)[^2][^3]。 --- ### 📤 **4. 发送HTTP请求** 浏览器构造 HTTP 请求报文: ```http GET /index.html HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 Accept: text/html,application/xhtml+xml Cookie: session_id=abc123 ``` - 包含请求行、请求头、空行及可能的请求体(如 POST 数据)[^3]。 --- ### ️ **5. 服务器处理请求** - Web 服务器(如 Nginx/Apache): 1. 解析请求路径和参数。 2. 执行后端逻辑(如 PHP/Python 脚本)。 3. 查询数据库或缓存。 4. 生成 HTTP 响应(状态码 + HTML/CSS/JS 等资源)[^3][^4]。 --- ### 📥 **6. 接收响应** 服务器返回响应报文: ```http HTTP/1.1 200 OK Content-Type: text/html; charset=UTF-8 Content-Length: 1234 <!DOCTYPE html><html>...</html> ``` - 状态码(如 `200` 成功、`404` 未找到)决定后续行为[^2]。 --- ### **7. 浏览器渲染页面** 1. **解析 HTML**:构建 DOM 树。 2. **解析 CSS**:生成 CSSOM 树。 3. **合并渲染树**(DOM + CSSOM)。 4. **布局**(Layout):计算元素位置和尺寸。 5. **绘制**(Paint):将像素输出到屏幕。 6. **执行 JavaScript**: - 若遇到 `<script>` 标签,暂停解析直至脚本执行完成(除非标记 `async/defer`)。 - 触发事件(如 `DOMContentLoaded`)[^1][^3]。 --- ### ♻️ **8. 异步请求与连接关闭** - **异步请求**:页面加载后,JavaScript 可能发起 Ajax/Fetch 请求更新内容。 - **关闭 TCP连接**(四次挥手): 1. 客户端发送 `FIN`。 2. 服务器回复 `ACK`。 3. 服务器发送 `FIN`。 4. 客户端回复 `ACK`(连接终止)[^3][^4]。 --- ### **关键优化机制** - **连接复用**:HTTP/1.1 默认长连接(`Connection: keep-alive`),减少握手开销。 - **管线化(Pipelining)**:并行发送多个请求(HTTP/2 进一步优化)。 - **预解析**:浏览器在解析 HTML 时提前发起 DNS 查询或 TCP 连接。 --- ### 📚 **相关问题** 1. **DNS 解析为何需要递归与迭代结合?** > 本地 DNS 服务器迭代查询根域和顶级域,客户端只需等待最终结果(递归)[^1]。 2. **HTTPS 的 TLS 握手具体如何加密数据?** > 通过非对称加密交换会话密钥,后续通信使用对称加密(如 AES)保证效率[^4]。 3. **浏览器渲染遇到 JavaScript 阻塞如何处理?** > 使用 `async`(异步加载)或 `defer`(延迟执行)避免阻塞 DOM/CSSOM 构建[^3]。 --- > 流程中各环节高度依赖缓存(DNS/TCP/HTTP)和协议优化(如 HTTP/2 多路复用),实际过程可能因浏览器策略(预加载、预渲染)而并行提速 [^1][^2][^3][^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值