丁鹿学堂：前端要学习的http知识总结汇总（一）

http协议前端深入理解之入门和基础工具介绍

http协议的内容已经成为前端必须要掌握的理论知识，也是我们面试的重点和工作中需要经常接触的的东西。

http协议简介

http协议，全称超文本传输协议（Hyper Text Transfer Protocol）
它是用来处理客户端和服务端之间的通信
它的核心设计思想非常简单，就是http请求和http返回
一开始设计出来就是用于网页，json，xml，提交表单这些功能的支持。

http的设计理念

http的设计理念非常简洁，就是纯文本+无状态
文本大家都可读，传播容易，利于推广。
无状态就是每次请求都是独立的，请求间互不影响。
但是有时候需要我们有状态，所以浏览器提供了手段去维护状态（cookie，session等）
http是一个应用层的协议

http的历史

1991 HTTP0.9
1996 HTTP1.0
1999 HTTP1.1
2015 HTTP2.0
需要注意的是，1.1是到现在为止，影响立最大的版本。2015年升级了2.0，很多大公司都应用上了。
2.0相对于于1.1在速度上提升了很多。

设计http协议的设计因素

1 带宽
基础的网络，比如线路，设备，但是现在我们的带宽都比较大，所以基本不用考虑了。
2延迟
我们访问网页，dns查询，建立连接这些都需要时间，会造成一定的延迟。

因为这些因素，http在设计上做出了很多优化
1 缓存
http1.0提供缓存机制，比如IF-Modified-Since等基础缓存控制策略
http1.1 提供E-Tag等高级缓存策略
简单理解，就是我加载过的东西，不需要再加载一遍。
2 带宽优化
http1.1 利用range头获取文件的某个部分
http1.1利用长连接让多个请求在一个TCP连接上排队，这样可以减少tcp握手的一些开销。
http2.0 利用多路复用技术同时传递多个请求
3 资源压缩
http2.0采用二进制传输，头部使用HPACK算法压缩
但是主流服务器都提供gzip压缩功能
4 安全性
https 是安全超文本传输协议，多了一个secure
在http和tcp/ip之间增加了一个TSL/SSl层，一开始是SSL（安全套接层），后面使用更安全的TSL（传输层安全协议）
数据传输加密，是非对称+对称加密的。防止各种攻击手段（信息泄露，篡改等）
它是需要客户端安装证书的。

http协议代码实现（nodeJS实现）

http协议是一个文本传输协议，传输内容是我们可读的文本，大体分成两部分
1 请求头/返回头
2 消息体

const net = require('net')
const response = `
HTTP/1.1 200 OK
Data: Tue,30 Jun 2023 12:00:40 GMT
Content-Type: text/plain
Connection:CLosed

Hello Http
`
const server = net.createServer(socket =>{
    socket.end(response)
})
server.listen(80,()=>{
    console.log('server in run...')
})

常用的开发工具

1 Chrome浏览器，是前端开发经常使用的，开源免费，拥有强大的调试能力
2cUrl 是一个命令，在命令行是和服务器交互，主要用来传输一个url，他支持非常多的协议
urlData 是你要访问的网址

C:\Users\Administrator>curl -I urlData
HTTP/1.1 200 OK
Accept-Ranges: bytes
Cache-Control: private, no-cache, no-store, proxy-revalidate, no-transform
Connection: keep-alive
Content-Length: 277
Content-Type: text/html
Date: Wed, 29 Mar 2023 19:07:55 GMT
Etag: "575e1f60-115"
Last-Modified: Mon, 13 Jun 2016 02:50:08 GMT
Pragma: no-cache

3fetch
fetch是一个新的，在网络上获取数据的标准接口。
用fetch发请求，返回的是一个标准的promise对象
它提供了自定义header的能力和跨域的能力。
4 postman 是我们和后端接口联调经常使用的，是一个协作型的api开发工具，国内的话有一款apifox，也是不错的。
5 Whistle
它是一个跨平台的网络调试工具
安装： npm install whistle -g
注意：
1 需要SwitchOmega插件的安装支持
2它是一个node应用，需要先安装node
3它支持抓包，重放，替换，修改等功能。