前端應該了解的HTTP2

leo108 發布于2019-08-19 18:17 / 1550人閱讀

摘要：二進制分幀在應用層與傳輸層之間增加一個二進制分幀層，以此達到在不改動的語義，方法狀態碼及首部字段的情況下，突破的性能限制，改進傳輸性能，實現低延遲和高吞吐量。

歡迎一起交流

歡迎關注我的個人公眾號，不定期更新自己的工作心得。

Why HTTP2 慢

影響一個網絡請求的因素主要有兩個，帶寬和延遲。今天的網絡基礎建設已經使得帶寬得到極大的提升，大部分時候都是延遲在影響響應速度。

連接無法復用

連接無法復用會導致每次請求都經歷三次握手和慢啟動。三次握手在高延遲的場景下影響較明顯，慢啟動則對文件類大請求影響較大。

head of line blocking

head of line blocking會導致帶寬無法被充分利用，以及后續健康請求被阻塞。

HTTP1.0 -> HTTP1.1

不過pipelining并不是救世主，它也存在不少缺陷：

pipelining只能適用于http1.1，一般來說，支持http1.1的server都要求支持pipelining

只有冪等的請求（GET，HEAD）能使用pipelining，非冪等請求比如POST不能使用，因為請求之間可能會存在先后依賴關系。

head of line blocking并沒有完全得到解決，server的response還是要求依次返回，遵循FIFO(first in first out)原則。也就是說如果請求1的response沒有回來，2，3，4，5的response也不會被送回來。

絕大部分的http代理服務器不支持pipelining。

和不支持pipelining的老服務器協商有問題。

可能會導致新的Front of queue blocking問題。

HTTP2 VS HTTP1.1 多路復用

多路復用通過多個請求stream共享一個tcp連接的方式，解決了http1.x holb（head of line blocking）的問題，降低了延遲同時提高了帶寬的利用率。

壓縮頭部

HTTP/2.0規定了在客戶端和服務器端會使用并且維護「首部表」來跟蹤和存儲之前發送的鍵值對，對于相同的頭部，不必再通過請求發送，只需發送一次。

事實上,如果請求中不包含首部（例如對同一資源的輪詢請求），那么首部開銷就是零字節。此時所有首部都自動使用之前請求發送的首部。

如果首部發生變化了，那么只需要發送變化了數據在Headers幀里面，新增或修改的首部幀會被追加到“首部表”。首部表在 HTTP2.0的連接存續期內始終存在,由客戶端和服務器共同漸進地更新。

二進制分幀

在應用層與傳輸層之間增加一個二進制分幀層，以此達到“在不改動HTTP的語義，HTTP 方法、狀態碼、URI及首部字段的情況下，突破HTTP1.1的性能限制，改進傳輸性能，實現低延遲和高吞吐量。”

在二進制分幀層上，HTTP2.0會將所有傳輸的信息分割為更小的消息和幀,并對它們采用二進制格式的編碼，其中HTTP1.x的首部信息會被封裝到Headers幀，而我們的request body則封裝到Data幀里面。

客戶端和服務器可以把HTTP消息分解為互不依賴的幀，然后亂序發送，最后再在另一端把它們重新組合起來。注意，同一鏈接上有多個不同方向的數據流在傳輸。客戶端可以一邊亂序發送stream，也可以一邊接收者服務器的響應，而服務器那端同理。

請求優先級

多路復用導致所有資源都是并行發送，那么就需要「優先級」的概念了，這樣就可以對重要的文件進行先傳輸，加速頁面的渲染。

服務器推送

服務器推送是指在客戶端請求之前發送數據的機制。

另外有一點值得注意的是，客戶端如果退出某個業務場景，出于流量或者其它因素需要取消server push，也可以通過發送RST_STREAM類型的frame來做到。

HTTP2 實踐

這里使用 Node.js 作為服務器端語言。

1. 生成TLS證書

如果想要在生產環境中使用HTTP2，那么你可以去這里生成一個證書。

如果你僅僅開發環境使用，那么我們可以自己生成一個自簽名的TSL證書。

安裝OpenSSH

使用OpenSSH生成私鑰

openssl genrsa -des3 -passout pass:1234 -out server.pass.key 2048`

這里 1234 為私鑰密碼，如果你不想使用密碼，則可以去除私鑰密碼，敲入如下密令：

openssl rsa -passin pass:x -in server.pass.key -out server.key

創建證書簽名請求
這里使用無密碼私鑰，如果使用帶密碼私鑰，只需將server.key更換為server.pass.key即可，密令如下

openssl req -new -key server.key -out server.csr

創建證書

openssl x509 -req -days 365 -in server.csr -signkey server.key -out server.crt

通過以上四個步驟，我們得到了三個文件

server.key 你的TSL證書私鑰

server.csr 你的TSL證書簽名請求

server.crt 你的TSL證書

2. 使用Node.js 創建服務器

安裝 node-http2 模塊

npm install http2

創建服務器

var options = {
  key: fs.readFileSync("./server.key"),
  cert: fs.readFileSync("./server.crt")
};

require("http2").createServer(options, function(request, response) {
  response.end("Hello world!");
}).listen(8080);

啟動服務器

node index.js

使用瀏覽器訪問

http://localhost:8080

到此，一個簡單的Demo就完成了。

Demo源碼下載

點擊這里訪問完整Demo

https://github.com/zhanyouwei...

測試結果對比

通過上面兩張截圖可以發現，使用了HTTP2后，同樣的請求，在數據傳輸大小與速度上都有非常大的提升，幾乎可以預見，不久的將來，HTTP2將會大放異彩。

GPU云服務器云服務器深度學習的了解對大數據的了解了解域名的注冊過程 json的對象了解

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/79421.html

前端系列——nodejs環境下http2初嘗試

摘要：基礎理論是二進制協議這是一個復用協議。使用現狀案例淘寶案例京東案例知乎案例二月的公司不好意思，我們還沒用上這么牛逼的協議。本文內容很淺，想要了解更多的知識，可以去知乎搜相關文章和回答。目的 http2出來也有段時間了，很多網站都已經實際應用了它，而我還活在http1.1的時代，趁著還年輕，記性還行，花點時間研究了http2在nodejs中的使用。 http2基礎理論 HTTP2是二...

bigdevil_s 2019-08-26 11:38 評論0 收藏0
前端基本功-常見概念(一)

摘要：前端基本功常見概念一點這里前端基本功常見概念二點這里前端基本功常見概念三點這里什么是原型鏈當一個引用類型繼承另一個引用類型的屬性和方法時候就會產生一個原型鏈。函數式編程是聲明式而不是命令式，并且應用程序狀態通過純函數流轉。前端基本功-常見概念(一) 點這里前端基本功-常見概念(二) 點這里前端基本功-常見概念(三) 點這里 1.什么是原型鏈當一個引用類型繼承另一個引用類型的屬性和方...

bladefury 2019-08-23 14:41 評論0 收藏0
面試必考之http狀態碼有哪些

摘要：背景狀態碼有哪些，這也是一個很高頻的面試問題。總結僅僅三個狀態碼，都可以牽涉到如此豐富的知識，對于狀態碼，我們不能只是片面的去背誦狀態碼及對應的含義，要去主動挖掘，深入，借助狀態碼來建立自己的網絡體系。背景 http狀態碼有哪些，這也是一個很高頻的面試問題。一般大家都知道404頁面不存在，500服務器錯誤，301重定向，302臨時重定向，200ok，401未授權啥的。如果只是簡單的...

wing324 2019-08-26 11:50 評論0 收藏0