摘要：一引言前端的高性能部分，主要是指減少請求數減少傳輸的數據以及提高用戶體驗，在這個部分，圖片的優化顯得至關重要。

Web 發展的速度讓許多人嘆為觀止，層出不窮的組件、技術，只需要合理的組合、恰當的設置，就可以讓 Web 程序性能不斷飛躍。所有 Web 的思想都是通用的，它們也可以運用到 Java Web。這一系列的文章，主要講解網頁前端性能優化，是與用戶最直接接觸的。事實證明，與其消耗大量時間在服務器端，在前端進行的優化更易獲得用戶的肯定。

一.引言

前端的高性能部分，主要是指減少請求數、減少傳輸的數據以及提高用戶體驗，在這個部分，圖片的優化顯得至關重要。許多網站的美化，都是靠絢麗的圖片達到的，圖片恰恰是占用帶寬的元兇。每個 img 標簽，瀏覽器都會試圖發起一個下載請求。本文就詳細介紹了圖片優化的幾種方式，介紹了使用的工具以及優化后的結果。

二.圖片壓縮

減少圖片的大小，可以明顯的提高性能，而對于已有圖片，要想減少圖片的大小，只能改變圖片的格式，這里推薦的是 PNG8 的格式，它可以在基本保持清晰度的情況下，減少圖片的大小。知道這個原理以后，可以用 Windows 的畫圖工具、以及 PhotoShop 工具逐個的改變。但是這樣做的缺點是單張處理，效率太慢。本文推薦一個在線轉換工具 Smush.it，可以批量的進行壓縮與轉換。它的地址是：www.smushit.com/ysmush.it 打開后效果如下圖所示。

圖 1. Yahoo 提供的在線壓縮工具

我們上傳了一張大小為 3790K 的圖片，待在線程序處理完畢后，點擊 Download Smushed Images 下載查看結果。下載界面如下圖所示。

圖 2. 壓縮后的結果

打開下載下來的壓縮包，查看結果可以看到，圖片從 3790 減少到了 3344，就如下圖所示。對于大批量的圖片網站，這個方法會幫助快速實現批量圖片壓縮。

圖 3. 壓縮后的結果

三.圖像合并實現 CSS Sprites

CSS Sprites 是一個吸引人的技術，它其實就是把網頁中一些背景圖片整合到一張圖片文件中，再利用 CSS 的「background-image」，「background- repeat」，「background-position」的組合進行背景定位，background-position 可以用數字能精確的定位出背景圖片的位置。

利用CSS Sprites 能很好地減少網頁的 HTTP 請求，從而大大的提高了頁面的性能，這也是 CSS Sprites 最大的優點，也是其被廣泛傳播和應用的主要原因。

CSS Sprites 能減少圖片的字節，由于圖像合并后基本信息不用重復，那么多張圖片合并成 1 張圖片的字節往往總是小于這些圖片的字節總和。同時 CSS Sprites 解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進行命名，從而提高了網頁的制作效率。更換風格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就可以改變。維護起來更加方便。同時，由于將圖片合并到一張圖片，因此圖片的請求數就被縮減到 1 個。其他的請求都可以用到本地緩存，不需要訪問服務器。下圖是一個合并以后的圖片。它將很多小圖標都拼到了一起。

圖 4. 合并后的圖片

這里介紹一個小工具 ---「CSS Sprites 樣式生成工具 2.0」，可以從這里下載。這是一個簡單免費的小工具，用該工具打開上面的圖片，選中圖片中的某塊。如下圖的「綠色大拇指」部分，工具會計算出這個部分的長、寬、距離左上角的距離。勾選復制類名、復制寬、復制高，再點擊「復制當前樣式」按鈕。這樣生成的樣式會被復制到剪切板上。

圖 5. 小工具的使用

生成的 CSS 代碼如清單 1 所示。

清單 1. 小工具生成的 CSS 代碼

.div_6148{width:18px;height:20px;background-position:-17px -209px;}

將這段代碼運用在網頁上，

清單 2. 測試 CSS Sprites 代碼

打開測試網頁顯示結果如下圖所示。

圖 6. 測試網頁效果

可以看到，網頁只顯示工具選擇的「綠色大拇指」部分，這樣的代碼可以運用在網頁的多個部分，而圖片只需要下載一次，這就是該技術的最大優勢，減少了因為小圖片引起的多個請求。

四.多域名請求

有時候，圖片數據太多，一些公司的解決方法是將圖片數據分到多個域名的服務器上，這在一方面是將服務器的請求壓力分到多個硬件服務器上。另一方面，是利用了瀏覽器的特性。一般來說，瀏覽器對于相同域名的圖片，最多用 2-4 個線程并行下載。不同瀏覽器的并發下載數，都是不同的，并發數如下清單 3 所示。

清單 3. 各瀏覽器的并發下載數

 Browsers                  HTTP/1.1   HTTP/1.0 
 IE6,7                      2           4 
 IE8                        6           6 
 FireFox 2                  2           8 
 FireFox 3                  6           6 
 Safari 3,4                 4           4 
 Chrome 1,2                 6           ? 
 Chrome 3                   4           4 
 Opera 9.63,10.00alpha      4           4

而相同域名的其他圖片，則要等到其他圖片下載完后才會開始下載。 這里我做了一個測試，選擇了多個相同域名的圖片在同一網頁上。代碼如清單 4 所示。

清單 4. 單域名的多圖片下載

接下來，使用 FireFox 的 Firebug 插件監控網絡(Firebugde 使用請參考Firebug,Debugger javascript 調試利器 附下載地址)。結果如下圖所示。

圖 7. 單域名多圖片的監控效果

可以看到，相同域名的多張圖片，它們下載的起始點是存在延遲的。它們并不是并行下載。當我們將其中的 3 張圖片換成別的域名圖片。如清單 5 所示。

清單 5. 多域名多圖片下載

再次查看網絡監控，可以看到，這些圖片是并行下載的。

圖 8. 多域名多圖片測試結果

多域名的下載固然很好，但是太多域名并不太好，一般在 2-3 個域名下載就差不多。

五.如何確定慢加載

上文介紹的主要是如何對圖片進行優化合并，但是我們不可能對每個頁面的每個圖片都進行上面的操作，所以，如何獲知當前頁面的慢加載圖片則尤為重要。

Browser Insight 主要是OneAPM開發的一款針對于前端頁面監控以及前端性能優化的工具，功能維度很豐富，本文主要介紹的是其慢加載的瀑布流圖功能。

圖9.Browser Insight 頁面響應時間

圖10.資源列表-時序圖

參考上面兩個圖片，我們可以在 Browser Insight 的「訪問頁面」的「慢加載追蹤」模塊進入「資源列表時序圖」頁面，我們可以在這個頁面及其詳細的看到拖慢整個頁面加載的圖片、腳本、css 等，進而進行有針對性的優化
（備注：本文轉載自 IBM 社區，由 OneAPM 產品運營編譯整理。）

Browser Insight 是一個基于真實用戶的Web前端性能監控平臺，能夠幫大家定位網站性能瓶頸，網站加速效果可視化；支持瀏覽器、微信、App瀏覽HTML和HTML5頁面。想閱讀更多技術文章，請訪問 OneAPM 官方博客。