用SPDY加速web —— ”Making The Web Faster With SPDY“

原文:http://blog.teamtreehouse.com/making-the-web-faster-with-spdy


SPDY(發音speedy)是一項通過修正一系列HTTP1.1缺陷來降低頁面加載時間的技術。它不是HTTP的替代品,而是引入了一些組建來提高頁面響應速度。

SPDY最初是由Google開發,幾乎用在Google所有的產品上。現在被Facebook, Twitter, WordPress.com等公司廣泛應用。

在本文中,你會了解到SPDY是如何工作的以及它是如何提高頁面響應的。



注:HTTP2.0 小組決定用SPDY來作爲HTTP2.0協議制定的起點,而SPDY本身卻並不是爲了取而代之而設計的。



SPDY是如何融入現有框架的

SPDY在請求棧中加入了額外的一層,由此來擴展HTTP的功能。


在我們進一步研究SPDY所引進的組件前,我們先來看看SPDY想要克服的問題。


HTTP1.1所引進的問題

HTTP1.1中的不少缺陷影響了客戶端和服務器之間的請求效率。正是這些缺陷限制了你的網站的響應速度。

SPDY提供瞭如下功能來幫助解決這些缺陷。

連接數的限制

由於HTTP原生的設計,每個資源要求一個單獨的HTTP請求。目前的瀏覽器最多隻支持6個併發連接到服務器,也就是說,如果你的網站在同一個服務器上請求了超過6個資源,瀏覽器就必須等待一個資源下載完畢,才能執行下一個請求。這大大影響了頁面加載速度。


程序員嘗試使用HTTP管道來解決這一問題,但是HTTP連接先進先出(FIFO)的設計,已然會帶來不少問題。(某個資源加載速度很慢會影響到後面所有的加載。)



注:HTTPArchive的一項研究顯示,目前每個網站頁面平均包含84個請求,到30個不同的域名。


HTTP頭

HTTP的另一個問題是適用了未壓縮或無用的頭。HTTP頭是web事務工作的基礎,但是頭本身的數據也需要經過傳輸,所以越多的頭,就意味着request會越慢。

現在有一些技術是把非必須的頭給壓縮掉,應該可以明顯的減少時間。


開發者的臨時方法

前端開發者有如下策略來減少加載時間:

Image Spriting - 將多個小圖片合成一個sprite圖,然後用一些高端的CSS來在頁面上顯示出正確的圖片。

Concatenation and Minification - 將多個CSS或JS文件整合到一箇中,來減少HTTP請求的次數。Minification指的是去除空白和其他填充性內容,來減小頁面。

Domain Sharding - 將資源分散到多個子域名下,這樣瀏覽器就可以打開更多的併發連接。

Inline Resources - 用Data URI來將圖片嵌入到HTML代碼中,目的還是爲了減少HTTP請求數。

使用這些技術可以有效的降低頁面加載速度,但是實現起來就及其操蛋了。修正掉HTTP1.1的這些問題就可以讓開發者省心了。


用SPDY來解決問題

現在你瞭解了SPDY想要解決的問題,那麼我們來看看SPDY的主要組件。


Multiplexd streams 多路流

SPDY中將請求映射成流(stream),它允許在同一個連接中包含多個流。這大大減少了創建連接的開銷。

而且,SPDY中的連接是雙向的,所以流可以被客戶端和服務器任意一段初始化。後面再詳解。


Prioritized streams 分級流

SPDY的流有優先級的定義。客戶端可以通知服務器某項資源比其他更加重要,所以當帶寬允許時,該資源會被第一時間發送。

這就解決了前文提到的HTTP的先進先出(FIFO)的問題。


Header compression頭壓縮

SPDY壓縮了請求和響應的頭,由此減小了需要發送的數據量。由Google所進行的一項實驗表明,SPDY可以壓縮大約88%的請求頭大小和大約85%的響應頭大小,從而減小了大約45到1142毫秒的頁面加載時間。

SPDY的團隊也在嘗試刪除部分不需要的頭,例如,當user-agent頭被送到服務器後,在session有效期內,我們有理由相信它不會再變。所以完全可以在後面的請求中把它剔幹掉。


Server push 推送

SPDY的另一個很棒的組件就是創建了由服務器端初始化的流,這就可以讓服務器對客戶端進行推送,而不需要客戶端發送任何請求。


例如,服務器可以解析一個HTML頁面看其是否包含一個引用CSS的<link>元素。傳統方式中,服務器要等到客戶端請求該CSS文件才把它發過去。而我們明知道客戶端肯定要用它,幹嘛不自動發過去呢?這樣還能額外節省一個客戶端請求到服務器的延遲時間呢。

原則上,這種做法跟用DATA URI嵌入圖片是類似的。我們知道這個資源是肯定需要的,所以減少一個額外請求是完全OK的。


開始使用SPDY

現在你明白了SPDY能幹什麼了,我肯定你會好奇怎麼來用它。好消息是SPDY已經步入潮流了。正之如我前面所提到的,包括Google,Facebook和Twitter都已經在他們的商用系統上使用了。

Apache用戶可以使用mod_spdy的組件。

Nginx用戶可以去瞧瞧ngx_http_spdy_module



注:你不需要爲了使用SPDY而修改任何網站內容!


有一件事要注意的是,SPDY要求使用SSL。這會引入一個小延遲,但是保證了客戶端和服務器之間的連接安全。


現在支持SPDY的瀏覽器有:Chrome,Firefox 和Opera。微軟最近也確認了SPDY會被IE11所支持。


後記

希望你現在對SPDY是什麼以及如何工作有一些基本瞭解了。

SPDY承諾會讓前端開發者的生活簡單起來,不用再去用臨時方法解決HTTP1.1的瓶頸。Image sprite和Domain sharding的日子就要到頭鳥~


有用鏈接:

High Performance Browser Networking by Ilya Grigorik

Apache Module: mod_spdy

Nginx Module: ngx_http_spdy_module

SPDY: An experimental protocol for a faster web

Can I use SPDY?

SPDY Website Checker


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章