性能黃金法則：只有10%～20%的最終用戶響應(yīng)時間花在了下載HTML文檔上昼牛。其余的80%～90%時間花在了下載頁面中的所有組件上没咙。
通過網(wǎng)絡(luò)層面去優(yōu)化這80%～90%的下載組件時間玖姑，比優(yōu)化代碼帶來的效果要好得多。實際操作也并不困難匀钧，你可以通過使用CDN敬惦、Keep-Alive韧掩、減少DNS查找象浑、避免重定向和使用HTTP2來優(yōu)化你的網(wǎng)站的網(wǎng)絡(luò)訪問荷鼠。
1. CDN
CDN現(xiàn)在已經(jīng)是網(wǎng)站開發(fā)的標(biāo)配句携。大公司都是自建CDN，小公司則使用CDN服務(wù)提供商（如：七牛云允乐、又拍云等）或者免費的CDN服務(wù)（如：BootCDN矮嫉、360CDN等）。
CDN用于發(fā)布靜態(tài)內(nèi)容牍疏，如圖片蠢笋、腳本、樣式表和Flash等鳞陨。提供動態(tài)HTML頁面會引入特殊的存儲需求昨寞，如數(shù)據(jù)庫連接、狀態(tài)管理厦滤、驗證援岩、硬件和OS優(yōu)化等。這些復(fù)雜性超越了CDN的能力范圍掏导。
2. 減少HTTP請求
最快的請求就是沒有請求享怀。減少HTTP請求，本質(zhì)上就是減少組件的數(shù)量趟咆。對于絕大多數(shù)網(wǎng)站添瓷，組件就是JS文件、CSS文件和圖片值纱。你可以通過打包構(gòu)建工具鳞贷，把所有JS文件打包成一個文件，CSS打包成一個文件虐唠，這就大大減少了請求的數(shù)量（事實上悄晃，現(xiàn)在很多的SPA就是這么做的）。減少圖片請求就是 CSS Sprite，將小圖標(biāo)和圖片合并成一個文件妈橄，不僅圖片總大小會減少，請求也大大減少了翁脆。
此外眷蚓，使用SVG技術(shù)和內(nèi)聯(lián)圖片也可以減少請求的數(shù)量。但是你必須清楚自己在做什么反番，因為SVG圖片和內(nèi)聯(lián)圖片是無法緩存的沙热，所以只有在用到一次的場景下使用。此外罢缸，對于簡單的圖片樣式和背景篙贸，你甚至可以直接用CSS3做出來（CSS3真的很強大，強大到超乎你的想象）枫疆。關(guān)于圖片的優(yōu)化爵川，我會在《高性能網(wǎng)站：圖片篇》做更加詳細(xì)的介紹。
3. 減少DNS查找
我們知道息楔，瀏覽器在單個域名下可以并發(fā)的請求數(shù)4～8個寝贡。不同瀏覽器可并發(fā)請求數(shù)量不同，并且HTTP/1.0和HTTP/1.1下同一瀏覽器可并發(fā)請求數(shù)也不同值依，但你必須知道圃泡，可以通過將資源分布在不同域名下，能夠增加并發(fā)請求的數(shù)量愿险。
但是域名數(shù)量多了颇蜡，響應(yīng)的DNS查找時間也就上去了（盡管有DNS緩存）。一般來說辆亏，DNS查找時間在10ms~100ms之間风秤。我的建議是將你的資源分別放到至少2個，但不要超過4個主機名下褒链。這是在減少DNS查找和允許高度并行下載之間作出的很好的權(quán)衡唁情。
4. Keep-Alive
我們知道HTTP協(xié)議是底層是基于TCP協(xié)議，而建立TCP連接的三次握手和斷開連接的四次揮手是非常消耗時間的甫匹。Web客戶端經(jīng)常會打開到同一個站點的連接甸鸟。比如，一個Web頁面上的大部分內(nèi)嵌圖片通常來自同一個Web站點兵迅，而且相當(dāng)一部分指向其他對象的超鏈通常都指向同一個站點抢韭。因此，初始化了對某服務(wù)器HTTP請求的應(yīng)用程序很可能會在不久的將來對那臺服務(wù)器發(fā)起更多的請求（比如恍箭，獲取在線圖片）刻恭。這種性質(zhì)被稱為站點局部性（site locality）。
關(guān)于Keep-Alive的更多信息，你可以參閱《HTTP權(quán)威指南》的第4.5節(jié)“持久連接”鳍贾。我在這里要告訴你的是鞍匾，很多的CDN和Web服務(wù)器會默認(rèn)幫你加上 Connection:keep-alive，所以你不必太擔(dān)心如何操作骑科。此外橡淑，通過使用Keep-Alive重用現(xiàn)有連接還可以避免重復(fù)的DNS查找。
5. 避免重定向
實現(xiàn)重定向可能有很多不同的原因咆爽，包括但不限于網(wǎng)站重新設(shè)計梁棠、跟蹤流量、記錄廣告點擊和易于記憶的URL斗埂，但是請記住符糊，重定向會使你的頁面變慢。
來看一個重定向的例子呛凶，訪問 http://toolbar.google.com 會發(fā)生302跳轉(zhuǎn)男娄，在響應(yīng)主頁面之前有3秒的時間用戶將看不到頁面。當(dāng)然把兔，因為我使用了代理所以才這么慢沪伙，但是你要記住，重定向確實會在響應(yīng)實際頁面之前拖慢網(wǎng)站的速度县好，應(yīng)該避免围橡。
如果是為了跟蹤流量，完全沒必要使用重定向缕贡。你可以分析Web服務(wù)器日志來跟蹤流量翁授，或者使用信標(biāo)（beacon），它是一個HTTP請求晾咪，其URL中包含有跟蹤信息收擦。跟蹤信息可以從信標(biāo)Web服務(wù)器的訪問日志中提取出來。信標(biāo)響應(yīng)通常是一個 1px X 1px 的透明圖片谍倦；不過204響應(yīng)更為優(yōu)秀塞赂，因為它更小、從來不會被緩存昼蛀，而且絕對不會改變?yōu)g覽器的狀態(tài)宴猾。
6. HTTP/2
HTTP/2 是基于Google SPDY協(xié)議，它的設(shè)計目標(biāo)是降低50%的頁面加載時間叼旋。當(dāng)下很多著名的互聯(lián)網(wǎng)公司仇哆，例如百度、淘寶夫植、UPYUN 都在自己的網(wǎng)站或 APP 中采用了 SPDY 系列協(xié)議（當(dāng)前最新版本是 SPDY/3.1）讹剔，因為它對性能的提升是顯而易見的。主流的瀏覽器（谷歌、火狐延欠、Opera）也都早已經(jīng)支持 SPDY陌兑，它已經(jīng)成為了工業(yè)標(biāo)準(zhǔn)，HTTP Working-Group 最終決定以 SPDY/2 為基礎(chǔ)衫冻，開發(fā) HTTP/2诀紊。
但是，HTTP/2 跟 SPDY 仍有不同的地方隅俘，主要是以下兩點：
相比 HTTP/1.x为居，HTTP/2 在底層傳輸做了很大的改動和優(yōu)化：
- HTTP/2 采用二進(jìn)制格式傳輸數(shù)據(jù)，而非 HTTP/1.x 的文本格式杀狡。二進(jìn)制格式在協(xié)議的解析和優(yōu)化擴展上帶來更多的優(yōu)勢和可能蒙畴。
- HTTP/2 對消息頭采用 HPACK 進(jìn)行壓縮傳輸，能夠節(jié)省消息頭占用的網(wǎng)絡(luò)的流量呜象。而 HTTP/1.x 每次請求膳凝，都會攜帶大量冗余頭信息，浪費了很多帶寬資源恭陡。頭壓縮能夠很好的解決該問題蹬音。
- 多路復(fù)用，直白的說就是所有的請求都是通過一個 TCP 連接并發(fā)完成休玩。HTTP/1.x 雖然通過 pipeline 也能并發(fā)請求著淆，但是多個請求之間的響應(yīng)會被阻塞的，所以 pipeline 至今也沒有被普及應(yīng)用拴疤，而 HTTP/2 做到了真正的并發(fā)請求永部。同時，流還支持優(yōu)先級和流量控制呐矾。
- Server Push：服務(wù)端能夠更快的把資源推送給客戶端苔埋。例如服務(wù)端可以主動把 JS 和 CSS 文件推送給客戶端，而不需要客戶端解析 HTML 再發(fā)送這些請求蜒犯。當(dāng)客戶端需要的時候组橄，它已經(jīng)在客戶端了。
HTTP/2 主要是 HTTP/1.x 在底層傳輸機制上的完全重構(gòu)愧薛，HTTP/2 是基本兼容 HTTP/1.x 的語義的（詳細(xì)兼容性說明請戳 這里）晨炕。 Content-Type 仍然是 Content-Type，只不過它不再是文本傳輸了毫炉。
這些新特性真是好用到哭瓮栗，任你窮盡奇技淫巧各種Hack，都比不上這歷史性的變革，這才是現(xiàn)代互聯(lián)網(wǎng)的協(xié)議费奸。
下圖是 caniuse.com 給出的HTTP/2的瀏覽器支持列表弥激，在全球支持率達(dá)到77.44%，在中國只有 59.58%愿阐。你可以根據(jù)你網(wǎng)站訪問用戶瀏覽器分布來考慮是否使用HTTP/2微服。
參考資料
- 《高性能網(wǎng)站建設(shè)指南》——Steve Souders
- 《HTTP權(quán)威指南》——David Gourley，Brian Totty
- HTTP/2 新特性淺析
