前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >HTTP请求流程你了解了么?

HTTP请求流程你了解了么?

作者头像
Java_老男孩
发布于 2020-01-15 09:00:52
发布于 2020-01-15 09:00:52
99500
代码可运行
举报
运行总次数:0
代码可运行

欢迎关注专栏:Java架构技术进阶。里面有大量batj面试题集锦,还有各种技术分享,如有好文章也欢迎投稿哦。

预备知识

前文没有描述到传输和协议直接的层级对应关系,大概补充下网络通信中数据传输对应的协议,首先了解下OSI(开放式系统互联:Open System InterConnection)七层 模式,及其对应不同层次的协议。

OSI体系结构

TCP/IP相关协议结构

应用层

HTTP,Telnet,FTP等

表示层

会话层

传输层

TCP,UDP

网络层

IP

数据链路层

物理层

了解到HTTP协议是建立在TCP连接基础之上的。HTTP 是一种允许浏览器向服务器获取资源的协议,是 Web 的基础,通常由浏览器发起请求,用来获取不同类型的文件, 例如 HTML 文件、CSS 文件、JavaScript 文件、图片、视频等。此外,HTTP 也是浏览器使用最广的协议。

我们对HTTP不太了解的话都会存在这样的疑惑,为什么再次访问同一站点会比第一次快,登录过一次后的网站再次访问就处于登录状态等,我们 通过对HTTP请求过程的剖析来解开这些谜团。

浏览器端发起 HTTP 请求流程

浏览器输入网址:http://time.geekbang.org/index.html,之后会完成什么步骤呢?

1、构建请求

首先,浏览器构建请求行信息,构建好后,浏览器准备发起网络请求。

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
GET /index.html HTTP1.1

2、查找缓存

在真正发起网络请求之前,浏览器会先在浏览器缓存中查询是否有要请求的文件。其中,浏览器缓存是一种在本地保存资源副本,以供下次请求时直接使用的技术

当浏览器发现请求资源已经存在浏览器缓存中存有副本,则会拦截请求并返回该资源副本结束请求。如果查找缓存失败,则会进入网络请求。所以会有利于:

  • 缓解服务器端压力,提升性能
  • 对于网站来说,缓存是实现快速资源加载的重要组成部分,减少了获取资源的时间。

3、准备IP地址和端口

我们通过开头预备知识和前文也大概了解到了HTTP和TCP的关系。浏览器使用 HTTP 协议作为应用层协议,用来封装请求的文本信息;并使用 TCP/IP 作传输层协议将它发到网络上,所以在 HTTP 工作开始之前,浏览器需要通过 TCP 与服务器建立连接。也就是说 HTTP 的内容是通过 TCP 的传输数据阶段来实现的。

TCP和HTTP的关系示意图:

据此,我们可以知道建立HTTP网络请求就是,通过URL地址来解析获取IP和端口信息,建立服务器和TCP连接。我们通过前文《TCP协议》 说到了数据包都是通过IP地址传输给接收方的。而我们网站一般的地址都是域名,所以需要把域名和IP地址做映射关系,即解析IP地址的系统“域名系统(DNS)”解析出 IP地址,并获取对应端口号获得建立连接的前置条件。换句话说,即浏览器请求DNS返回域名对应的IP,而请求DNS时也会查询DNS数据缓存服务,判断是否域名已解析过, 如果解析过则查询直接使用,拿到IP后则判断URL是否指明端口号,没有则HTTP协议默认时80端口。

4、等待TCP队列

Chrome 有个机制,同一个域名同时最多只能建立 6 个 TCP 连接,如果在同一个域名下同时有 10 个请求发生,那么其中 4 个请求会进入排队等待状态,直至进行中的请求完成。当然,如果当前请求数量少于 6,会直接进入下一步,建立 TCP 连接。

5、建立TCP连接

队列等待结束后,TCP和服务器实现“三次握手”(前文TCP协议有描述),即客户端和服务器发送三个数据包以确认连接,实现浏览器和服务的连接。

6、发送HTTP请求

一旦建立了 TCP 连接,浏览器就可以和服务器进行通信了。而 HTTP 中的数据正是在这个通信过程中传输的。

HTTP请求数据格式:

首先浏览器会向服务器发送请求行,它包括了请求方法、请求 URI(Uniform Resource Identifier)和 HTTP 版本协议

其中请求方式有GET,POST,PUT,Delete等,其中常用的POST会用于发送一些数据给服务器,比如登录网站把用户信息发送给服务器,一般 这些数据会通过请求体发送。

在浏览器发送请求行命令之后,还要以请求头形式发送其他一些信息,把浏览器的一些基础信息告诉服务器。比如包含了浏览器所使用的操作系统、浏览器内核等信息,以及当前请求的域名信息、Cookie等。

服务器端处理 HTTP 请求流程

1、返回请求

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
curl -i https://time.geekbang.org/

通过curl工具(或network面板)我们可以了解到服务器返回的数据格式:

首先服务器会返回响应行,包括协议版本和状态码。

如果出现错误,服务器会通过请求行的状态码来返回对应的处理结果,例如:

  • 最常用的状态码是 200,表示处理成功;
  • 404,表示没有找到页面
  • 500,表示服务器错误

正如浏览器会随同请求发送请求头一样,服务器也会随同响应向浏览器发送响应头。响应头包含了服务器自身的一些信息, 比如服务器生成返回数据的时间、返回的数据类型(JSON、HTML、流媒体等类型),以及服务器要在客户端保存的 Cookie 等信息。

响应头之后,服务器会发送响应体数据,通常包含了HTML的实际内容。以上为服务器响应浏览器的过程。

2、断开连接

一旦服务器向客户端返回了请求数据,它就要关闭 TCP 连接。不过如果浏览器或者服务器在其头信息中加入了:

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
Connection:Keep-Alive

则TCP 连接在发送后将仍然保持打开状态,这样浏览器就可以继续通过同一个 TCP 连接发送请求。保持 TCP 连接可以省去下次请求时需要建立连接的时间,提升资源加载速度。 如果一个页面内嵌的图片都来自同一web站点,则初始化一个持久连接则可复用减少TCP的连接。

3、重定向

重定向返回响应行和响应头:

状态 301 就是告诉浏览器,我需要重定向到另外一个网址,而需要重定向的网址正是包含在响应头的 Location 字段中,接下来,浏览器获取 Location 字段中的地址,并使用该地址重新导航,这就是一个完整重定向的执行流程。

总结

通过http请求的完整过程,我们就知道,请求过程中DNS缓缓和页面资源缓存会被浏览器缓存起来,以减少向服务器请求的资源,所以会再次请求站点时速度会快。

浏览器资源缓存处理过程:

从上图的第一次请求可以看出,当服务器返回 HTTP 响应头给浏览器时,浏览器是通过响应头中的 Cache-Control 字段来设置是否缓存该资源。通常,我们还需要为这个资源设置一个缓存过期时长,而这个时长是通过 Cache-Control 中的 Max-age 参数来设置的。

因此在该缓存资源还未过期的情况下, 如果再次请求该资源,会直接返回缓存中的资源给浏览器。

如果缓存过期了,浏览器则会继续发起网络请求,并且在 HTTP 请求头中带上If-None-Match,服务器收到请求头后,会根据 If-None-Match 的值来判断请求的资源是否有更新。

  • 如果没有更新,就返回 304 状态码,相当于服务器告诉浏览器,这个缓存可以继续使用。
  • 如果资源有更新,服务器就直接返回最新资源给浏览器。

登录网站,通过POST方式提交信息给服务器,服务器接收到浏览器提交的信息之后,查询验证信息正确则会生成表面用户身份的字符串写入响应头的Set-Cookie字段里返回浏览器。

浏览器解析响应头,如有Set-Cookie字段则保存在本地,当用户再次访问时,发起HTTP请求前浏览器会读取Cookie数据并写入请求头发送到服务器,服务器再次判断信息,如果 正确则展示用户登录状态及用户信息。

最后总结出浏览器中的HTTP请求从发起到结束一共经历了八个阶段:构建请求、查找缓存、准备 IP 和端口、等待 TCP 队列、建立 TCP 连接、发起 HTTP 请求、服务器处理请求、服务器返回请求和断开连接

详细HTTP请求流程:

欢迎关注公众号:老男孩的成长之路,精选干货每周定期奉上!

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
HTTP都到3.0了,你还不了解1和2吗?
HTTP 协议一共有四个阶段比较重要的阶段,分别是 0.9/1/2/3,其中1又分为1.0和1.1。
用户9899350
2022/07/29
5160
HTTP都到3.0了,你还不了解1和2吗?
一次完整的HTTP请求过程
a)首先会搜索浏览器自身的DNS缓存(缓存时间比较短,大概只有1分钟,且只能容纳1000条缓存)
WindSun
2019/09/09
8.9K0
一次完整的HTTP请求过程
连肝7个晚上,总结了计算机网络的知识点!(共66条)
http1.1中浏览器再也不用为每个请求重新发起TCP连接了,增加内容有:缓存相关首部的扩展,OPTIONS方法,Upgrade首部,Range请求,压缩和传输编码,管道化等。但还是满足不了现在的web发展需求,so,就有了http.2版本。
小灰
2020/07/15
6820
连肝7个晚上,总结了计算机网络的知识点!(共66条)
(建议精读)HTTP灵魂之问,巩固你的 HTTP 知识体系
上回就已经承诺过大家,一定会出 HTTP 的系列文章,今天终于整理完成了。作为一个 web 开发,HTTP 几乎是天天要打交道的东西,但我发现大部分人对 HTTP 只是浅尝辄止,对更多的细节及原理就了解不深了,在面试的时候感觉非常吃力。这篇文章就是为了帮助大家树立完整的 HTTP 知识体系,并达到一定的深度,从容地应对各种灵魂之问,也同时提升自己作为一个 web 开发的专业素养吧。这是本文的思维导图:
桃翁
2020/04/07
1.1K0
(建议精读)HTTP灵魂之问,巩固你的 HTTP 知识体系
关于HTTP不能不说的秘密
超文本传输协议(HTTP,HyperText Transfer Protocol) 是互联网上应用最为广泛的一种网络协议。所有WWW文件都必须遵守这个标准。设计HTTP最初的目的是为了提供一种发布和接收HTML页面的方法。
啃饼思录
2018/09/17
3640
关于HTTP不能不说的秘密
一文简析网络基础协议#技术创作101训练营#
日常的开发中,大家关注的重点基本都在前端的展现、交互和性能上,而这些都算是浏览器上层的一些表现。而对于底层的一些协议关注的相对较少,这里就主要介绍一下这些基础协议。
木子墨
2020/09/23
4080
一文简析网络基础协议#技术创作101训练营#
Http请求报文格式和响应报文格式
客户端连上服务器后,向服务器发出获取某个Web资源的消息,称之为客户端向服务器发送了一个HTTP请求。
chenchenchen
2022/03/09
8.4K0
Http请求报文格式和响应报文格式
网络协议
HTTP 通常跑在 TCP/IP 协议栈之上,依靠 IP 协议实现寻址和路由、TCP 协议实现可靠数据传输、DNS 协议实现域名查找、SSL/TLS 协议实现安全通信。此外,还有一些协议依赖于 HTTP,例如 WebSocket、HTTPDNS 等。这些协议相互交织,构成了一个协议网,而 HTTP 则处于中心地位。
Michel_Rolle
2023/11/20
2.6K0
面试 HTTP ,99% 的面试官都爱问这些问题
HTTP 是一种 超文本传输协议(Hypertext Transfer Protocol),HTTP 是一个在计算机世界里专门在两点之间传输文字、图片、音频、视频等超文本数据的约定和规范
cxuan
2020/04/21
1.4K0
面试 HTTP ,99% 的面试官都爱问这些问题
阶段一:宏观视角下的浏览器
01 | Chrome架构:仅仅打开了1个页面,为什么有4个进程? ---- 一、操作 在Chrome浏览器中,我们点击右上角三个点–更多工具–任务管理器。 会看到打开一个页面,启动了多个进程。 在进行每个进程分析前,先明确下线程与进程之间的关系。 二、线程 VS 进程 进程:一个进程就是一个运行实例–启动一个程序的时候,操作系统会为该程序创建一块内存,用来存放代码、运行中的数据和一个执行任务的主线程,这样的一个运行环境就叫做进程。 线程:线程不能单独存在,需要由进程来启动和管理。 线程与进
六个周
2022/10/28
3720
《透视HTTP协议》:这一次彻彻底底的理解什么是HTTP?
蒂姆伯纳斯李提出了 万维网的三个重要组成:uri(统一资源标识符)html超文本标记语言描述超文本,http 超文本传输协议,用于传输超文本
小柔
2024/04/25
4260
【HTTP】267- HTTP 的15个常见知识点复习
前言 自从入职新公司到现在,我们前端团队内部一直在做 ?每周一练 的知识复习计划,我之前整理了一个 [每周一练 之 数据结构与算法] (https://juejin.im/post/5ce2a20e6
pingan8787
2019/07/25
5450
【HTTP】267- HTTP 的15个常见知识点复习
人人都在用,但你却不知道它背后发生了什么——浏览器的工作原理:浏览器幕后揭秘
要介绍进程与线程的话,需要先讲解下并行处理,了解了并行处理的概念,再理解进程和线程之间的关系就会变得轻松许多。
用户7656790
2020/08/13
9230
人人都在用,但你却不知道它背后发生了什么——浏览器的工作原理:浏览器幕后揭秘
12期前端冲刺必备指南-HTTP/HTTPS/HTTP2/DNS/TCP/经典题
前言 大家好啊,我是吒儿👦,每天努力一点点💪,就能升职加薪💰当上总经理出任CEO迎娶白富美走上人生巅峰🗻,想想还有点小激动呢😎。 这是我的第12期文章内容✍,希望能够把每一处知识点,说明白,(当然,如果哪一处不了解,可以在评论区进行探讨哦!)⏰,计时开始! 如果您发现本文有帮助,请您点赞,收藏,评论,留下您学习的脚印👣,我很乐意谈论😃 学习阅读这篇文章内容还是需要一点前端网络基础的,至少你用过接口,了解过后端啥的。(也了解过一点网络知识,但不怎么会懂的学习者) 学习Http协议太重要了,了解Http协议,可
达达前端
2022/04/13
5100
12期前端冲刺必备指南-HTTP/HTTPS/HTTP2/DNS/TCP/经典题
深入了解HTTP(已完结)
在学习网络之前,了解它的历史能够帮助我明白为何它会发展为如今这个样子,能让我有探究它的兴趣。下面的这张图片就展示了“互联网”诞生至今的发展历程
yutingbai
2022/08/18
3150
深入了解HTTP(已完结)
一次完整的 HTTP 请求过程,包括 DNS 解析、TCP 握手、HTTP 请求和响应等环节
HTTP(Hypertext Transfer Protocol),即超文本传输协议,是应用层协议之一,用于在 Web 应用中传输数据。在现代 Web 应用中,HTTP 已经成为了标准的数据传输协议,用户在浏览器中访问页面时,都会进行大量的 HTTP 请求和响应。
网络技术联盟站
2023/06/06
1.5K0
从输入 URL 到浏览器呈现页面的整体流程
在开始之前,推荐大家阅读一篇文章《React 文件下载组件 File Download》https://cloud.tencent.com/developer/article/2471856,该文章介绍了 React 文件下载组件,涵盖基本实现、问题解决、高级用法及提升用户体验的相关内容,有兴趣的朋友可以去了解下。
一杯茶Ja
2024/11/28
3120
浅学计网:HTTP
HTTP (Hypertext Transfer Protocol) 协议是对 客户端和服务器端 之间数据之间实现可靠性的传输 文字、图片、音频、视频等超文本数据的规范,格式简称为“超文本传输协议“。HTTP 协议属于应用层,及用户访问的第一层就是HTTP。简单来说就是一种发布和接收 HTML 页面的方法,被用于在 Web 浏览器和网站服务器之间传递信息。
传说之下的花儿
2023/11/19
2750
浅学计网:HTTP
【计网】从HTTP/0.9 到 HTTP/3
为什么会出现 HTTP 协议,从 HTTP1.0 到 HTTP3 经历了什么?HTTPS 又是怎么回事?
JuneBao
2022/10/26
6980
【计网】从HTTP/0.9 到 HTTP/3
前端应该知道的 HTTP 知识
HTTP 是由蒂姆·伯纳斯-李(TimBerners—Lee)于1989年在欧洲核子研究组织(CERN)所发起
GopalFeng
2020/09/24
5860
前端应该知道的 HTTP 知识
推荐阅读
相关推荐
HTTP都到3.0了,你还不了解1和2吗?
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档