關注「松寶寫代碼」，精選好文，每日一題

作者： saucxs

愿努力拼搏的你，都能在前進的道路上有所收獲！

一、前言

HTTP 2.0 相比于 HTTP 1.X，可以說是大幅度提高了 web 的性能。

在 HTTP 1.X 中，為了性能考慮，我們會引入雪碧圖、將小圖內聯、使用多個域名等等的方式。這一切都是因為瀏覽器限制了同一個域名下的請求數量，當頁面中需要請求很多資源的時候，隊頭阻塞（Head of line blocking）會導致在達到最大請求數量時，剩余的資源需要等待其他資源請求完成后才能發起請求。

二、HTTP 2.0

感受下 HTTP 2.0 比 HTTP 1.X 到底快了多少，地址：https://http2.akamai.com/demo

image

在 HTTP 1.X 中，因為隊頭阻塞的原因，你會發現請求是這樣的

image

在 HTTP 2.0 中，因為引入了多路復用，你會發現請求是這樣的

image

三、HTTP 2.0核心

3.1 二進制傳輸

HTTP 2.0中所有加強性能的核心帶你在于此--二進制傳輸。

之前的HTTP的版本中，我們傳輸數據方式--文本傳輸。

在HTTP 2.0中引入了新的編碼機制，所有傳輸的數據都會被分隔，并采用二級制格式編碼。

image

3.2 多路復用

在 HTTP 2.0 中，有兩個非常重要的概念，分別是幀（frame）和流（stream）。

幀代表著最小的數據單位，每個幀會標識出該幀屬于哪個流，流也就是多個幀組成的數據流。

多路復用，就是在一個 TCP 連接中可以存在多條流。換句話說，也就是可以發送多個請求，對端可以通過幀中的標識知道屬于哪個請求。通過這個技術，可以避免 HTTP 舊版本中的隊頭阻塞問題，極大的提高傳輸性能。

image

3.3 Header壓縮

在 HTTP 1.X 中，我們使用文本的形式傳輸 header，在 header 攜帶 cookie 的情況下，可能每次都需要重復傳輸幾百到幾千的字節。

在 HTTP 2.0 中，使用了 HPACK 壓縮格式對傳輸的 header 進行編碼，減少了 header 的大小。并在兩端維護了索引表，用于記錄出現過的 header ，后面在傳輸過程中就可以傳輸已經記錄過的 header 的鍵名，對端收到數據后就可以通過鍵名找到對應的值。

3.4 服務端push

在 HTTP 2.0 中，服務端可以在客戶端某個請求后，主動推送其他資源。

可以想象以下情況，某些資源客戶端是一定會請求的，這時就可以采取服務端 push 的技術，提前給客戶端推送必要的資源，這樣就可以相對減少一點延遲時間。當然在瀏覽器兼容的情況下你也可以使用 prefetch 。

3.5 QUIC

這是一個谷歌出品的基于 UDP 實現的同為傳輸層的協議，目標很遠大，希望替代 TCP 協議。

1、該協議支持多路復用，雖然 HTTP 2.0 也支持多路復用，但是下層仍是 TCP，因為 TCP 的重傳機制，只要一個包丟失就得判斷丟失包并且重傳，導致發生隊頭阻塞的問題，但是 UDP 沒有這個機制

2、實現了自己的加密協議，通過類似 TCP 的 TFO 機制可以實現 0-RTT，當然 TLS 1.3 已經實現了 0-RTT 了

3、支持重傳和糾錯機制（向前恢復），在只丟失一個包的情況下不需要重傳，使用糾錯機制恢復丟失的包。糾錯機制：通過異或的方式，算出發出去的數據的異或值并單獨發出一個包，服務端在發現有一個包丟失的情況下，通過其他數據包和異或值包算出丟失包。在丟失兩個包或以上的情況就使用重傳機制，因為算不出來了。

往期「每日一題」

1、JavaScript && ES6

• 第 41 題：【每日一題】(41題)JS代碼到底是如何被壓縮的?

• 第 40 題：【每日一題】(40題)關于script標簽，你可能不知道的地方？

• 第 39 題：【每日一題】(39題)談談JS的函數擴展？

• 第 30 題：【每日一題】(30題)面試官:ES6的解構賦值的理解？

• 第 28 題：【每日一題】(28題)面試官:原型鏈與構造函數結合方法繼承與原型式繼承的區別？

• 第 22 題：【每日一題】(22題)面試官問：var與const,let的主要區別是什么？

• 第 21 題：【每日一題】(21題)面試官問：談談JS中的 this 的綁定？

• 第 20 題：【每日一題】(20題)面試官問：談談JS中的 webSockets 的理解？

• 第 19 題：【每日一題】面試官問：談談JS中的 XMLHttpRequest 對象的理解？

• 第 18 題：【每日一題】面試官問：JS中的 Ajax 跨域與擴展 Comet ？

• 第 17 題：【每日一題】(17題)面試官問：JS中事件流，事件處理程序，事件對象的理解？

• 第 16 題：【每日一題】面試官問：JS中如何全面進行客戶端檢測？

• 第 15 題：【每日一題】面試官問：JS類型判斷有哪幾種方法？

• 第 14 題：【每日一題】面試官問：談談你對JS對象的創建和引申

• 第 13 題[每日一題]面試官問：['1', '2', '3'].map(parseInt)輸出，原因，以及延伸？

• 第 12 題[每日一題]面試官問：JS引擎的執行過程（二）

• 第 11 題[每日一題]面試官問：JS引擎的執行過程（一）

• 第 10 題[每日一題]面試官問：詳細說一下JS數據類型

• 第 8 題[每日一題]面試官問：談談你對ES6的proxy的理解？

• 第 7 題[每日一題]面試官問：for in和for of 的區別和原理？

• 第 6 題[每日一題]面試官問：Async/Await 如何通過同步的方式實現異步？

• 第 3 道「「每日一題」面試官問你對 Promise 的理解？可能是需要你能手動實現各個特性」

• 第 2 道「[每日一題]ES6 中為什么要使用 Symbol？」

2、瀏覽器

• 第 9 題[每日一題]requestAnimationFrame不香嗎？

3、Vue

• 第 5 道「每日一題」到底該如何回答：vue數據綁定的實現原理？

4、React

• 第 38 道【每日一題】(38題)談談React Hooks 與Vue3.0 Function based API的對比？

5、HTML5

• 第 29 道【每日一題】(29題)面試官:HTML-HTML5新增標簽屬性的理解？

6、算法

• 第 37 道【每日一題】(37題)面試官:你對圖論了解多少？(七)

• 第 36 道【每日一題】(36題)面試官:你對圖論了解多少？(六)

• 第 35 道【每日一題】(35題)面試官:你對圖論了解多少？(五)

• 第 34 道【每日一題】(34題)面試官:你對圖論了解多少？(四)

• 第 33 道【每日一題】(33題)面試官:你對圖論了解多少？(三)

• 第 32 道【每日一題】(32題)面試官:你對圖論了解多少？(二)

• 第 31 道[【每日一題】(31題)面試官:你對圖論了解多少？(一)

• 第 27 道【每日一題】(27題)算法題:如何使用多種解決方案來實現跳一跳游戲？

• 第 26 道【每日一題】(26題)算法題:最長公共前綴？

• 第 25 道【每日一題】(25題)算法題:堆數據結構-前 K 個高頻元素？

• 第 24 道【每日一題】(24題)算法題:貪心算法-環游世界之如何加油？

• 第 4 道「每日一題」與面試官手撕代碼：如何科學高效的尋找重復元素？

7、Node

• 第 23 道【每日一題】(23題)面試官問：詳細描述事件循環Event Loop？

8、Http

• 第 1 道「一道面試題是如何引發深層次的靈魂拷問？」

謝謝支持

1、文章喜歡的話可以「分享，點贊，在看」三連哦。

2、作者昵稱：saucxs，songEagle，松寶寫代碼。「松寶寫代碼」公眾號作者，每日一題，實驗室等。一個愛好折騰，致力于全棧，正在努力成長的字節跳動工程師，星辰大海，未來可期。內推字節跳動各個部門各個崗位。

3、長按下面圖片，關注「松寶寫代碼」，是獲取開發知識體系構建，精選文章，項目實戰，實驗室，每日一道面試題，進階學習，思考職業發展，涉及到JavaScript，Node，Vue，React，瀏覽器，http，算法，端相關，小程序等領域，希望可以幫助到你，我們一起成長