我們?cè)?HTTP/2 對(duì) Web 性能的影響（上）已經(jīng)和大家分享了一些關(guān)于 Http2 的二項(xiàng)制幀、多用復(fù)路以及 APM 工具等，本文作為姊妹篇，主要從 http2 對(duì) Web 性能的影響、http2 使用的利弊以及一些正在進(jìn)行中的相關(guān)工作等方面與大家進(jìn)行分享。
HTTP/2 多路復(fù)用對(duì)前端 Web 開(kāi)發(fā)人員造成了深遠(yuǎn)的影響。長(zhǎng)久以來(lái)，人們用盡方法，試圖通過(guò)捆綁相關(guān)資產(chǎn)來(lái)削減連接的數(shù)量，而現(xiàn)在這一切都不需要了。人們?cè)?jīng)嘗試過(guò)的方法包括：
因?yàn)椴恍枰俳壎ㄙY產(chǎn)，我們就有了更多機(jī)會(huì)將 Web 應(yīng)用程序中的小片段加以緩存。舉個(gè)例子可以幫我們更好的理解這一點(diǎn)：
一個(gè)級(jí)聯(lián)且指紋驗(yàn)證型 CSS 文件被解綁為四個(gè)較小的指紋驗(yàn)證文件。
常見(jiàn)的級(jí)聯(lián)模式是將一個(gè)應(yīng)用程序內(nèi)不同頁(yè)面的樣式表文件進(jìn)行綁定，形成單一的 CSS 文件，以減少資產(chǎn)請(qǐng)求的數(shù)量。這個(gè)大文件隨后會(huì)通過(guò)文件名內(nèi)的 MD5 哈希值進(jìn)行指紋校驗(yàn)，確保其能夠被瀏覽器主動(dòng)緩存。遺憾的是，這樣的解決方案意味著，當(dāng)站點(diǎn)的可視化布局中出現(xiàn)了任何一點(diǎn)小的改變，如標(biāo)題字體的改變，都需要重新下載整個(gè)級(jí)聯(lián)文件。
當(dāng)對(duì)小型資產(chǎn)文件進(jìn)行指紋校驗(yàn)時(shí)，相當(dāng)一部分的 JavaScript 與 CSS 組件都不會(huì)頻繁產(chǎn)生變動(dòng)，因此可以被瀏覽器緩存 –也就是說(shuō)，任何一個(gè)單一功能的小型重構(gòu)，不會(huì)再導(dǎo)致大量的 JavaScript 應(yīng)用程序代碼或者 CSS 失效。
最后，級(jí)聯(lián)機(jī)制的消失能夠降低前端構(gòu)建基礎(chǔ)的復(fù)雜性。與以往通過(guò)一系列預(yù)置步驟來(lái)級(jí)聯(lián)資產(chǎn)不同，現(xiàn)在它們作為小型文件，可以直接被放入 HTML 文檔中。
僅僅針對(duì)支持 HTTP/2 客戶端而做出的各類優(yōu)化，意味著那些不支持 HTTP/2 的瀏覽器可能因此陷入不利境地。那些“有年頭”的瀏覽器們?nèi)匀粌A向于綁定資產(chǎn)，以此降低連接數(shù)量。截至 2016 年 2 月，caniuse.com 網(wǎng)站報(bào)道稱，全球?yàn)g覽器中能夠支持 HTTP/2 的占比 71%。與之前瀏覽器們決定放棄支持 IE 8.0 時(shí)一樣，支持 HTTP/2 或采取某種混合作業(yè)的方式——這樣的決定只能根據(jù)各個(gè)網(wǎng)站自身的相關(guān)數(shù)據(jù)來(lái)做出。
但是我們相信大規(guī)模支持肯定是不可避免的，就像一開(kāi)始只有 Chrome 瀏覽器支持 window.performance 接口，方便一些 Web 工具進(jìn)行數(shù)據(jù)的采集，像上面說(shuō)過(guò)的 Browser Insight ，我曾經(jīng)和他們的技術(shù)支持聊過(guò)，就是靠這種方式來(lái)實(shí)時(shí)的采集用戶對(duì)網(wǎng)站的訪問(wèn)信息等。之后，大勢(shì)所趨，各個(gè)瀏覽器廠商都紛紛開(kāi)放了相關(guān)接口
正如可汗學(xué)院的博文所述，他們?cè)治銎渚W(wǎng)站上的 HTTP/2 流量，事實(shí)上，拆分大量資產(chǎn)會(huì)增加所傳輸字節(jié)的總量。而使用zlib壓縮單一大型文件，比壓縮多個(gè)小型文件要更有效率。對(duì)于擁有成百上千解綁資產(chǎn)的 HTTP/2 站點(diǎn)來(lái)說(shuō)，這種效應(yīng)更為顯著。
在瀏覽器中使用 HTTP/2 還要求我們通過(guò) TLS 進(jìn)行資產(chǎn)傳遞。對(duì)于菜鳥(niǎo)們來(lái)說(shuō)，設(shè)置 TLS 證書(shū)就是個(gè)煩人的活兒。幸運(yùn)的是，諸如 Let’s Encrypt 的開(kāi)源項(xiàng)目正努力讓證書(shū)注冊(cè)工作變得更加便捷。
大部分用戶并不在意你的站點(diǎn)用了啥協(xié)議——他們只想要它速度快，運(yùn)行如人預(yù)期。雖然 HTTP/2 已經(jīng)獲得正式批準(zhǔn)快一年了，開(kāi)發(fā)人員還在學(xué)習(xí)如何利用它來(lái)建立更快速網(wǎng)站的最優(yōu)實(shí)踐。換用 HTTP/2 的好處更多取決于具體站點(diǎn)的架構(gòu)情況以及使用現(xiàn)代瀏覽器的用戶比率。再有就是，調(diào)試新協(xié)議很有挑戰(zhàn)性，更易用的開(kāi)發(fā)工具還在研制中。
雖然有這些挑戰(zhàn)，HTTP/2 的采納度仍在增加。根據(jù)研究人員掃描流行網(wǎng)站屬性的結(jié)果，排名前列的站點(diǎn)中使用 HTTP/2 的一直在增加，特別是 CloudFlare 和 WordPress 在 2015 年宣布提供支持之后。在考慮轉(zhuǎn)換到新協(xié)議時(shí)，很重要的一點(diǎn)是利用 Browser insight 和 NewRelic 之類的 APM 工具，仔細(xì)測(cè)量資源和頁(yè)面在不同環(huán)境下的加載時(shí)間。
如下圖所示，可以看到每一次慢加載的詳細(xì)情況，非常方便。
供應(yīng)商和專業(yè)網(wǎng)站人員都熟悉這一轉(zhuǎn)換背后的含義，從真實(shí)用戶數(shù)據(jù)中做出判斷才是關(guān)鍵的。在網(wǎng)站臃腫危機(jī)的當(dāng)下，無(wú)論何種協(xié)議，都應(yīng)該以削減資源數(shù)量為目標(biāo)。
在此 HTTP/2 系列的第二部分中，我們會(huì)聚焦于如何在服務(wù)器上實(shí)現(xiàn) HTTP/2 和調(diào)試真實(shí)網(wǎng)絡(luò)通信的具體實(shí)現(xiàn)細(xì)節(jié)。
本文作者為 Clay Smith，由 OneAPM 產(chǎn)品運(yùn)營(yíng)進(jìn)行翻譯編輯
聯(lián)系客服
