1. 程式人生 > >記升級一次的http2學習

記升級一次的http2學習

col 技術 per 數據 怎麽 優勢 情況 我們 chrome瀏覽器

首先,就先對比下http2和http1.X的區別和升級它的優勢吧。

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

http2.0引入了多路復用

在 HTTP 2.0 中,有兩個非常重要的概念,分別是幀(frame)和流(stream)。

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

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

而且,不僅如此http2會對header頭壓縮

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

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

說了這麽多理論的,大家一定想看下對比速度,鏈接對比速度。

怎麽升級http2呢?

1.首先你的網站必須要有https的前提條件。

2.你在你的網站必須配置下 openssl 1.1.0c(具體方法上網百度下);

3.你的nginx必須在1.9之上,而且你的nginx不能用yum下載的(我之前就是用yum下載的),因為你的nginx必須配置一些模塊,而且也要鏈接openssl(具體也百度下)。

那麽,你怎麽知道你的網站升級http2.0成功了沒有。

chrome瀏覽器 下載插件:HTTP/2 and SPDY indicator 插件裝上之後,訪問網站顯示藍色閃電圖標的就是網站當前使用了http 2.0 協議,如下圖所示

技術分享圖片

既然成功,那麽來測試下網站的打開速度吧,下面我推薦用hiper插件來檢測網站的打開速度

技術分享圖片這是我沒升級的http2.0時的打開速度。

技術分享圖片這是我升級了http2.0的打開速度。

從圖中的對比可以看出,網站的打開速度得到了提升。

下面就順便介紹下hiper的使用技巧

hiper 開頭,加上以下配置
   -v, --version                output the version number
   -n, --count <n>              指定加載次數(default: 20-c, --config <path>          載入配置文件
   -u, --useragent <ua>         設置useragent
   -H, --headless [b]           是否使用無頭模式(default: true-e, --executablePath <path>  使用指定的chrome瀏覽器
   --no-cache                   禁用緩存(default: false--no-javascript              禁用javascript(default: false--no-online                  離線模式(defalut: false-h, --help                   output usage information

一般用以下命令就可以了

hiper -n 100 baidu.com --no-cache  
// 禁用緩存鏈接百度100次

記升級一次的http2學習