http1.1 和http2 和 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呢？

圖檔來源