在過去十年中，Web 技術(shù)已經(jīng)取得了種種進(jìn)展。從基本的 HTML 開始，網(wǎng)頁發(fā)展出更豐富的外觀和感覺，變得更加直觀，對(duì)用戶更加友好并且越來越大放異彩。這些變化的關(guān)鍵貢獻(xiàn)來自于一些新的和翻新技術(shù)，且借力于***的硬件發(fā)展和更好的網(wǎng)絡(luò)連接支持。但性能，自始至終都是 Web 應(yīng)用關(guān)注的領(lǐng)域。

近年來，JavaScript 庫，CSS 庫和插件的火爆使得每個(gè)頁面都可能包含大量 JavaScript、CSS、圖片或者其他資源文件。許多場景下，一個(gè)頁面會(huì)向服務(wù)器發(fā)起超過50條 http 請(qǐng)求，而且每條請(qǐng)求會(huì)與服務(wù)器創(chuàng)建一個(gè)新的 TCP 連接，檢索文件，然后關(guān)閉這個(gè)連接。這意味著與服務(wù)器建立了超過50個(gè) TCP 連接。創(chuàng)建和處理每一個(gè)連接都是一個(gè)代價(jià)沉重的過程，除此之外，很多瀏覽器會(huì)限制并發(fā)連接的數(shù)量，通常限制個(gè)數(shù)在4至8個(gè)不等。

在過去15年中，HTTP 協(xié)議本身并沒有太大的改變。 現(xiàn)在采用的 HTTP 1.1 早在1997年就定義了，而自那時(shí)以來，網(wǎng)絡(luò)已經(jīng)發(fā)生了翻天覆地的變化。IETF(互聯(lián)網(wǎng)工程任務(wù)組)意識(shí)到這些新的挑戰(zhàn)，并已經(jīng)為此與 POC 協(xié)同工作了一段時(shí)間?，F(xiàn)在，他們提出了 HTTP 協(xié)議的一個(gè)新版本——HTTP/2，該協(xié)議目前正處于標(biāo)準(zhǔn)化進(jìn)程中。

HTTP/2 是什么?

HTTP/2 是 HTTP 協(xié)議的第二個(gè)主要版本，該版本關(guān)注于減少延遲時(shí)間，從而提高頁面加載速度。它基于谷歌的 SPDY 協(xié)議，包括以下主要項(xiàng)目：

在單一的 TCP 連接中并行加載多個(gè)請(qǐng)求

在 HTTP headers 部分啟用壓縮

允許服務(wù)器將內(nèi)容推送到客戶端

與早期版本有何不同?

最初的 HTTP 版本為每一個(gè)請(qǐng)求使用一個(gè)新的 TCP 連接，這涉及建立連接和數(shù)據(jù)包傳輸，是非常耗時(shí)的過程。HTTP1.1 中完成了很多改變，流水線被引入，理論上允許在單一的連接中發(fā)送多個(gè)請(qǐng)求，但請(qǐng)求和響應(yīng)需要同步處理。 HTTP/2 是基于 SPDY 協(xié)議的，打開一個(gè) TCP 連接并重復(fù)使用，這使得許多請(qǐng)求得以并行發(fā)送，而無需等待響應(yīng)。讓我們來形象地查看該過程：

除此之外，它也支持壓縮 HTTP headers 和服務(wù)器推送(如前所述)。在下面的例子中，我們將看到它如何影響網(wǎng)頁加載。

在 ASP.NET4.6 中使用 HTTP/2

一個(gè)典型的 Web 頁面中會(huì)引用許多不同的資源，如 JavaScript 文件，CSS 文件，圖像等。在下面的例子中，筆者使用 Visual Studio 2015創(chuàng)建了一個(gè) ASP.NET 4.6 空 Web 表單應(yīng)用示例，并在其中引用了網(wǎng)頁中常見的一些資源。然后，筆者為該應(yīng)用添加了一個(gè) Web 表單和多種資源，請(qǐng)參照下列代碼：

``` HTTP2 Demo using ASP.NET Web forms 4.6

</div> 
 <!-- JavaScript file resources --> 
<script src="Scripts/jquery-1.10.2.js"></script> 
<script src="Scripts/jquery-1.10.2.min.js"></script> 

```

上面的頁面引用了19個(gè)不同的資源(3 個(gè) CSS 文件，8個(gè)圖像文件，8個(gè) JS 文件)以模擬現(xiàn)實(shí)中的頁面。之后，筆者在安裝了 IIS10 的 Win Server 2016(Windows 10 也可以)上部署該應(yīng)用。現(xiàn)在是時(shí)候來測試應(yīng)用程序了。

測試結(jié)果

首先，筆者將使用 HTTP1.1 運(yùn)行此應(yīng)用，并分析其加載時(shí)間。然后，筆者移動(dòng)到 HTTP2 以了解兩種協(xié)議的差異。運(yùn)行該應(yīng)用，查看開發(fā)者工具欄中的網(wǎng)絡(luò)選項(xiàng)(大多數(shù)瀏覽器都提供開發(fā)者工具欄，敲擊 F12 即可啟用)。這一項(xiàng)將顯示網(wǎng)頁發(fā)送的請(qǐng)求數(shù)，其等待時(shí)間，開始時(shí)間，加載時(shí)間及其他相關(guān)細(xì)節(jié)。

通過仔細(xì)查看上圖中的細(xì)節(jié)，會(huì)發(fā)現(xiàn)它使用的是 HTTP1.1 協(xié)議，在第三列(協(xié)議)中標(biāo)明。此外，它如預(yù)期一般加載了所有的 JavaScript，CSS 和圖像文件，但它們的開始時(shí)間有所不同。很明顯，之前的一些請(qǐng)求完成之后，之后的請(qǐng)求才會(huì)立即啟動(dòng)。由于瀏覽器并行連接數(shù)的限制，***一次請(qǐng)求必須等待大約4.5秒。這個(gè)頁面的總加載時(shí)間約為9.59秒。

現(xiàn)在，轉(zhuǎn)換到 HTTP2 協(xié)議，打開同一個(gè)網(wǎng)頁，看看有什么差異。為此，將地址欄中的 URL 從 HTTP 改為 HTTPS 并重新加載頁面，再次查看開發(fā)者工具欄中的網(wǎng)絡(luò)選項(xiàng)：

在這里，時(shí)間線看起來完全不同，所有請(qǐng)求都在同一時(shí)間開始。另外，頁面的加載時(shí)間減少了80%，也就是2秒左右。這清楚地表明，在 http1.1 中同步傳送的請(qǐng)求在此處都是并發(fā)地傳送到服務(wù)器的。***一個(gè)請(qǐng)求的等待時(shí)間僅為70毫秒。

最近，我們使用了 bundling 、minifiction 之類的技術(shù)提高應(yīng)用性能，但這些技術(shù)也有一些限制(例如，只適用于 JavaScript 和 CSS 文件)。每種類型的文件，必須在不同的包中添加，即使是將所有同類型文件放在同一個(gè)包文件里也是不推薦的。應(yīng)該根據(jù)應(yīng)用的各個(gè)網(wǎng)頁創(chuàng)建用途不同的包。 HTTP2 將開發(fā)者從這些復(fù)雜的功能中解救出來，并解決了這些問題，因?yàn)樗粍?chuàng)建一個(gè) TCP 連接，并在同一時(shí)間開始下載所有不同資源，從而節(jié)省了很多時(shí)間，減輕開發(fā)者的負(fù)擔(dān)。

注：目前，HTTP2 只支持 SSL。因此，一開始用 http 打開網(wǎng)頁時(shí)，使用的是 HTTP1.1協(xié)議，然后使用 https 打開同一個(gè)頁面時(shí)，采用的是 HTTP2(在上圖中顯示為 h2)協(xié)議。

結(jié)論:

在這篇文章中，我們討論了當(dāng)下的 Web 開發(fā)實(shí)踐和所面臨的性能問題。之后的討論基于 HTTP2，并發(fā)現(xiàn)它可以在 Visual Studio 2015中用于 IIS10(Windows10 和 Windows Server2016)和 ASP.NET4.6 中。然后，我們創(chuàng)建了包含多種資源(包括 JS，CSS 和圖像)的示例頁面，并發(fā)現(xiàn)使用 HTTP 2可以節(jié)省超過75%的加載時(shí)間——這最終表明，目前遭遇的性能問題，很快就會(huì)成為歷史!