一.前言
我們在 HTTP/2 對 Web 性能的影響（上）已經(jīng)和大家分享了一些關(guān)于 Http2 的二項制幀溃论、多用復(fù)路以及 APM 工具等拜姿，本文作為姊妹篇，主要從 http2 對 Web 性能的影響、http2 使用的利弊以及一些正在進行中的相關(guān)工作等方面與大家進行分享。
二.Web 性能影響：與內(nèi)聯(lián)键袱、級聯(lián)及圖像精靈說再見？
HTTP/2 多路復(fù)用對前端 Web 開發(fā)人員造成了深遠的影響摹闽。長久以來蹄咖，人們用盡方法，試圖通過捆綁相關(guān)資產(chǎn)來削減連接的數(shù)量付鹿，而現(xiàn)在這一切都不需要了澜汤。人們曾經(jīng)嘗試過的方法包括：
- JavaScript 與 CSS 文件級聯(lián)：將多個小文件合成一個大文件铝量，從而降低總體請求數(shù)量。
- 圖像精靈：將多個小圖像合成一張大圖像银亲。
- 域名分片：在多個域之間發(fā)送靜態(tài)資產(chǎn)請求，從而增加瀏覽器所能允許的總體開放 TCP 連接數(shù)量纽匙。
- 內(nèi)聯(lián)資產(chǎn)：將資產(chǎn)同 HTML 文檔源綁定务蝠，包括 base-64 編碼圖片，以及直接寫入 script 標(biāo)簽的 JavaScript 代碼烛缔。
因為不需要再綁定資產(chǎn)馏段，我們就有了更多機會將 Web 應(yīng)用程序中的小片段加以緩存。舉個例子可以幫我們更好的理解這一點：
一個級聯(lián)且指紋驗證型 CSS 文件被解綁為四個較小的指紋驗證文件践瓷。
常見的級聯(lián)模式是將一個應(yīng)用程序內(nèi)不同頁面的樣式表文件進行綁定院喜，形成單一的 CSS 文件，以減少資產(chǎn)請求的數(shù)量晕翠。這個大文件隨后會通過文件名內(nèi)的 MD5 哈希值進行指紋校驗喷舀，確保其能夠被瀏覽器主動緩存。遺憾的是淋肾，這樣的解決方案意味著硫麻，當(dāng)站點的可視化布局中出現(xiàn)了任何一點小的改變，如標(biāo)題字體的改變樊卓，都需要重新下載整個級聯(lián)文件拿愧。
當(dāng)對小型資產(chǎn)文件進行指紋校驗時，相當(dāng)一部分的 JavaScript 與 CSS 組件都不會頻繁產(chǎn)生變動碌尔，因此可以被瀏覽器緩存 --也就是說浇辜，任何一個單一功能的小型重構(gòu)，不會再導(dǎo)致大量的 JavaScript 應(yīng)用程序代碼或者 CSS 失效唾戚。
最后柳洋，級聯(lián)機制的消失能夠降低前端構(gòu)建基礎(chǔ)的復(fù)雜性。與以往通過一系列預(yù)置步驟來級聯(lián)資產(chǎn)不同颈走，現(xiàn)在它們作為小型文件膳灶，可以直接被放入 HTML 文檔中。
三.實際使用 HTTP/2 的潛在弊端
僅僅針對支持 HTTP/2 客戶端而做出的各類優(yōu)化立由，意味著那些不支持 HTTP/2 的瀏覽器可能因此陷入不利境地轧钓。那些“有年頭”的瀏覽器們?nèi)匀粌A向于綁定資產(chǎn)，以此降低連接數(shù)量锐膜。截至 2016 年 2 月毕箍，caniuse.com 網(wǎng)站報道稱，全球瀏覽器中能夠支持 HTTP/2 的占比 71%道盏。與之前瀏覽器們決定放棄支持 IE 8.0 時一樣而柑，支持 HTTP/2 或采取某種混合作業(yè)的方式——這樣的決定只能根據(jù)各個網(wǎng)站自身的相關(guān)數(shù)據(jù)來做出文捶。
但是我們相信大規(guī)模支持肯定是不可避免的，就像一開始只有 Chrome 瀏覽器支持 window.performance 接口媒咳，方便一些 Web 工具進行數(shù)據(jù)的采集粹排，像上面說過的 Browser Insight ，我曾經(jīng)和他們的技術(shù)支持聊過涩澡，就是靠這種方式來實時的采集用戶對網(wǎng)站的訪問信息等顽耳。之后，大勢所趨妙同，各個瀏覽器廠商都紛紛開放了相關(guān)接口
正如可汗學(xué)院的博文所述射富，他們曾分析其網(wǎng)站上的 HTTP/2 流量，事實上粥帚，拆分大量資產(chǎn)會增加所傳輸字節(jié)的總量胰耗。而使用zlib壓縮單一大型文件，比壓縮多個小型文件要更有效率芒涡。對于擁有成百上千解綁資產(chǎn)的 HTTP/2 站點來說柴灯，這種效應(yīng)更為顯著。
在瀏覽器中使用 HTTP/2 還要求我們通過 TLS 進行資產(chǎn)傳遞费尽。對于菜鳥們來說弛槐，設(shè)置 TLS 證書就是個煩人的活兒。幸運的是依啰，諸如 Let’s Encrypt 的開源項目正努力讓證書注冊工作變得更加便捷乎串。
四.仍在進行中的工作
大部分用戶并不在意你的站點用了啥協(xié)議——他們只想要它速度快，運行如人預(yù)期速警。雖然 HTTP/2 已經(jīng)獲得正式批準(zhǔn)快一年了叹誉，開發(fā)人員還在學(xué)習(xí)如何利用它來建立更快速網(wǎng)站的最優(yōu)實踐。換用 HTTP/2 的好處更多取決于具體站點的架構(gòu)情況以及使用現(xiàn)代瀏覽器的用戶比率闷旧。再有就是长豁，調(diào)試新協(xié)議很有挑戰(zhàn)性，更易用的開發(fā)工具還在研制中忙灼。
雖然有這些挑戰(zhàn)匠襟，HTTP/2 的采納度仍在增加。根據(jù)研究人員掃描流行網(wǎng)站屬性的結(jié)果该园，排名前列的站點中使用 HTTP/2 的一直在增加酸舍，特別是 CloudFlare 和 WordPress 在 2015 年宣布提供支持之后。在考慮轉(zhuǎn)換到新協(xié)議時里初，很重要的一點是利用 Browser insight 和 NewRelic 之類的 APM 工具啃勉，仔細測量資源和頁面在不同環(huán)境下的加載時間。
如下圖所示双妨，可以看到每一次慢加載的詳細情況淮阐，非常方便叮阅。
供應(yīng)商和專業(yè)網(wǎng)站人員都熟悉這一轉(zhuǎn)換背后的含義，從真實用戶數(shù)據(jù)中做出判斷才是關(guān)鍵的泣特。在網(wǎng)站臃腫危機的當(dāng)下浩姥，無論何種協(xié)議，都應(yīng)該以削減資源數(shù)量為目標(biāo)状您。
在此 HTTP/2 系列的第二部分中及刻，我們會聚焦于如何在服務(wù)器上實現(xiàn) HTTP/2 和調(diào)試真實網(wǎng)絡(luò)通信的具體實現(xiàn)細節(jié)。
本文作者為 Clay Smith竞阐，由 OneAPM 產(chǎn)品運營進行翻譯編輯
原文地址：https://dzone.com/articles/how-http2-is-changing-web-performance-best-practic
Browser Insight 是一個基于真實用戶的 Web 前端性能監(jiān)控平臺，能夠幫大家定位網(wǎng)站性能瓶頸暑劝，網(wǎng)站加速效果可視化骆莹；支持瀏覽器、微信担猛、App 瀏覽 HTML 和 HTML5 頁面幕垦。想閱讀更多技術(shù)文章，請訪問 OneAPM 官方技術(shù)博客傅联。
本文轉(zhuǎn)自 OneAPM 官方博客
