之前写的一篇水文,一次性上传300张图片引发的思考
在12.02上了热搜。关注者从8个涨到400多个,诚惶诚恐。感谢大家的支持和android小姐姐的漂亮眼影。
上热搜和涨粉丝不是本意,csdn只是记录一下 技术日常(之前自己做过博客,不过大部分精力都耗费在打扮和维护网站上,所以图省事直接使用了csdn)。文章里面偶尔说几句骚话还可以,但是不会为了上热搜,取一些哗众取宠的标题或打一些擦边球。废话止于此,正片开始。
1. 浏览器并发限制
1.1 浏览器
在之前说到过,http1.1 的情况下,浏览器会有默认的并发限制。默认6个一组
图片链接
1.1.1 stalled是什么呢
1.1.2 为什么浏览器会有这个限制
图片来源
图片来源
这里说的Facade模式,在对中间层的一些浅略的思考 这篇文章中有一些提及
1.2 题外话-爬虫
浏览器会限制连接数。但是爬虫脚本不会 。即使是http1.1的网址,爬虫请求也可以达到每秒请求任意次。
所以写爬虫code的时候需要注意,每秒循环次数不要过多。为了别人,也为了自己。
2. http1.1
2.1 查看http1.1
如果查看网站是使用的http1.1还是http2。 其实很简单,只需要在f12的network中打开相关配置就可以
图片来源
可以看到,http2是这样的:
http1.1是这样的:
2.2 http1.1和https
如果http1.1 有浏览器并发限制,那https也没有呢?
图片来源
图片来源
3. http2
3.1 http2和浏览器并发限制
3.2 什么是多路复用
上面说到http2 只所以没有浏览器并发限制,是因为它可以tcp多路复用。那么如果知道它是多路复用呢?
图片来源
图片来源
可以看到如果tcp是复用的,那么connectID就是相同的。来实际看一下:
① http1.1 的connectID是各不相同的
② http2 的connectID 在一段时间内是都相同的
3.3 开启http2
如何从http1.1 转为http2 。可以看 怎样把网站升级到http/2.。这篇文章说的很好,但是可能说的比较复杂,又是nginx版本又是openssl版本的。推荐一个小窍门:直接修改nginx配置,重启nginx试试看。
如果,足够幸运。可以看到和我这个一样。只是变成了http2. 之前的6个并发也消失了
3.4 http1.1小趣文
虽然大部分主流网站,都是http2 了。但是百度确是http1.1
为什么百度还在使用http1.1协议而没有使用http2?
4. ServiceWorker
4.1 network 小齿轮的疑问
在之前的项目上面偶然看见,一次请求发送了2次。而且一个带齿轮,一个不带。但是通过查看日志,的确是发送了一次请求。这是为什么呢?
通过搜索资料,发现有人说这个是servicewroker
图片来源
通过查看,的确有一个写了**from ServiceWorker**。有一个没写
4.2 ServiceWorker介绍
关于ServiceWorker的初步介绍,可以略看 Service Worker: 简介 和 Service Worker ——这应该是一个挺全面的整理
在这里插入图片描述
4.3 ServiceWorker和http1.1
service worker不一定是http2, 1 也可以
4.4 ServiceWorker和https
Service workers只能由HTTPS承载
4.6 为什么会是2次请求
之前已经说过,开启ServiceWorker。会通过network看见2次请求,一次带小齿轮,一次不带。
图片来源
图片来源
4.5 ServiceWorker和angular
4.5.1 必须通过https访问
必须通过https访问ServiceWorker,上面有提及
4.5.2 部分浏览器不支持
部分浏览器不支持ServiceWorker
4.5.3 如何配置
4.5.4 实际工作
4.5.5 正在缓存什么
4.5.6 如何关闭
如果不想使用 ServiceWorker,如何关闭呢
可以看到,已经没有小齿轮了
一般项目默认是打开的。打开以后比关闭的快一些,以之前一次性上传300张图片引发的思考 为例:
关闭以后,1个25kb,300个大约 7500 kb = 7.32M; 需要大概10s。
打开以后,同样300张图片,需要大概 8.73s
4.7 ServiceWorker和http2的疑惑
细心的可能注意到,。service worker 将2次请求,http2 降为了1,connnection id 变成了0
这是为什么呢?我们明明开启了http2。为什么会自动降为http1.1,就算是变成了http1.1, connectID 又为什么是0呢?
图片来源