gRPC 的高效能一大部分來自 HTTP/2,2015 發表至今,主流瀏覽器跟伺服器多已內建支援 HTTP/2,屬於成熟可用的技術。

我們都知道 HTTP/2 之所以速度快源自 Request/Response Multiplexing (多工傳輸)、Header 壓縮、Binary Framing Layer 及 Server Push (延伸閱讀:Http/2 是什麼? by Po-Ching Lu),網路上的介紹很多,但很少看到有人實地驗證換用 HTTP/2 變快的效果,出於好奇,我想實測一下,眼見為憑。

我認為 Request/Reseponse Multiplexing 是變快最大的關鍵,HTTP/1.x 具有 Domain Sharding 行為,限制瀏覽器對每個網域的同時連線數,Chrome/Edge 為 6 條,IE 為 10 條,意思是如果網頁內含數十上百個 js、css、圖檔,瀏覽器最多只能下載其中六個,共用六條連線載完一個換下一個,即使頻寬仍夠也得乖乖排隊。HTTP/2 則允許在一條連線上多工傳輸,所有下載可同時進行,省下排隊時間便能提高效率。

好消息是 Windows 10/Server 2016+ 的 IIS 10 已內建 HTTP/2,只要有開 HTTPS 預設便已啟用 HTTP/2,若走 HTTP 則只能使用 HTTP/1.1。於是我們可分別用 http:// 或 https:// 連上同一網址,瀏覽器將使用 HTTP/1.1 及 HTTP/2 存取,剛好可以拿來對照。

我設計了以下實驗,用網頁載入 36 張 LINE 貼圖,img src 加上 ?_=亂數 避免 Cache,另外設計按鈕切換 http/https 測試 HTTP/1.1 或 HTTP/2:

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<style>
		.main {
			display: flex; flex-direction: row;	flex-wrap: wrap;
		}
		#u { font-size: 1.2em; background-color: cadetblue; color: white; display: inline-block; 
			 padding: 6px; }
		img { display: none; }
		img[src] { display: inline-block; max-width: 96px; max-height: 96px; margin: 3px; }
	</style>
</head>

<body>
	<div>
		<span id="u"></span> <button id="b" onclick="toggle()"></button> 
	</div>
	<div class="main">
		<img data-src="stickers/480874006.png" />
		<img data-src="stickers/480874007.png" />
		<!-- 略 -->
		<img data-src="stickers/480874040.png" />
		<img data-src="stickers/480874041.png" />
	</div>
	<script>
		let url = location.href;
		let protos = ['HTTP/1.1','HTTP/2'];
		let protoIdx = -url.indexOf('http:'); //0 or 1
		document.getElementById('u').innerText = protos[protoIdx];
		document.getElementById('b').innerText = `SWITCH TO ${protos[1 - protoIdx]}`;
		function toggle() {
			location.href = `${protoIdx ? 'http' : 'https'}:` + url.split(':')[1];
		}
		setTimeout(() => {
			let rnd = Math.random();
			[].forEach.call(document.getElementsByTagName("img"), (img) => img.src = img.getAttribute('data-src') + '?_=' + rnd);
		}, 200);
	</script>
</body>

</html>

測試時用 Edge 模擬 3G 網速讓結果明顯一點。實測影片如下,我們可以清楚觀察到 HTTP/1.1 每次同時最多下載六張圖的行為,HTTP/2 則可做到萬箭齊發,網頁載入時間快了 7 秒 (19.78s vs 12.46s)。

實測影片

見證過 HTTP/2 的加速效果,不囉嗦,馬上改了 Nginx 設定,黑暗部落格正式進入 HTTP/2 時代!

HTTP/2 loading speed test with IIS 10 and Edge.


Comments

# by 快崩潰的古蹟維護小兵

黑大: 最近接手維護1個古老的傳統ASP網站(你沒看錯!!!),發現只有圖檔、CSS走HTTP1.1協定,其他都有正常跑HTTP/2,我以為JS會有問題,結果是HTTP/2,確認過網站預設行為有指定HTTPS才給連,CA也是正確綠色鎖頭,憑證練也是正確無誤,還有那裡需要特別設定?

# by Jeffrey

to 快崩潰的古蹟維護小兵,若主機是 Win2016 且是連 https,預設就會啟用 HTTP/2。我想到一個可能,F12 網路存取記錄中若檔案來自 Cache 而非從 Server 下載,會標示為 HTTP/1.1 (所以我的測試 URL 才要一律加 ?_=亂數),先確試是不是這個原因。

# by solonglin

共月六條連線載完一個換下一個 黑大是不是要寫 "共用" 請教黑大,如果是server 2008 或 server 2012 就沒這個功能 很想把主機全部升級到2022...

# by Jeffrey

to solonglin, 我是要寫共用沒錯,打字時色帶剛好有一塊掉色(大誤)。2016+ 才有 HTTP/2,如果升 2022,可考慮直上 HTTP/3 https://docs.microsoft.com/zh-tw/aspnet/core/host-and-deploy/iis/http3

Post a comment