【专栏试读】前后端交互 |（01）交互的规则、标准：HTTP——① 五层网络模型和 HTTP 协议的发展历史

itsOli
29,775 阅读11分钟 
原创：itsOli  @前端一万小时

本文首发于公众号「前端一万小时」

本文版权归作者所有，未经授权，请勿转载！

本文节选自“语雀”私有付费专栏「前端一万小时 | 从零基础到轻松就业」

❗️❗️❗️
以下链接为本文最新勘误篇章——《【专栏试读】前后端交互 |（01）交互的规则、标准：HTTP——① 五层网络模型和 HTTP 协议的发展历史》


涉及面试题.png

1. HTTPS 是如何实现加密的？
2. HTTP 和 HTTPS 的区别？
3. 如何实现页面每次打开时清除本页缓存？

🙋上方面试题“参考答案详解”，请点击此处查看获取方式！


前言： HTTP 这个知识点，它和我们“前端”本身是没有直接相关的（它不涉及 HTML、CSS、JS 等前端知识）。但作为“Web 程序员”，我们不可能写一个页面就只在自己的电脑上看看，肯定是需要跟后端进行“交互”。

“交互”靠什么？

“HTTP 协议” 就是“交互”的一个桥梁！一点都不了解 HTTP，那肯定也寸步难行。且后边的文章、实战部分，很多都是以默认掌握 HTTP 相关知识为前提进行讲解的。

所以，完全弄懂“前后端交互”系列的 19 篇文章（❗️文章有先后顺序，已在各文章的标题上作了区分，请严格按照文章顺序阅读），将使你在实际面试和工作中更加游刃有余！

❗️❗️❗️在开始本篇前，请再次阅读《（01）老生常谈的从 URL 输入到页面展现背后发生的事 | Web 前置知识》，先宏观上了解整个“流程”。


1 什么是“HTTP 协议”

Web（万维网）使用一种名为 HTTP（HyperText Transfer Protocol，超文本传输协议）的“协议”作为规范，完成“客户端”到“服务器”等一系列运作流程。而“协议”是指“规则”的约定！可以说，Web 是建立在 HTTP 协议上通信的。

❓什么是“协议”？

答：不同的硬件、操作系统之间的通信，所有的这一切都需要一种“规则”，以使其双方基于相同的方法。且这些繁杂的“规则”都需要事先进行确定，无规矩不成方圆。

比如：

  • 如何探测到通信目标？
  • 由哪一边先发起通信？
  • 使用哪种语言进行通信？
  • 怎样结束通信？
  • ……

所以，这些“规则”就是我们所说的“协议（protocol）”。


2 经典五层模型

在正式讲解“HTTP 协议”的详细内容之前，我们需要了解一些“网络通讯”方面的知识。也只有储备了这些知识，我们后边在正式讲解“HTTP 协议”时，才能达到事半功倍的效果。

要弄清楚整个网络信息传输的过程，我们首先绕不开的就是“经典五层模型”：

interaction_01-1.png

❗️注：

  • 客户端：请求访问文本或图像的一端称为“客户端”；
  • 服务端：提供资源响应的一端称为“服务端”。

这个“五层模型”存在于每台电脑和服务器上，其被用于维护整个网络数据传输的过程。

即，我们自己的电脑也可以作为一台 Web 服务器来提供网络服务。

❗️注意：本系列文章，我们不会深入讲解下边三层的内容（网络层、数据链路层、物理层）。我们主要的精力会放在与我们前端直接相关的“应用层”上（因为“HTTP 协议”是在“应用层”上边去实现的）！当然，“传输层”也有一些与 HTTP 直接相关的知识点，所以也会按需讲解。

2.1 “低三层”主要做的事情

interaction_01-2.png

这三层属于比较底层的知识，大家先懂个大概，知道各自是什么、有什么用即可，暂时不必要深究。

  • 物理层： 主要作用是定义物理设备如何传输数据。即，我们电脑的硬件、网卡端口、网线，以及网线连出去之后需要有一根光缆为我们把数据传输到互联网、传输到相关服务器等。

    所以，若没有“物理层”，则所有的软件都无法使用！

  • 数据链路层：它的作用是在通信的实体间建立“数据链路”连接。即，虽然两台机器在物理层面是可以连接在一起了，但也必须要有一个“软件服务”帮我们去通过物理的设备创建一个电路的连接，使两边可以传输数据（如 0101 ）。

  • 网络层： 它的作用是为数据在节点之间传输创建“逻辑链路”。即，我的电脑想去访问百度的服务器，而如何去寻找到百度的服务器所在地址，就是一个“逻辑关系”。

2.2 传输层

interaction_01-3.png

“传输层”主要有两个协议——TCP 和 UDP。更多情况下我们是使用 TCP 协议，它是一个更可靠的协议，用于帮我们去传输数据。

2.2.1 传输层为我们提供了“端对端 End-to-End”的服务

“端对端 End-to-End”服务是指：当建立起了从我自己的电脑到诸如百度的服务器之间的连接之后，定义它们两端应该如何去传输数据。即，传输数据的方式都是在这一层去定义的。

传输的数据有可能很大，也可能很小。但如果传输的数据很大，一次性不能全部传输过去，那么就会涉及“分包”、“分片”。待这些“分片”的数据传输过去后，对方又需要进行相应地“组装”。

这些“如何去组装”、“如何去传输”等协议都是在“传输层”去定义的。

2.2.2 传输层向高层屏蔽了下层数据通信的细节

由于“HTTP 协议”实现在 TCP/IP 协议上，故“HTTP 协议”要传输一个数据就显得特简单。

如：我们只需要在浏览器里边输入一个 URL 并回车后，它就会自动发送一些相关的数据到服务器端。然后服务器解析这些数据并返回给浏览器，浏览器再渲染出页面。

其实，我们输入 URL 这个过程，会涉及一系列复杂的数据拼装和传输的动作。但作为用户、作为网页开发者，我们是不需要知道它里边是怎样去“分片”、怎样去跟服务器连接等操作的。

也正因为不需要知道，故“传输层”就主动地帮我们封装掉了。

当然，“不需要知道”不代表“不可以知道”，如果我们能更好地去理解这背后的一系列过程，其可以帮助我们从细节上去实现一个性能更高的“HTTP 协议”使用方式。

2.3 应用层

interaction_01-4.png

“HTTP 协议”就是在这个层级去实现的。

  • 为应用软件提供了很多便利的服务，我们只需要去使用与“HTTP 协议”相关的工具，它就可以帮我们去传输数据。
  • 构建于“TCP/IP 协议”之上。
  • 屏蔽了网络传输相关的细节。

3 “HTTP 协议”发展历史

3.1 HTTP/0.9

HTTP 于 1990 年问世。

在这个版本中，“HTTP 协议”的内容特别简单：

  • 只有一个命令——GET；
  • 由于当时的数据请求特别简单，所以没有 HEADER 等描述数据的信息；
  • 服务器发送完内容之后，就把“TCP 连接”给关闭了。

3.2 HTTP/1.0

HTTP/1.0 发布于 1996 年 5 月。

这个版本和我们目前普遍使用的 HTTP/1.1 版本差别不大。

它有如下特点：

  • 增加了很多命令（GET、POST、PUT、HEAD…）；

  • 增加了 Status Code 和 Header 等内容：

    • Status Code 是用来描述服务端处理某一个请求之后的状态；
    • Header 用于表示对“请求”或“发送”数据的相关描述，以及对这部分“数据”如何进行操作的方法。

  • 增加了对多字符集支持、多部分发送、权限、缓存等。

3.3 HTTP/1.1

HTTP/1.1 发布于 1997 年 1 月。

这个版本是在 HTTP/1.0 的基础上增加了一些功能，以优化整个网络连接的过程：

  • 增加了“持久连接”——在 HTTP/1.0 中，“一个 HTTP 请求”就需要在客户端和服务端创建一个“TCP 连接”。且，当“TCP 连接”创建完成，待服务端返回完内容后，“TCP 连接”就会关闭掉！

    这就带来了很高的成本，因为在建立一个“TCP 连接”的过程中，其“HTTP 三次握手”会带来很大的消耗和延迟，用一次就关掉肯定不是最佳实践。

    故，HTTP/1.1 版本为我们解决了这个问题——当创建完一个“TCP 连接”后，它不会关闭，后续新的“HTTP 请求”可以一直在这个连接里边进行发送。

  • 增加了“pipeline”——当我们在同一个“TCP 连接”里边发送多个“HTTP 请求”时，服务端会对这些“HTTP 请求”按顺序进行内容返回。

    ❗️当然，这里就会带来一个问题：如果前一个请求的处理时间明显长于后一个请求，后一个请求也不会先于第一个请求发送。这也就体现出了“串行”和“并行”的性能差异。

    幸好，HTTP/2.0 版本对其进行了优化。

  • 增加 Host 和其他一些命令：

    • 有了 Host 之后，我们就可以在一台物理服务器上，同时跑多个不同的 Web 服务（如，一个 Node.js 的 Web 服务，一个 Java 的 Web 服务。然后通过 Host 这个字段来表示：我都是请求到这台物理服务器上，但区分出请求的到底是哪一个“软件服务”——Node.js/Java）。

      其好处很明显：由于可以在同一台物理服务器上部署很多不同的 Web 服务，所以就大大提高了物理服务器的使用效率。

3.4 HTTP/2.0 

此版本目前还未普及，但离全面普及只是时间问题。

它有如下强大的特点：

  • 所有数据都以“二进制”进行传输——在 HTTP/1.1 中，我们大部分的数据传输都是通过“字符串”的形式。HTTP/2.0 与 HTTP/1.1 相比，它的数据“分片方式”是不一样的。在 HTTP/2.0 中，所有的数据都是以“帧”进行传输。

    正因为是以“帧”进行传输，所以在同一个“TCP 连接”里面发送多个“HTTP 请求”时，不再需要按照顺序进行返回处理，它可以“并行”发送。如此一来，就大大提高了 Web 应用的传输效率。

  • 在 HTTP/1.1 的基础上增加了“头部信息压缩”及“推送”等提高效率的功能：

    • 头部信息压缩： 在 HTTP/1.1 中，我们每一次发送和返回请求时，它的很多“HTTP 头”都需要一个完整的发送和返回。但，“HTTP 头”信息里的很多内容（Cache-Control、Accept、Content-Type 等）都是以“字符串”的形式保存的，它们会占用很大的“带宽”量。

      在 HTTP/2.0 中，其对“HTTP 头”信息进行了压缩，有效减少了带宽的使用。

    • “推送”功能： 在 HTTP/1.1 中，“HTTP 请求”只能是“客户端”发起请求，然后“服务端”响应请求、返回内容。即，“客户端”永远是主动方，“服务端”永远是被动方。

      而在 HTTP/2.0 中，其增加了“推送”功能，它让“服务端”也可以主动发起数据传输了。


      🚀一个现实例子就是： 我们写的 Web 页面里边一般都会有“CSS 文件”和“JS 文件”，它们都是以“链接”的方式放在 HTML文本信息中。

      在 HTTP/1.1 下，浏览器是先请求到 HTML 文本信息，然后进行内容的解析，当解析到 CSS 或 JS 对应的 URL 地址时，浏览器会再次去服务器请求对应的 CSS 和 JS 文件。即，这整个流程对应的是一个严格的顺序问题。

      而在 HTTP/2.0 下，由于有了“推送”功能，当浏览器在请求 HTML 文档的同时，“服务器”可以主动把 HTML 中所引用的 CSS 和 JS 文件推送到“客户端”。这样的话，HTML、CSS、JS 的发送顺序就变成“并行”的，也就大大提高了传输的效率。

3.5 HTTPS

HTTPS 是安全版本的 HTTP，它的实际使用跟目前普遍使用的 HTTP/1.1 没什么大的区别。后续我们会专门讲解 HTTPS 的相关用法，这里先不赘述。


后记： 下一篇我们讲解“HTTP 的三次握手”，以及 URI、URL 和 URN 的概念。

理论知识学习需要耐心，认真跟着行文顺序过一遍必会受益匪浅。

祝好，qdywxs ♥ you！

avatar
文章
阅读
粉丝