HTTP/2 Server Push 詳解（上）

收錄待用，修改轉載已取得騰訊雲受權

---

譯者：TAT.Johnny

原文：https://www.smashingmagazine.com/2017/04/guide-http2-server-push/

做者：Jeremy Wagner

譯者按：網絡優化一直是譯者長期研究的方向，HTTP/2 的理論學習也已作了很多，隨着這項標準的推動，愈來愈多特性被你們開始使用。做爲 HTTP/2 最激動人心的特性，Server Push 在性能提高的效果被寄予了很高指望，卻因其對傳統 B/S 架構的開發模式影響較大未能普遍實踐。如何更好地使用這項能力，讓咱們跟着做者深刻探索。

在過去的一年時間，HTTP/2 的出現爲關注性能的開發者帶來了顯著的變化。HTTP/2 已經再也不是咱們期待中的特性，而是伴着 Server Push（服務端推送）能力已然到來。

除了解決常見的 HTTP/1 性能問題（好比，首部阻塞和未壓縮的報頭），HTTP/2 還提供了 Server Push 能力！服務端推送容許咱們向用戶發送一些尚未被訪問的資源。這是一種得到 HTTP/1 優化實踐（例如內聯）所帶來性能提高的優雅方式，同時也避免了原先實踐的一些缺點。

本文中，你將瞭解什麼是 Server Push，它的工做原理與解決了哪些問題。同時你也將學習如何使用它，判斷它是否正常運做，以及它對性能的影響。讓咱們開始吧！

Server Push 爲什麼物

訪問網站始終遵循着請求——響應模式。用戶將請求發送到遠程服務器，在一些延遲後，服務器會響應被請求的內容。

對網絡服務器的初始請求一般是一個 HTML 文檔。在這種狀況下，服務器會用所請求的 HTML 資源進行響應。接着瀏覽器開始對 HTML 進行解析，過程當中識別其餘資源的引用，例如樣式表、腳本和圖片。緊接着，瀏覽器對這些資源分別發起獨立的請求，等待服務器返回。

典型的服務器通訊(大圖)

這一機制的問題在於，它迫使用戶等待這樣一個過程：直到一個 HTML 文檔下載完畢後，瀏覽器才能發現和獲取頁面的關鍵資源。從而延緩了頁面渲染，拉長了頁面加載時間。

有了 Server Push，就有了解決上述問題的方案。Server Push 能讓服務器在用戶沒有明確詢問下，搶先地「推送」一些網站資源給客戶端。只要正確地使用，咱們能夠根據用戶正在訪問的頁面，給用戶發送一些即將被使用的資源。

好比說你有一個網站，全部的頁面都會在一個名爲 styles.css 的外部樣式表中，定義各類樣式。當用戶向務器請求 index.html 時，咱們能夠向用戶推送 styles.css，同時咱們發送 index.html。

使用HTTP/2 Server Push的Web服務器通訊（大圖）

相比等待服務器發送 index.html，而後等待瀏覽器請求並接收 styles.css，用戶只需等待服務器的響應，就可在初次請求同時使用 index.html 和 styles.css。

能夠想象，這能夠下降一個頁面的渲染時間。它還解決了一些其餘問題，特別是在前端開發工做流方面。

Server Push 解決了什麼問題？

Server Push 解決了減小關鍵內容網絡迴路的耗時問題，但這並非惟一做用。Server Push 更像是 HTTP/1 特定優化反模式的替代方案，例如將 CSS 和 JavaScript 內聯在 HTML，以及使用data URI方案將二進制數據嵌入到 CSS 和 HTML 中。

這些技術在 HTTP/1 優化工做流中很是受用，是由於這樣減小了咱們所說的頁面「感知渲染時間」，也就是說在頁面總體加載時間可能不會減小的同時，對用戶而言網頁的加載速度卻顯得更快。這確實是說得通的，若是你將 CSS 內嵌到 HTML 的