一.前言

我們在 HTTP/2 對 Web 性能的影響（上）已經和大家分享了一些關於 Http2 的二項制幀、多用復路以及 APM 工具等，本文作為姊妹篇，主要從 http2 對 Web 性能的影響、http2 使用的利弊以及一些正在進行中的相關工作等方面與大家進行分享。

二.Web 性能影響：與內聯、級聯及圖像精靈説再見？

HTTP/2 多路複用對前端 Web 開發人員造成了深遠的影響。長久以來，人們用盡方法，試圖通過捆綁相關資產來削減連接的數量，而現在這一切都不需要了。人們曾經嘗試過的方法包括：

• JavaScript 與 CSS 文件級聯：將多個小文件合成一個大文件，從而降低總體請求數量。

• 圖像精靈：將多個小圖像合成一張大圖像。

• 域名分片：在多個域之間發送靜態資產請求，從而增加瀏覽器所能允許的總體開放 TCP 連接數量。

• 內聯資產：將資產同 HTML 文檔源綁定，包括 base-64 編碼圖片，以及直接寫入 script 標籤的 JavaScript 代碼。

因為不需要再綁定資產，我們就有了更多機會將 Web 應用程序中的小片段加以緩存。舉個例子可以幫我們更好的理解這一點：

一個級聯且指紋驗證型 CSS 文件被解綁為四個較小的指紋驗證文件。

常見的級聯模式是將一個應用程序內不同頁面的樣式表文件進行綁定，形成單一的 CSS 文件，以減少資產請求的數量。這個大文件隨後會通過文件名內的 MD5 哈希值進行指紋校驗，確保其能夠被瀏覽器主動緩存。遺憾的是，這樣的解決方案意味着，當站點的可視化佈局中出現了任何一點小的改變，如標題字體的改變，都需要重新下載整個級聯文件。

當對小型資產文件進行指紋校驗時，相當一部分的 JavaScript 與 CSS 組件都不會頻繁產生變動，因此可以被瀏覽器緩存 --也就是説，任何一個單一功能的小型重構，不會再導致大量的 JavaScript 應用程序代碼或者 CSS 失效。

最後，級聯機制的消失能夠降低前端構建基礎的複雜性。與以往通過一系列預置步驟來級聯資產不同，現在它們作為小型文件，可以直接被放入 HTML 文檔中。

三.實際使用 HTTP/2 的潛在弊端

僅僅針對支持 HTTP/2 客户端而做出的各類優化，意味着那些不支持 HTTP/2 的瀏覽器可能因此陷入不利境地。那些“有年頭”的瀏覽器們仍然傾向於綁定資產，以此降低連接數量。截至 2016 年 2 月，caniuse.com 網站報道稱，全球瀏覽器中能夠支持 HTTP/2 的佔比 71%。與之前瀏覽器們決定放棄支持 IE 8.0 時一樣，支持 HTTP/2 或採取某種混合作業的方式——這樣的決定只能根據各個網站自身的相關數據來做出。

但是我們相信大規模支持肯定是不可避免的，就像一開始只有 Chrome 瀏覽器支持 window.performance 接口，方便一些 Web 工具進行數據的採集，像上面説過的 Browser Insight ，我曾經和他們的技術支持聊過，就是靠這種方式來實時的採集用户對網站的訪問信息等。之後，大勢所趨，各個瀏覽器廠商都紛紛開放了相關接口

正如可汗學院的博文所述，他們曾分析其網站上的 HTTP/2 流量，事實上，拆分大量資產會增加所傳輸字節的總量。而使用zlib壓縮單一大型文件，比壓縮多個小型文件要更有效率。對於擁有成百上千解綁資產的 HTTP/2 站點來説，這種效應更為顯著。

在瀏覽器中使用 HTTP/2 還要求我們通過 TLS 進行資產傳遞。對於菜鳥們來説，設置 TLS 證書就是個煩人的活兒。幸運的是，諸如 Let’s Encrypt 的開源項目正努力讓證書註冊工作變得更加便捷。

四.仍在進行中的工作

大部分用户並不在意你的站點用了啥協議——他們只想要它速度快，運行如人預期。雖然 HTTP/2 已經獲得正式批准快一年了，開發人員還在學習如何利用它來建立更快速網站的最優實踐。換用 HTTP/2 的好處更多取決於具體站點的架構情況以及使用現代瀏覽器的用户比率。再有就是，調試新協議很有挑戰性，更易用的開發工具還在研製中。

雖然有這些挑戰，HTTP/2 的採納度仍在增加。根據研究人員掃描流行網站屬性的結果，排名前列的站點中使用 HTTP/2 的一直在增加，特別是 CloudFlare 和 WordPress 在 2015 年宣佈提供支持之後。在考慮轉換到新協議時，很重要的一點是利用 Browser insight 和 NewRelic 之類的 APM 工具，仔細測量資源和頁面在不同環境下的加載時間。

如下圖所示，可以看到每一次慢加載的詳細情況，非常方便。

供應商和專業網站人員都熟悉這一轉換背後的含義，從真實用户數據中做出判斷才是關鍵的。在網站臃腫危機的當下，無論何種協議，都應該以削減資源數量為目標。

在此 HTTP/2 系列的第二部分中，我們會聚焦於如何在服務器上實現 HTTP/2 和調試真實網絡通信的具體實現細節。

本文作者為 Clay Smith，由 OneAPM 產品運營進行翻譯編輯

原文地址：https://dzone.com/articles/how-http2-is-...

Browser Insight 是一個基於真實用户的 Web 前端性能監控平台，能夠幫大家定位網站性能瓶頸，網站加速效果可視化；支持瀏覽器、微信、App 瀏覽 HTML 和 HTML5 頁面。想閲讀更多技術文章，請訪問 OneAPM 官方技術博客。
本文轉自 OneAPM 官方博客