浏览器输入网址发生了什么?

引言:昨天接到一个电话面试,其中有个问题:浏览器输入网址之后发生了什么?之前没有具体了解过,只是以web开发经验进行理解, 只是知道记得大学计网 DNS协议作用,进行域名解析得到服务器 IP地址,以下是我查阅资料的总结

大概总的过程:

1.在客户端浏览器中输入URL。

2.发送到DNS(域名服务器)获得域名对应的web服务器的IP地址。

3.客户端浏览器与web服务器建立tcp连接.

4.客户端浏览器向对应IP地址的WEB服务器发送相应的http或https请求。

5.WEB服务器响应请求,返回指定的URL数据或错误信息。如果设定重定向,则重定向到新的URL地址。

6.客户端浏览器下载数据,解析HTML源文件,解析的过程中实现对页面的排版,解析完成后,在浏览器中显示基础界面。

7.分析页面中的超链接,显示在当前页面,重复以上过程直至没有超链接需要发送,完成页面的全部显示

详细过程

从输入网址到显示数据,在这几秒的过程中,是很多硬件和软件在各自的岗位上相互配合完成了一系列的工作。为了解答“ 浏览器输入网址后发生了什么?”,本文将介绍这一系列工作中的每一个环节。但如果对每个环节都进行详细的介绍,会让这篇文章太过冗长。我们会将每个环节抽象成一个个简单的模型,这样有助于我们对每个工作过程有一个整体的把握。

在对每个环节进行详细介绍之前,我们先对整个过程做一个简单的介绍,帮助大家不会因为看不到整体而迷失方向。我们将整个工作过程分为六块,其中包含客户端、客户端局域网、接入网、互联网、Web服务器器端局域网和服务端。在浏览器输入完网址后,以Web浏览器为起点,经过各种网络设备,最后到达终点Web服务器。

图片

客户端

用户在浏览器输入网址后,浏览器接下来的工作会从对用户输入的网址进行解析,会根据网址的含义生成请求消息。请求消息生成以后,浏览器需要向DNS服务器查询域名对应的IP地址。查询到IP地址以后,浏览器将消息委托给操作系统发送给Web服务器。操作系统接收到委托后,协议栈通过TCP协议收发数据。IP协议控制网络包收发操作,与网卡进行配合,将数据封装成网络包,在将网络包转化成电信号或光信号发送出去。

图片

Web浏览器

1、生成HTTP请求消息

输入网址后,浏览器会按照一定的规则去解析网址的含义,然后按照其含义生成请求消息。在探讨浏览器是怎么解析URL之前,我们首先要了解URL。URL(统一资源定位符)是因特网上标准的资源的地址,标准格式如下:

对 URL 进行解析之后,浏览器确定了 Web 服务器和文件名,接下来就是根据这些信息来生成 HTTP 请求消息。具体的HTTP请求消息的格式为:

图片

2、向DNS服务器查询Web服务器的IP地址

因为浏览器本身并不具备将消息发送到网络的功能,所以需要委托操作系统来实现。在这一操作之前,我们还有一个工作需要完成,那就是DNS服务器查询网址中服务器域名对应的IP地址。

在了解如何向DNS服务器查询Web服务器的IP地址之前,先介绍一下IP地址的基本知识。

IP地址是一串32比特的数字,按照8比特为一组分成4组,分别用十进制表示,用圆点隔开。在IP地址的规则中,这32比特的数字构成了IP地址的网络号和主机号。IP地址的网络号和主机号是根据子网掩码划分的。子网掩码的长度也是32位,左边是网络位,用二进制数字“1”表示;右边是主机位,用二进制数字“0”表示。

“192.168.1.1”和子网掩码为“255.255.255.0”的二进制对照。其中,“1”有24个,代表与此相对应的IP地址左边24位是网络号;“0”有8个,代表与此相对应的IP地址右边8位是主机号。

DNS服务器中所有的信息都是按照域名以分层次的结构来保存的。DNS中的域名都是用句点来分隔的,域名中越靠右的位置表示层级越高。一个域的信息是作为一个整体存放在DNS服务器中的,不能将一个域拆来来存放在多台DNS服务器中。比如www.baidu.com,com域的下一层域是baidu域,在下一层域是www。但com域(成为顶级域)并不是最顶层的域,在com域上面还有一级域,成为根域。

互联网中有数万台DNS服务器,肯定不能一台一台的进行查找,我们可以采用下面的方法。首先将负责管理下级域的DNS服务器的IP地址注册到它们的上级DNS服务器中,然后上级DNS服务器的IP地址在注册到更上一级的DNS服务器,以此类推,直到将顶级域的IP地址注册到根域。这样我们就可以通过上级DNS服务器查询出下一级DNS服务器的IP地址。除此之外,我们还需要完成一项工作,就是将根域的DNS服务器的信息保存到所有的DNS服务器中,这样一来,任意一台DNS服务器都可以找到并访问根域的DNS服务器。

以www.baidu.com为例,其中一种查询过程为:

1、客户端首先访问最近的DNS服务器;

2、假如最近的DNS服务器没有查到域名信息,我们就需要从根域DNS服务器查找,根域服务器没有www.baidu.com的信息,但根域可以判断这个域名属于com域,因此根域会返回管理com域的DNS服务器地址给客户端计算机最近的DNS服务器;

3、然后客户端计算机最近的DNS服务器在向com域发送查询信息,com也没有www.baidu.com的域名信息,和刚才一样,com服务器会返回它下面的baidu.com域的IP地址给客户端计算机最近的DNS服务器;

4、然后客户端计算机最近的DNS服务器在向baidu.com域发送查询信息,baidu.com域将查到的www.baidu.com的IP地址返回给客户端计算机最近的DNS服务器。

5、客户端计算机最近的DNS服务器将www.baidu.com的IP地址返回给客户端计算机;

6、客户端计算机就知道Web服务器的IP地址了,也就可以对其进行访问了。

图片

TCP模块

知道IP地址以后,就可以委托操作系统内部的协议栈向这个目标IP地址发送消息了。客户端会创建套接字,然后将管道连接到服务器的套接字上,连接成功后,客户端就可以收发数据了。在Socket连接和发送过程中,TCP模块都会创建特定的TCP头部。

<think>我们正在回答用户关于“输入网址浏览器的工作流程”的问题。用户希望了解从输入网址到页面展示的整个底层工作原理,包括网络请求、DNS解析、建立连接等过程。 根据提供的引用材料,我们可以整理出一个详细的工作流程。同时,系统要求使用中文回答,并正确使用LaTeX格式的数学表达式(虽然这个问题可能不太涉及数学公式,但如果有需要我们会使用),最后生成相关问题。 步骤概述(根据引用材料整合): 1. 用户输入网址(URL) 2. 浏览器解析URL 3. DNS解析(将域名转换为IP地址) 4. 建立TCP连接(三次握手) 5. 浏览器发送HTTP请求 6. 服务器处理请求并返回响应 7. 浏览器解析渲染页面 8. 关闭TCP连接(四次挥手) 下面我们将详细展开每个步骤。 详细工作流程: 1. **用户输入网址** 用户在浏览器地址栏输入URL(例如:http://www.example.com),并按下回车键。 2. **浏览器解析URL** 浏览器解析URL,提取出协议(如HTTP/HTTPS)、主机名(如www.example.com)、端口号(默认为80或443)、资源路径(如/index.html)等。 3. **DNS解析(域名解析)** 浏览器需要将主机名转换为IP地址才能建立连接。DNS解析过程如下[^2]: - (1)**浏览器缓存**:浏览器首先检查自身缓存中是否有该域名对应的IP地址。 - (2)**操作系统缓存**:如果浏览器缓存没有,则检查操作系统的hosts文件和缓存(如Windows的DNS Client服务缓存)。 - (3)**本地域名服务器(LDNS)**:如果上述步骤都没有,浏览器会向本地配置的DNS服务器(通常由ISP提供)发起请求。 - (4)**根域名服务器、顶级域名服务器、权威域名服务器**:如果本地DNS服务器没有缓存,则从根域名服务器开始递归查询,直到获取到IP地址。 整个DNS查询过程可能经过递归查询或迭代查询,最终将域名解析为IP地址。 4. **建立TCP连接(三次握手)** 获取到IP地址后,浏览器通过操作系统的网络栈与服务器建立TCP连接(使用三次握手)[^2][^3]: - **第一次握手**:客户端发送一个SYN包(SYN=1, seq=x)到服务器,并进入SYN_SENT状态。 - **第二次握手**:服务器收到SYN包,发送SYN+ACK包(SYN=1, ACK=1, seq=y, ack=x+1),并进入SYN_RCVD状态。 - **第三次握手**:客户端收到SYN+ACK包,发送ACK包(ACK=1, seq=x+1, ack=y+1),此时双方进入ESTABLISHED状态,连接建立。 5. **浏览器发送HTTP请求** TCP连接建立后,浏览器通过该连接向服务器发送HTTP请求报文[^3][^4]。请求报文包括: - 请求行:包含请求方法(如GET、POST)、资源路径、HTTP协议版本。 - 请求头:包含Host(主机名)、User-Agent(浏览器标识)、Accept(可接受的响应内容类型)、Accept-Language、Accept-Encoding、Cookie等字段[^4]。 - 请求体(对于POST等方法)。 6. **服务器处理请求并返回响应** 服务器接收到请求后,根据请求的资源路径和参数进行处理,然后返回HTTP响应报文: - 状态行:包含HTTP版本、状态码(如200 OK)。 - 响应头:包含Content-Type(响应内容的类型,如text/html)、Content-Length、Set-Cookie等。 - 响应体:实际返回的资源内容(如HTML文档)。 7. **浏览器解析渲染页面** 浏览器接收到响应后,开始解析和渲染页面: - 解析HTML构建DOM树。 - 解析CSS构建CSSOM树。 - 将DOM树和CSSOM树合并成渲染树(Render Tree)。 - 布局(Layout):计算每个节点在屏幕中的位置和大小。 - 绘制(Painting):将各个节点绘制到屏幕上。 - 如果遇到JavaScript,会执行并可能阻塞渲染(除非标记为异步或延迟)。 8. **关闭TCP连接(四次挥手)** 当页面加载完成后,浏览器会关闭TCP连接(如果HTTP头中Connection字段为close,则每次请求后都会关闭;如果是keep-alive,则连接会保持一段时间)[^4]。关闭连接的过程(四次挥手): - **第一次挥手**:客户端发送FIN包(FIN=1, seq=u)给服务器,进入FIN_WAIT_1状态。 - **第二次挥手**:服务器收到FIN,发送ACK包(ACK=1, ack=u+1)给客户端,进入CLOSE_WAIT状态。此时客户端到服务器的连接关闭,但服务器到客户端的连接还可以发送数据。 - **第三次挥手**:服务器发送FIN包(FIN=1, seq=v)给客户端,进入LAST_ACK状态。 - **第四次挥手**:客户端收到FIN,发送ACK包(ACK=1, ack=v+1)给服务器,进入TIME_WAIT状态(等待2MSL后关闭)。服务器收到ACK后立即关闭连接。 注意:如果使用HTTPS,在建立TCP连接后,还需要进行TLS握手(交换密钥、验证证书等),建立加密通道,然后再发送HTTP请求(即HTTP over TLS)。 流程图(文字描述): ``` 输入URL -> 解析URL -> DNS解析 -> 建立TCP连接(三次握手) -> 发送HTTP请求 -> 服务器处理请求并返回响应 -> 浏览器解析渲染页面 -> 关闭TCP连接(四次挥手) ``` 相关问题: 1. DNS解析过程中,如何减少解析时间以提高网页加载速度? 2. 为什么TCP连接需要三次握手,而断开需要四次挥手? 3. 浏览器渲染页面时遇到JavaScript阻塞如何处理? 4. HTTPS在HTTP工作流程的基础上增加了哪些步骤? 5. 如何通过HTTP协议头优化网页加载性能? 以上即为从输入网址到页面展示的完整工作流程。</think>### 输入网址浏览器的工作流程详解 当您在浏览器输入网址(如 `https://www.example.com`)并按下回车后,浏览器会执行以下底层工作流程: #### 1. **URL解析与协议识别** [^1] - 浏览器解析URL结构:`协议://主机名:端口/路径?查询参数#锚点` - 识别协议(HTTP/HTTPS)和默认端口(HTTP:80, HTTPS:443) - 检查HSTS预加载列表强制HTTPS(安全站点) #### 2. **DNS域名解析** [^2] 浏览器通过分层查询将域名转换为IP地址: 1. **浏览器缓存**:检查自身DNS缓存(`chrome://net-internals/#dns`) 2. **操作系统缓存**:查询系统hosts文件(`/etc/hosts`或`C:\Windows\System32\drivers\etc\hosts`) 3. **本地DNS服务器**:向路由器或ISP配置的DNS服务器发起查询 4. **递归查询**(若未命中缓存): ```mermaid graph LR A[本地DNS] --> B[根域名服务器] B --> C[顶级域服务器 .com] C --> D[权威域名服务器 example.com] D --> E[返回IP地址] ``` 5. 最终获得目标服务器的IP地址(如 `93.184.216.34`) #### 3. **建立网络连接** - **TCP三次握手**建立可靠连接 [^2]: ``` 客户端 ───SYN───> 服务器 客户端 <──SYN+ACK── 服务器 客户端 ───ACK───> 服务器 ``` - **HTTPS额外步骤**: - TLS握手(交换密钥) - 证书验证(检查CA签名) - 协商加密套件(如AES_256_GCM) #### 4. **发送HTTP请求** [^3][^4] 浏览器构建并发送符合RFC标准的请求报文: ```http GET /index.html HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 Accept: text/html,application/xhtml+xml Accept-Language: zh-CN Cookie: session_id=abc123 Connection: keep-alive ``` > 关键头字段说明: > - `Host`:虚拟主机标识(必需) > - `User-Agent`:客户端环境信息 > - `Cookie`:会话状态数据 > - `Connection: keep-alive` 启用持久连接 #### 5. **服务器处理与响应** 1. Web服务器(如Nginx/Apache)接收请求 2. 路由到后端应用(如PHP/Node.js) 3. 生成响应报文: ```http HTTP/2 200 OK Content-Type: text/html; charset=utf-8 Content-Length: 15320 Set-Cookie: session=new Cache-Control: max-age=3600 <!DOCTYPE html> <html>...</html> ``` > 协议版本体现在响应行首: > - HTTP/1.x → `HTTP/1.1 200 OK` > - HTTP/2 → `HTTP/2 200` #### 6. **浏览器渲染引擎工作** 1. **解析HTML** → 构建DOM树 2. **解析CSS** → 构建CSSOM树 3. **合并渲染树**(Render Tree) 4. **布局计算**(Layout/Reflow) 5. **绘制显示**(Painting) 6. **执行JavaScript**(可能触发重绘) #### 7. **连接终止** - HTTP/1.1:`Connection: close` 触发TCP四次挥手 - HTTP/2:多路复用保持连接 - 资源加载完成后断开: ``` 客户端 ───FIN───> 服务器 客户端 <──ACK─── 服务器 客户端 <──FIN─── 服务器 客户端 ───ACK───> 服务器 ``` ### 关键优化技术 1. **DNS预取**:`<link rel="dns-prefetch" href="//cdn.example.com">` 2. **TCP快速打开**(TFO):减少握手延迟 3. **HTTP/2特性**:头部压缩、服务端推送、多路复用 4. **缓存策略**:`Cache-Control`/`ETag` 避免重复传输 > 完整流程耗时通常在100ms-3s之间,受网络延迟、资源大小、服务器响应速度影响。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值