前端开发实战基础——http、https 基础知识

  1. List item

文章目录

http协议

定义

http ，全称为Hypertext Transfer Protocol，中文翻译过来就是 超文本传输协议。一种客户端——服务端协议，是一个简单的请求—响应协议。他是web上进行数据交换的基础。

我们日常上网冲浪浏览的网页，通常是有多个文件组合合成——包括HTML文件、JavaScript文件、CSS文件、图片资源等文件，经过浏览器构建出来的，才会最终以画面的形式展示到屏幕前。

这些文件是存储在远程的服务器（另一台电脑），我们浏览器通过发起一个请求，这个请求被封装在一个http 请求内部，服务器也是通过这个http 请求这个协议，解析出来服务器要返回什么内容作为响应。

在这里插入图片描述
接下来我们来了解一些http 的发展历史

http 发展

http/0.9–单行协议

最初版本的 HTTP 协议并没有版本号，后来它的版本号被定位在 0.9 以区分后来的版本。HTTP/0.9 极其简单：请求由单行指令构成，以唯一可用方法 GET 开头，其后跟目标资源的路径（一旦连接到服务器，协议、服务器、端口号这些都不是必须的）。
例如下面的请求
HTTP/0.9 只需要 GET开头。后面跟随资源路径

GET /mypage.html

响应也极其简单的：只包含响应文档本身。那时候资源还是静态的。

<html>
  这是一个非常简单的 HTML 页面
</html>

0.9版本和后面版本很大不同，响应的内容不包含HTTP 头，这意味着只有HTML 文件可以传送，无法传输其他类型的文件。

有没有对应的状态码，一旦出现问题，一个特殊的包含问题描述信息的HTML文件将被发回，供人们查看，

http/1.0–构建可扩展性

因为http/0.9 有很大问题，http1.0 在其基础上有了优化，有一下的方面

  • 增加协议版本号，这个版本号会随着每一次请求发送，追加在末尾（HTTP/1.0 会追加到get 行）
  • 增加HTTP 标头 的概念，无论是请求还是响应，允许传输元数据，使得协议更加灵活
  • 在http 标头的功能下，具备传输出纯超文本外，其他文件的能力(借助Content-Type 字段)

一个典型的请求类似这样

GET /mypage.html HTTP/1.0
User-Agent: NCSA_Mosaic/2.0 (Windows 3.1)

200 OK
Date: Tue, 15 Nov 1994 08:12:31 GMT
Server: CERN/3.0 libwww/2.17
Content-Type: text/html
<HTML>
一个包含图片的页面
  <IMG SRC="/myimage.gif">
</HTML>

接下来是第二个连接，请求获取图片（并具有相同的响应）：

GET /myimage.gif HTTP/1.0
User-Agent: NCSA_Mosaic/2.0 (Windows 3.1)

200 OK
Date: Tue, 15 Nov 1994 08:12:32 GMT
Server: CERN/3.0 libwww/2.17
Content-Type: text/gif
(这里是图片内容)

在这些优化被提出来之后，仅仅是一种尝试，并没有引进到实际的工作中作为标准。因为中间出现一些客户端和服务器的互操作问题，直到1996年才被解决，并发布文档 RFC 1945 定义了 HTTP/1.0。

https

由于http 是明文传输的，数据安全问题急需解决。1994年，网景公司在 HTTP 基本的TCP/IP 协议基础上，创建一个额外的加密传输层：SSL。但是SSL1.0 没有对外发布。
SSL2.0 及其后继者SSL3.0 允许通过加密来保障服务器和客户端之间的交换信息真实性。最终SSL在标准化道路成为TLS 。

https 就是在http 基础上增加一层SSL加密传输层，使得信息交换更加安全。

http/1.1–标准化的协议

http1.1 在http1.1 基础上，消除大量歧义内容并进行多项改进，如下

  • 连接可以复用，减少http断开与重新连接的时间，加快响应

  • 增加管线化技术，即允许第一个请求被完全发送出去之后，就可以接着发送第二个请求，无需等待第一个请求被响应，降低延迟。

  • 支持响应分块，这个对动态内容很实用，因为服务器一开始也不知道要一共发送多少内容，通过分块形式传输到客户端，客户端接受到第一块数据，就开始处理，加快的客户端响应时间。

  • 引入额外的缓存控制机制

  • 引入内容协商机制，包括语言(Accept-Language)、编码(Accept-Encoding)、类型等。并允许客户端和服务器之间约定以最合适的内容进行交换。

  • 增加 Host 标头，能够使不同域名配置在同一个 IP 地址的服务器上。

一个典型的请求流程，所有请求都通过一个连接实现，看起来就像这样：

GET /zh-CN/docs/Glossary/Simple_header HTTP/1.1
Host: developer.mozilla.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://developer.mozilla.org/zh-CN/docs/Glossary/Simple_header

200 OK
Connection: Keep-Alive
Content-Encoding: gzip
Content-Type: text/html; charset=utf-8
Date: Wed, 20 Jul 2016 10:55:30 GMT
Etag: "547fa7e369ef56031dd3bff2ace9fc0832eb251a"
Keep-Alive: timeout=5, max=1000
Last-Modified: Tue, 19 Jul 2016 00:59:33 GMT
Server: Apache
Transfer-Encoding: chunked
Vary: Cookie, Accept-Encoding

(content)


GET /static/img/header-background.png HTTP/1.1
Host: developer.mozilla.org
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.9; rv:50.0) Gecko/20100101 Firefox/50.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate, br
Referer: https://developer.mozilla.org/zh-CN/docs/Glossary/Simple_header

200 OK
Age: 9578461
Cache-Control: public, max-age=315360000
Connection: keep-alive
Content-Length: 3077
Content-Type: image/png
Date: Thu, 31 Mar 2016 13:34:46 GMT
Last-Modified: Wed, 21 Oct 2015 18:27:50 GMT
Server: Apache

(image content of 3077 bytes)
http/2

http/2在http1.1基础上做了以下的改进

  • HTTP/2 使用二进制协议进行传输，相比于HTTP/1.X的文本传输协议，拥有更快的解析和编码速度，响应速度更快。

  • 采用多路复用。并行的请求能够在同一个TCP连接中处理请求和响应，移除了HTTP/1.X 中顺序和阻塞约束。

    http/1.1 的管线化技术虽然支持在同一个tcp连接上，发起多个请求，但服务器还是按照请求顺序来返回请求结果。也就是说，如果第一个请求时间很长，一样会影响其他请求的响应。

    而http/2.0 多路复用解决了这个问题，真正做到不同请求并行处理，互不影响。

  • 压缩了标头。因为标头在很多类型请求都是相似的，移除了重复和重复传输的数据

  • 允许服务器在客户端缓存中填充数据，通过一个叫服务器推送机制赖提前请求。

http/3

http/3.0 在传输层采用 QUIC而不是 TCP，它有以下的特点

  • 多路复用，通过UDP运行多个流，每个流可以单独实现数据丢包检测和重传，比Http/2基于一个流检测丢失机制处理速度更快。

http 工作机制

当客户端想要和服务端进行数据交换，都需要进过下面的几步

  1. 创建一个TCP连接：TCP连接被用来发送一条或者多条请求，以及用来接受响应信息。
  2. 发送一个HTTP报文：HTTP报文在HTTP/2采用二进制之前都是可读的，http/2 报文信息报封装在帧中，使得不可读，但原理是相同的。
GET / HTTP/1.1
Host: developer.mozilla.org
Accept-Language: zh
  1. 读取服务端返回的报文
HTTP/1.1 200 OK
Date: Sat, 09 Oct 2010 14:28:02 GMT
Server: Apache
Last-Modified: Tue, 01 Dec 2009 20:18:22 GMT
ETag: "51142bc1-7449-479b075b2891b"
Accept-Ranges: bytes
Content-Length: 29769
Content-Type: text/html

<!DOCTYPE html>…（此处是所请求网页的 29769 字节）
  • 关闭连接或者为后续请求重用连接。

小结

  • HTTP 是请求请求-响应协议，其通过TCP或者TLS连接来发送和接受响应信息
  • HTTP/1.1 实现管线化技术，允许TCP连接上，可以并行发送多个请求，但响应处理还是按照先进先出原则，也会造成堵塞
  • HTTP/2 采用二进制格式，采用多路复用机制，可以做到同一个TCP连接上并行处理请求和响应，解决阻塞问题