浏览器输入URL到响应页面的全过程

本文详细介绍了HTTP工作流程,从用户输入URL到浏览器渲染页面全过程,涵盖了DNS解析、TCP连接建立、HTTP请求与响应等关键步骤,并解释了反向代理的作用。

原文地址:HTTP状态码(响应码) - 小马奔腾! - 博客园

B/S网络架构从前端到后端都得到了简化,都基于统一的应用层协议HTTP来交互数据,HTTP协议采用无状态的短链接的通信方式,通常情况下,一次请求就完成了一次数据交互,通常也对应一个业务逻辑,然后这次通信连接就断开了。采用这种方式是为了能够同时服务更多的用户,因为当前互联网应用每天都会处理上亿的用户请求,不可能每个用户访问一次后就一直保持住这个连接。

①输入URL:www.google.com;

②DNS域名解析:域名与IP映射(发送到DNS(域名服务器)获得域名对应的WEB服务器的IP地址);

③建立TCP连接: 客户端浏览器与WEB服务器建立TCP(传输控制协议)连接,三次握手;

④发送Http Request:请求信息(客户端浏览器向对应IP地址的WEB服务器发送相应的HTTP或HTTPS请求);

⑤WEB服务器:Nginx反向代理(客户端本来可以直接通过HTTP协议访问某网站应用服务器,网站管理员可以在中间加上一个Nginx,客户端请求Nginx,Nginx请求应用服务器,然后将结果返回给客户端,此时Nginx就是反向代理服务器);

⑥应用服务器:Server处理请求(数据库等交互.....);

⑦用户浏览器:渲染响应页面(客户端浏览器下载数据,解析HTML源文件,解析的过程中实现对页面的排版,解析完成后,在浏览器中显示基础的页面);

⑧关闭TCP连接:响应完成(非持久连接);

一句话概括:浏览器本身是一个客户端,当你输入URL的时候,首先浏览器会去请求DNS服务器,通过DNS获取相应的域名对应的IP,然后通过IP地址找到IP对应的服务器后,要求建立TCP连接,等浏览器发送完HTTP Request(请求)包后,服务器接收到请求包之后才开始处理请求包,服务器调用自身服务,返回HTTP Response(响应)包;客户端收到来自服务器的响应后开始渲染这个Response包里的主体(body),等收到全部的内容随后断开与该服务器之间的TCP连接;

 一些具体详细的补充:

浏览器是怎么查找域名对应的IP地址的?

1) 请求一旦发起,浏览器首先要做的事情就是解析这个域名,一般来说,浏览器会首先查看本地硬盘的 hosts 文件,看看其中有没有和这个域名对应的规则,如果有的话就直接使用 hosts 文件里面的 ip 地址。
2) 如果在本地的 hosts 文件没有能够找到对应的 ip 地址,浏览器会发出一个 DNS请求到本地DNS服务器 。本地DNS服务器一般都是你的网络接入服务器商提供,比如中国电信,中国移动。
3) 查询你输入的网址的DNS请求到达本地DNS服务器之后,本地DNS服务器会首先查询它的缓存记录,如果缓存中有此条记录,就可以直接返回结果,此过程是递归的方式进行查询。如果没有,本地DNS服务器还要向DNS根服务器进行查询。
4) 根DNS服务器没有记录具体的域名和IP地址的对应关系,而是告诉本地DNS服务器,你可以到域服务器上去继续查询,并给出域服务器的地址。
5) 本地DNS服务器继续向域服务器发出请求,在这个例子中,请求的对象是.com域服务器。.com域服务器收到请求之后,也不会直接返回域名和IP地址的对应关系,而是告诉本地DNS服务器,你的域名的解析服务器的地址。
6) 最后,本地DNS服务器向域名的解析服务器发出请求,这时就能收到一个域名和IP地址对应关系,本地DNS服务器不仅要把IP地址返回给用户电脑,还要把这个对应关系保存在缓存中,以备下次别的用户查询时,可以直接返回结果,加快网络访问。

浏览器向 web 服务器发送一个 HTTP 请求的过程大概是?

拿到域名对应的IP地址之后,浏览器会以一个随机端口(1024<端口<65535)向服务器的WEB程序(常用的有httpd,nginx等)80端口发起TCP的连接请求。这个连接请求到达服务器端后(这中间通过各种路由设备,局域网内除外),进入到网卡,然后是进入到内核的TCP/IP协议栈(用于识别该连接请求,解封包,一层一层的剥开),还有可能要经过Netfilter防火墙(属于内核的模块)的过滤,最终到达WEB程序,最终建立了TCP/IP的连接。
建立了TCP连接之后,发起一个http请求。一个典型的 http request header 一般需要包括请求的方法,例如 GET 或者 POST 等,不常用的还有 PUT 和 DELETE 、HEAD、OPTION以及 TRACE 方法,一般的浏览器只能发起 GET 或者 POST 请求。

客户端向服务器发起http请求的时候,会有一些请求信息,请求信息包含三个部分:
-------请求方法URI协议/版本
-------请求头(Request Header)
-------请求正文:

GET/sample.php
HTTP/1.1 Accept:image/gif.image/jpeg,*/*
Accept-Language:zh-cn
Connection:Keep-Alive
Host:localhost
User-Agent:Mozila/4.0(compatible;MSIE5.01;Window NT5.0)
Accept-Encoding:gzip,deflate

username=jinqiao&password=1234
注意:最后一个请求头之后是一个空行,发送回车符和换行符,通知服务器以下不再有请求头。

服务器是如何处理请求的呢?

后端从在固定的端口接收到TCP报文开始,它会对TCP连接进行处理,对HTTP协议进行解析,并按照报文格式进一步封装成HTTP Request对象,供上层使用。
一些大一点的网站会将你的请求到反向代理服务器中,因为当网站访问量非常大,网站越来越慢,一台服务器已经不够用了。于是将同一个应用部署在多台服务器上,将大量用户的请求分配给多台机器处理。此时,客户端不是直接通过HTTP协议访问某网站应用服务器,而是先请求到Nginx,Nginx再请求应用服务器,然后将结果返回给客户端,这里Nginx的作用是反向代理服务器。同时也带来了一个好处,其中一台服务器万一挂了,只要还有其他服务器正常运行,就不会影响用户使用。
通过Nginx的反向代理,我们到达了web服务器,服务端脚本处理我们的请求,访问我们的数据库,获取需要获取的内容。

服务器返回一个 HTTP 响应大概包括哪些?

HTTP响应与HTTP请求相似,HTTP响应也由3个部分构成,分别是:
----- 状态行
----- 响应头(Response Header)
----- 响应正文

HTTP/1.1 200 OK 
Date: Sat, 31 Dec 2005 23:59:59 GMT 
Content-Type: text/html;charset=ISO-8859-1 Content-Length: 122 
<html> 
<head> 
<title>http</title> 
</head> 
<body> 
<!-- body goes here --> 
</body> 
</html>

在用户输入 URL页面加载完成的整个过程中,涉及多个层次的技术细节,包括网络通信、浏览器解析与渲染、资源加载等多个阶段。以下是整个流程的详细解析: ### 1. 用户输入 URL 用户在浏览器地址栏输入一个 URL(例如 `https://www.example.com`),浏览器会首先解析该 URL,提取出协议(如 HTTPS)、主机名(如 `www.example.com`)、路径(如 `/index.html`)等信息。 ### 2. DNS 解析 浏览器需要将域名解析为对应的 IP 地址。此过程通常包括以下步骤: - **本地 DNS 缓存查询**:浏览器首先检查自身的 DNS 缓存,看是否已经缓存了该域名的 IP 地址。 - **操作系统 DNS 缓存查询**:如果浏览器缓存中没有,则查询操作系统级别的 DNS 缓存。 - **向 DNS 服务器发起请求**:如果缓存中没有,则操作系统会向配置的 DNS 服务器发起查询请求,获取目标服务器的 IP 地址[^1]。 ### 3. 建立 TCP 连接 在获得服务器 IP 地址后,浏览器会通过 TCP 协议与服务器建立连接。通常使用 **三次握手** 机制完成连接建立: 1. 客户端发送 SYN 报文。 2. 服务器回应 SYN-ACK。 3. 客户端发送 ACK 确认。 若使用 HTTPS 协议,还需在此基础上进行 TLS 握手,协商加密密钥[^1]。 ### 4. 发送 HTTP 请求 建立连接后,浏览器发送 HTTP 请求报文。请求报文通常包含请求方法(如 GET)、请求路径、HTTP 协议版本、请求头(Headers)等信息。例如: ```http GET /index.html HTTP/1.1 Host: www.example.com User-Agent: Mozilla/5.0 Accept: text/html,application/xhtml+xml Accept-Encoding: gzip, deflate Connection: keep-alive ``` ### 5. 服务器处理请求并返回响应 服务器接收到请求后,根据请求内容生成响应响应报文包括状态码(如 200 表示成功)、响应头(Headers)和响应体(Body)。例如: ```http HTTP/1.1 200 OK Content-Type: text/html Content-Length: 1234 Date: Mon, 01 Jan 2024 00:00:00 GMT <!DOCTYPE html> <html> <head>...</head> <body>...</body> </html> ``` ### 6. 浏览器解析与渲染 浏览器接收到响应后,开始解析 HTML 文档,并逐步构建 DOM 树和 CSSOM 树,最终生成渲染树。在此过程中: - **HTML 解析器** 会解析 HTML 标签,并构建 DOM 树。 - **CSS 解析器** 会解析样式表,构建 CSSOM 树。 - **JavaScript 执行** 可能会修改 DOM 和 CSSOM,影响渲染流程。 - **渲染引擎** 会根据渲染树计算布局(Layout),绘制页面内容(Paint),并最终将页面呈现在用户面前[^2]。 ### 7. 加载其他资源 HTML 文档中通常包含对其他资源的引用,如图片、CSS、JavaScript 文件等。浏览器会根据这些引用再次发起 HTTP 请求,加载这些资源,并重复解析、渲染流程,直到所有资源加载完成。 ### 8. 断开 TCP 连接 当所有数据交换完成后,浏览器与服务器之间的 TCP 连接可以通过 **四次挥手** 断开连接: 1. 客户端发送 FIN 报文。 2. 服务器回应 ACK。 3. 服务器发送 FIN 报文。 4. 客户端回应 ACK。 若使用 HTTP/1.1 的 `keep-alive` 机制,连接可能保持一段时间以复用[^2]。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值