HTTP/2基礎

HTTP/0.9 --> HTTP/1.0 --> HTTP/1.1 --> SPDY --> HTTP/2

主要新特性：

• 首部壓縮
• 分幀傳輸
• 服務端推送

爲何提出HTTP/2？

網頁請求的資源愈來愈大，愈來愈多，人們對於網頁加載的速度的容忍度愈來愈低，要求愈來愈高。而HTTP/1.1的協議仍是20年前的協議，當時的背景是網頁請求數少，網頁中資源小。所以，亟需升級協議以提升網站的性能。HTTP/2的主要任務就在於此。

1、HTTP進化史

HTTP/0.9（1989）

• 只有GET請求方法
• ×沒有首部

HTTP/1.0（1996）

• +首部

• +響應碼

• +重定向

• +錯誤

• +條件請求

• +內容編碼(壓縮)

• +更多的請求方法（GET POST ...）

  ......

• ×缺乏強制的Host首部

• ×不能讓多個請求共用一個鏈接

• ×緩存的選擇簡陋

HTTP/1.1（1999）

• +強制客戶端提供Host首部，使得虛擬主機託管成爲可能（一個IP提供多個服務器）
• +Web服務器不須要在每一個響應以後關閉鏈接，對於提高性能來講有重大意義
• +緩存相關首部的擴展
• +OPTIONS方法
• +Upgrade首部
• +Range請求
• +transfer-encoding
• +管道化（pipelining） ---服務器和代理經常沒有實現......

SPDY（2009）

• +多路複用
• +分幀傳輸
• +首部壓縮

HTTP/2.0（2015）

相比於HTTP/1.1

• 可感知的多數延遲可以量化的顯著改善
• 解決HTTP中隊頭阻塞問題
• 經過提高TCP鏈接利用率實現並行，而非與服務器創建多個鏈接
• 保留HTTP/1.1的語義（包括：HTTP方法、狀態碼、URL、首部字段...等等）
• 明肯定義HTTP/2.0和HTTP/1.x的交互方法（雙向）

2、Web性能優化動機與方式

當前性能挑戰

當前web應用每一個頁面可能引用數百個對象，關聯數十個域名，網絡環境相差迥異，設備處理能力良莠不齊。這種狀況下提供表現一致且迅速的web體驗不簡單。保證用戶在網站上交互體驗的流暢性，得重視理解客戶端獲取頁面和渲染頁面步驟，從而使得在協議上作出的改進實實在在的提高web的性能。

• 更多的字節
• 更多的資源
• 更高的複雜度
• 更多的域名
• 更多的TCP socket

web頁面請求

1. 資源請求/獲取

   把待請求url放入隊列 --> 解析url中域名的IP地址 --> 創建與目標TCP鏈接 --> 若是是HTTPS，初始化並完成TLS握手 --> 向頁面對應的url發送請求

2. 資源響應/渲染

   接收響應-->是HTML，則解析-->對頁面引用進行有限排序-->添加引用資源到請求隊列-->等待

   ​ -->不是HTML，判斷關鍵資源沒有接收完成 --> 等待

   ​ 關鍵資源接受完成 --> 渲染頁面 --> 還要繼續接受其餘資源 --> 等待

   ​ --> 無其餘資源，頁面渲染結束

關鍵性能指標

1. 延遲
2. 帶寬
3. DNS查詢
4. 創建鏈接時間
5. TLS協商時間
6. 首字節時間
7. 內容下載時間
8. 開始渲染時間
9. 文檔加載完成時間

H1面臨的問題

• 隊頭阻塞
• 低效的TCP利用（擁塞窗口）
• 臃腫的消息首部
• 受限的優先級設置
• 第三方資源限制了加載速度（H2也不可避免）

性能優化技術

DNS查詢優化

1. 限制域名的數量
2. 選擇合適的域名服務器
3. 利用DNS預取指令，例如預取ajax.googleapis.com:頁面中加入標籤<link rel="dns-prefetch" href="//ajax.googleapis.com">, 這樣在下載處理主頁面的同時，預取指令就能開始解析指定的域名。

優化TCP鏈接

1. 利用preconnect指令，如同DNS預取指令：<link rel="preconnect" href="//fonts.example.com">
2. 藉助CDN，使用戶請求的資源儘量近，這樣能夠更快得到響應於是更快終止當前鏈接，減小後續創建新鏈接的延時。

避免重定向

1. 利用CDN代替客戶端在雲端實現重定向
2. 同一域名重定向，在Web服務器端處理（rewrite規則），避免重定向。

客戶端緩存

​ 客戶端緩存TTL（生存時間），設置HTTP首部cache-control及max-age(單位秒)，或者expires首部。

網絡邊緣緩存

​ hold'til told!

條件緩存

​ 304 Not Modified狀態碼，若請求資源發生了變化，則直接返回資源；若請求資源未發生變化，則直接返回內容沒變的提示消息：HTTP首部包含Last-Modified-Since, 請求體中包含實體校驗碼ETag。

壓縮和代碼極簡化

​ 極簡化 --> 無損壓縮（gzip，deflate, brotli）

CSS資源放在JS資源和圖片以前

1. 按期清理不須要的JS資源
2. 若是JS執行順序可有可無，而且必須在onload以前運行，能夠設置async屬性，這樣就能夠並行下載JS。
3. 若是JS執行順尋很重要，而且在DOM加載完成後執行，能夠設置defer屬性。
4. 不影響頁面初次展現的頁面，onload事件觸發後執行。

圖片優化

1. 取出圖片中地理位置、時間戳等元信息
2. 針對於image overloading，可使用技術手段根據用戶設備狀況提供剪裁過的圖片。

反模式

​ 針對於HTTP/1.1適用，但對於H2來講拔苗助長的作法，由於HTTP/2對於每一個域名只會開啓一個鏈接。HTTP/2能夠並行處理多個請求。

1. 生成精靈圖和資源合併/內聯
2. 域名拆分
3. 禁用cookie域名