网络传输

http

超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的传输协议，它可以使浏览器更加高效，使网络传输减少。

https

是以安全为目标的 HTTP 通道，简单讲是 HTTP 的安全版，即 HTTP 下加入 SSL 层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。 https 协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实性。

http 和 https 的区别

https 协议需要 ca 证书，费用较高。
http 是超文本传输协议，信息是明文传输。
https 则是具有安全性的 ssl 加密传输协议。
使用不同的链接方式，端口也不同，一般而言，http 协议的端口为 80，https 的端口为 443

http 状态码

状态代码有三位数字组成，第一个数字定义了响应的类别，共分五种类别:

1xx：指示信息--表示请求已接收，继续处理
2xx：成功--表示请求已被成功接收、理解、接受
3xx：重定向--要完成请求必须进行更进一步的操作
4xx：客户端错误--请求有语法错误或请求无法实现
5xx：服务器端错误--服务器未能实现合法的请求

常见状态码：

200 OK //客户端请求成功
304 OK //未被修改，从缓存中获取资源
400 Bad Request //客户端请求有语法错误，不能被服务器所理解
401 Unauthorized //请求未经授权
403 Forbidden //服务器收到请求，但是拒绝提供服务
404 Not Found //请求资源不存在，eg：输入了错误的 URL
500 Internal Server Error //服务器发生不可预期的错误
503 Server Unavailable //服务器当前不能处理客户端的请求，一段时间后可能恢复正常

HTTP 缓存

强制缓存

请求的资源本地缓存中有,资源从本地缓存获取,不需要发起请求
协商缓存

协商缓存，也叫对比缓存。一种服务端的缓存策略
- 返回 304 表示缓存中的资源和请求的资源一致
- 返回 200 表示从服务器返回的最新的资源

http2.0

提升访问速度
允许多路复用：

多路复用允许同时通过单一的 HTTP/2 连接发送多重请求-响应信息，改善了：在 http1.1 中，浏览器客户端在同一时间，针对同一域名下的请求有一定数量限制（连接数量），超过限制会被阻塞。
二进制分帧

HTTP2.0 会将所有的传输信息分割为更小的信息或者帧，并对他们进行二进制编码。
首部压缩
服务器端推送

HTTP 支持的方法

GET, POST, HEAD, OPTIONS, PUT, DELETE, TRACE, CONNECT

get 和 post 的区别

get 用来获取数据，post 用来提交数据
get 参数有长度限制（受限于 url 长度，具体的数值取决于浏览器和服务器的限制，最长 2048 字节），而 post 无限制。
get 请求的数据会附加在 url 之，以 " ？"分割 url 和传输数据，多个参数用 "&"连接，而 post 请求会把请求的数据放在 http 请求体中。
get 是明文传输，post 是放在请求体中，但是开发者可以通过抓包工具看到，也相当于是明文的。
get 请求会保存在浏览器历史记录中，还可能保存在 web 服务器的日志中
get 在请求时发送一个数据包，会将 header 和 data 一起发送过去，而 post 会产生两个数据包先发送 header，服务器返回 100，然后在发送 data，服务器返回 200

WebSocket

WebSocket是HTML5下一种新的协议（websocket协议本质上是一个基于tcp的协议）
它实现了浏览器与服务器全双工通信，能更好的节省服务器资源和带宽并达到实时通讯的目的
Websocket是一个持久化的协议

原理

websocket约定了一个通信的规范，通过一个握手的机制，客户端和服务器之间能建立一个类似tcp的连接，从而方便它们之间的通信
在websocket出现之前，web交互一般是基于http协议的短连接或者长连接
websocket是一种全新的协议，不属于http无状态协议，协议名为ws

Fetch

fetch号称是AJAX的替代品，是在ES6出现的，使用了ES6中的promise对象。Fetch是基于promise设计的。Fetch的代码结构比起ajax简单多了，参数有点像jQuery ajax。但是，一定记住fetch不是ajax的进一步封装，而是原生js，没有使用XMLHttpRequest对象。

优点

语法简洁，更加语义化
基于标准 Promise 实现，支持 async/await
同构方便，使用 isomorphic-fetch
更加底层，提供的 API 丰富（request, response）
脱离了 XHR

使用

GET 请求

fetch('https://www.baidu.com/search/error.html', {
    method: 'GET',
})
    .then((res) => {
        return res.text(); // res.json();
    })
    .then((res) => {
        console.log(res);
    });

POST 请求

fetch('https://www.baidu.com/search/error.html', {
    method: 'POST',
    body: new URLSearchParams([
        ['foo', 1],
        ['bar', 2],
    ]).toString(), // 这里是请求对象
})
    .then((res) => {
        return res.text();
    })
    .then((res) => {
        console.log(res);
    });

跨域的原理

跨域，是指浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的，是浏览器对 JavaScript 实施的安全限制，那么只要协议、域名、端口有任何一个不同，都被当作是不同的域。跨域原理，即是通过各种方式，避开浏览器的安全限制。

http学习总结