Skip to content

Commit

Permalink
feat:http2.0
Browse files Browse the repository at this point in the history
  • Loading branch information
hejialiang committed Mar 4, 2021
1 parent 0557f0a commit c5f5f84
Show file tree
Hide file tree
Showing 5 changed files with 29 additions and 10 deletions.
Binary file added docs/.vuepress/public/assets/network/hpack.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 19 additions & 3 deletions docs/computerNetwork/protocal.md
Original file line number Diff line number Diff line change
Expand Up @@ -835,7 +835,7 @@ Alibaba向第三方证书机构申请证书,第三方机构用根证书的私
#### :tomato: HTTP 1.1 排队问题

HTTP 1.1多个文件共用一个TCP,这样可以减少tcp握手,这样3个文件就不用握手9次了,不过这样请求文件需要排队,请求和返回都需要排队,
如果第一个文件响应慢,会阻塞后面的文件,这样就产生了对头的等待问题
如果第一个文件响应慢,会阻塞后面的文件,这样就产生了对头的等待问题

有的网站可能会有很多文件,浏览器处于对机器性能的考虑,它不可能让你无限制的发请求建连接,因为建立连接需要占用资源,浏览器不想把用户的网络资源都占用了,所以浏览器最多会建立6个tcp连接;如果有上百个文件可能都需要排队,http2.0正在解决这个问题。

Expand All @@ -845,18 +845,34 @@ HTTP 1.1多个文件共用一个TCP,这样可以减少tcp握手,这样3个

1. 多路复用

把几个请求打包成一个小块去请求,并行发送
http1.1是一个请求过去,一个请求返回来,然后在进行下一个请求;其实是在排队的。http2.0发现2个请求比较靠近,把2个请求打包成一个请求发过去;也就是说把几个请求打包成一个小块去请求,并行发送;即使一个阻塞了,另一个还能回来,可以并行的出去也可以并行的回来;假如第一个请求需要0.8秒,第二个第三个各需要0.5秒;那么http2.0可以在0.8秒内把这3个一起去请求,这样只需0.8秒,即使一个阻塞了也不影响其他的返回。

![](~@/network/http2.0.png)

2. 防止对头阻塞

http1.1如果第一个文件阻塞,第二个文件也就阻塞了。

![](~@/network/http1status.png)

http2.0的解决,把3个请求打包成一个小块发送过去,即使第一个阻塞了,后面2个也可以回来;相当于3个文件同时请求,就看谁先回来谁后回来,阻塞的可能就后回来,对带宽的利用是最高的;但没有解决TCP的对头阻塞,如果TCP发过去的一个分包发丢了,他会重新发一次;http2.0的解决了大文件的阻塞。

![](~@/network/http2.0scheme.png)

一个分包请求3个文件,即使第一个阻塞了,第二个也能返回

3. 压缩头部

- HPACK技术

例如:METHOD GET 用2表示
例如:METHOD GET 用2表示,就是我用2去表示METHOD GET,这样不就小了,这样压缩比率非常大,可以参考下面表代表Header压缩后的字符。

![](~@/network/hpack.png)

3. 服务端推送

我们现在的网站是先请求一个html,然后加载这个html,如果这个html有js文件和css文件,在去请求js和css;有没有可能html、js、css一起推送过来,这样是不是快很多。

当也有一个问题,现在页面主要是js渲染,那么js的先后顺序影响了页面的渲染;那么服务端推送也就存在问题了。

### 1.8.3 HTTP2.0
17 changes: 10 additions & 7 deletions docs/engineering/tool.md
Original file line number Diff line number Diff line change
Expand Up @@ -131,7 +131,7 @@ charles不能直接抓包https,所以我们还需要进行以下操作

1. 移动端配置代理

与上面http配置完全相同
与上面http配置完全相同<font color="red">**(切记!!!这一步一定要做,只有配置了代理服务,才能下载证书,因为这是你电脑上charles给你颁发的,你换了电脑还需要另一个电脑给你颁发)**</font>

2. 添加要解析的域名列表

Expand All @@ -146,7 +146,11 @@ charles不能直接抓包https,所以我们还需要进行以下操作

- 在移动端用浏览器访问`https:chls.pro/ssl`下载证书描述文件
- 安卓:直接安装即可
- IOS:1.在设置-通用-描述文件与设置管理中安装证书,2.然后开启 设置-通用-关于本机-针对根证书启用完全信任
- IOS:
1. 在设置-通用-描述文件与设置管理中安装证书,
2. 然后开启 设置-通用-关于本机-针对根证书启用完全信任

<font color="red">**(当你访问上面chls网站时,电脑上charles会有一个弹窗询问你是否允许给手机安装证书,你要点同意(allow))**</font>

:tomato: HTTPS 协议

Expand All @@ -167,14 +171,13 @@ charles做客户端和服务端的中介,代理了https请求;charles会动
关掉charles的External Proxy setting:点击顶部Proxy-> 去掉勾选 External Proxy Settings

2. 开启后手机浏览器无法打开网页

检测顶部Proxy-> macOS Proxy 是否勾选;需要勾选(window名称不一样);

打开网络偏好设置-> 高级 -> 代理 -> 检测网页代理和安全网页代理是否开启(需要开启)
- 要保证电脑和手机同一个Wi-Fi,手机上填的代理服务器ip不要填错了,可以查看charles:Help/Local IP Address;端口一般是8888
- 打开https的网站,会提醒不是安全连接,说明你证书没有安装正确,或者没有信任
- 一般就上诉2个问题,也可以重启试试

3. 关闭charles后 无法联网

打开网络偏好设置-> 高级 -> 代理 -> 检测网页代理和安全网页代理是否开启(不需要开启)
打开网络偏好设置-> 高级 -> 代理 -> 检测网页代理和安全网页代理是否开启(不需要开启,你关闭charles后就没有代理服务器了,记得手机也取消代理配置

4. 抓取手机端的返回的是unknow

Expand Down

0 comments on commit c5f5f84

Please sign in to comment.