http1.1 和http2 和 ServiceWorker

什麼香香脆脆我們最愛 2022-01-08 03:49:44 阅读数:412

http1.1 http http2 http serviceworker

之前寫的一篇水文,一次性上傳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和瀏覽器並發限制

那麼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呢?
圖片來源
在這裏插入圖片描述

版权声明:本文为[什麼香香脆脆我們最愛]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/01/202201080349442226.html