Web性能優化:What?Why?How?

為什麼要提升web性能?

Web性能黃金準則:隻有10%~20%的最終用戶響應時間花在瞭下載html文檔上,其餘的80%~90%時間花在瞭下載頁面組件上。

web性能對於用戶體驗有及其重要的影響,根據著名的`2-5-8`原則:

當用戶在2秒以內得到響應,會感覺系統的響應非常快 當用戶在2-5秒之內得到響應,會感覺系統的響應速度還可以 當用戶在5-8秒之內得到響應,會感覺系統的響應非常慢,但還可以接受 當用戶在8秒之後都沒有得到響應,會感覺系統糟透瞭,甚至系統已經掛掉;要麼打開競爭對手的網站,要麼重新發起第二次請求。

凡事都需要研究,通過科學的研究我們就可以找到事物的發展規律。這裡要感謝雅虎的工程師總結的14條前端優化法則,使得我們可以站在巨人的肩膀上。《高性能網站建設》這本書中的14條優化原則,總結起來主要是以下個方面的優化:

  1. 減少HTTP請求
  2. 頁面內部優化
  3. 啟用緩存
  4. 減少下載量
  5. 網絡連接上的優化

為什麼減少HTTP請求可以提高Web性能?

要回答這個問題,我們就要瞭解當瀏覽器向服務器發送一個http請求知道獲取數據都經歷哪些過程:

開啟一個鏈接(tcp/ip的三次握手過程) -> 發送請求 -> 等待(網絡延遲跟服務器的處理時間) -> 下載數據

我們看一下百度首頁中的http請求在各階段耗費的時間,上面不同的顏色代表下圖中的不同階段

可以看到除瞭圖片之外,其餘大部分http請求的事件花在瞭建立連接與等待階段。

http協議建立在TIC/IP協議之上,在TCP/IP協議中,TCP協議提供可靠的連接服務,采用三次握手建立一個連接。 簡單來說三次握手就是一個身份確認的過程:

(第一次握手:主機A發送位碼為syn=1,隨機產生seq number=1234567的數據包到服務器,主機B由SYN=1知道,A要求建立聯機;)

晴兒:你是瀟哥哥嗎,我是晴兒

(第二次握手:主機B收到請求後要確認聯機信息,向A發送ack number=(主機A的seq+1),syn=1,ack=1,隨機產生seq=7654321的包)

瀟劍:這貨是誰,一簫一劍走江湖,下一句是什麼?

(第三次握手:主機A收到後檢查ack number是否正確,即第一次發送的seq number+1,以及位碼ack是否為1,若正確,主機A會再發送ack number=(主機B的seq+1),ack=1,主機B收到後確認seq值與ack=1則連接建立成功。)

晴兒:這首詩。。。你真的是瀟哥哥,一蕭一劍走江湖,千古情愁酒一回。。。

瀟劍:晴兒,你真的是晴兒。。。。

(啪啪啪啪啪啪啪啪啪啪啪啪啪啪啪。。。。。。。。。。。。)

言歸正傳,這個過程也是需要消耗時間的,在百度首頁找到一個極端的例子:

而等待的時間通常也大於內容下載的時間,這裡同樣找到一個極端例子:

由此我們可以得出結論:一個http請求絕大多數的時間消耗在瞭建立連接跟等待的時間,優化的方法是減少http請求。

如何提高web性能?

1、減少HTTP請求

一般來說要減少http請求通常從兩個方面下手:減少圖片的請求、減少腳本文件與樣式表的請求

圖片的減少通常有兩種方式:css sprites、內聯圖片、IconFont。

CSS Sprites:將多張圖片合並成一幅單獨的圖片,使用css的background-position屬性,將html元素的背景圖片放到sprites 圖片中的期望位置上。使用這項技術的附加優點是他降低瞭下載量,合並後的圖片比分離的圖片和更小,因為它降低瞭圖片自身的開銷(顏色表、格式信息等等)。實際項目中css sprites是一項體力活,因為開發過程中需要對這張大圖進行維護(添加、減少圖片),張鑫旭同學的文章中有介紹如何管理sprites圖片可以作為參考(這裡)。如果需要在頁面中為背景、鏈接、導航欄提供大量的圖片,css sprites絕對是一種優秀的解決方案(幹凈的標簽、較少的圖片、較短的響應時間)。

內聯圖片:通過使用data:URL模式可以再頁面中包含圖片而無需任何額外的請求。缺點就是IE8以下的瀏覽器不支持這種方式,而IE8在數據大小上有限制,隻能支持23kb以內的數據。對於較小的圖片來說可以直接內聯到web頁面中,但對於大圖片內聯到頁面裡會導致頁面變大,聰明的做法是使用css,將內聯的圖片作為背景使用,並放到外部樣式表中,這意味著數據可以緩存在樣式表內部。使用外部樣式表雖然增加瞭一個http請求,但樣式可以被瀏覽器緩存,得到額外的收獲。另外一點需要註意:base64是有損壓縮。

IconFont:圖標字體,這是近年來新流行的一種以字體代替圖片的技術。它可以適應任何分辨率而不會出現圖片模糊問題,與圖片相比它具有更小的容量,更高的靈活性(像字體一樣可以設置圖標大小、顏色、透明度、hover狀態、反轉等),IE8以上的瀏覽器都支持該技術。在使用IconFont之前,你首先要確定你選則的字體庫是否是收費。詳細內容可以參考這篇文章:圖標字體化淺談

減少腳本與樣式表的請求主要原則就是合並。在實際開發中我們遵循模塊化的原則將代碼分散到許多小文件中,按照軟件開發的原則這是完全正確的,但對於上線頁面來說,每一個文件都會產生一個http請求,嚴重影響性能。和css sprites一樣,將這些小文件合並到一個文件中,可以減少http請求的數量並縮短最終用戶響應時間。在合並過程中我們還需要使用工具精簡(移除不必要的字符以減小文件大小縮減下載時間)和混淆(除瞭移除不必要字符外,還會改寫源代碼,比如函數和變量名使用更短的標量名)Javascript代碼。對於采用AMD或CMD進行模塊化開發的同學,在合並過程中通常會將依賴的其他模塊打包到一個文件中,而模板html通常以字符串的方式內聯到Javascript文件中。目前最常用的前端構建工具就是glup,這裡有一篇初步應用的文章:前端 | gulp 打包 require.js 模塊依賴