摘要：一引言前端的高性能部分，主要是指減少請(qǐng)求數(shù)減少傳輸?shù)臄?shù)據(jù)以及提高用戶體驗(yàn)，在這個(gè)部分，圖片的優(yōu)化顯得至關(guān)重要。

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

一.引言

前端的高性能部分，主要是指減少請(qǐng)求數(shù)、減少傳輸?shù)臄?shù)據(jù)以及提高用戶體驗(yàn)，在這個(gè)部分，圖片的優(yōu)化顯得至關(guān)重要。許多網(wǎng)站的美化，都是靠絢麗的圖片達(dá)到的，圖片恰恰是占用帶寬的元兇。每個(gè) img 標(biāo)簽，瀏覽器都會(huì)試圖發(fā)起一個(gè)下載請(qǐng)求。本文就詳細(xì)介紹了圖片優(yōu)化的幾種方式，介紹了使用的工具以及優(yōu)化后的結(jié)果。

二.圖片壓縮

減少圖片的大小，可以明顯的提高性能，而對(duì)于已有圖片，要想減少圖片的大小，只能改變圖片的格式，這里推薦的是 PNG8 的格式，它可以在基本保持清晰度的情況下，減少圖片的大小。知道這個(gè)原理以后，可以用 Windows 的畫圖工具、以及 PhotoShop 工具逐個(gè)的改變。但是這樣做的缺點(diǎn)是單張?zhí)幚恚侍１疚耐扑]一個(gè)在線轉(zhuǎn)換工具 Smush.it，可以批量的進(jìn)行壓縮與轉(zhuǎn)換。它的地址是：www.smushit.com/ysmush.it 打開后效果如下圖所示。

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

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

圖 2. 壓縮后的結(jié)果

打開下載下來的壓縮包，查看結(jié)果可以看到，圖片從 3790 減少到了 3344，就如下圖所示。對(duì)于大批量的圖片網(wǎng)站，這個(gè)方法會(huì)幫助快速實(shí)現(xiàn)批量圖片壓縮。

圖 3. 壓縮后的結(jié)果

三.圖像合并實(shí)現(xiàn) CSS Sprites

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

利用CSS Sprites 能很好地減少網(wǎng)頁(yè)的 HTTP 請(qǐng)求，從而大大的提高了頁(yè)面的性能，這也是 CSS Sprites 最大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因。

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

圖 4. 合并后的圖片

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

圖 5. 小工具的使用

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

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

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

將這段代碼運(yùn)用在網(wǎng)頁(yè)上，

清單 2. 測(cè)試 CSS Sprites 代碼

打開測(cè)試網(wǎng)頁(yè)顯示結(jié)果如下圖所示。

圖 6. 測(cè)試網(wǎng)頁(yè)效果

可以看到，網(wǎng)頁(yè)只顯示工具選擇的「綠色大拇指」部分，這樣的代碼可以運(yùn)用在網(wǎng)頁(yè)的多個(gè)部分，而圖片只需要下載一次，這就是該技術(shù)的最大優(yōu)勢(shì)，減少了因?yàn)樾D片引起的多個(gè)請(qǐng)求。

四.多域名請(qǐng)求

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

清單 3. 各瀏覽器的并發(fā)下載數(shù)

 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

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

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

接下來，使用 FireFox 的 Firebug 插件監(jiān)控網(wǎng)絡(luò)(Firebugde 使用請(qǐng)參考Firebug,Debugger javascript 調(diào)試?yán)?附下載地址)。結(jié)果如下圖所示。

圖 7. 單域名多圖片的監(jiān)控效果

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

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

再次查看網(wǎng)絡(luò)監(jiān)控，可以看到，這些圖片是并行下載的。

圖 8. 多域名多圖片測(cè)試結(jié)果

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

五.如何確定慢加載

上文介紹的主要是如何對(duì)圖片進(jìn)行優(yōu)化合并，但是我們不可能對(duì)每個(gè)頁(yè)面的每個(gè)圖片都進(jìn)行上面的操作，所以，如何獲知當(dāng)前頁(yè)面的慢加載圖片則尤為重要。

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

圖9.Browser Insight 頁(yè)面響應(yīng)時(shí)間

圖10.資源列表-時(shí)序圖

參考上面兩個(gè)圖片，我們可以在 Browser Insight 的「訪問頁(yè)面」的「慢加載追蹤」模塊進(jìn)入「資源列表時(shí)序圖」頁(yè)面，我們可以在這個(gè)頁(yè)面及其詳細(xì)的看到拖慢整個(gè)頁(yè)面加載的圖片、腳本、css 等，進(jìn)而進(jìn)行有針對(duì)性的優(yōu)化
（備注：本文轉(zhuǎn)載自 IBM 社區(qū)，由 OneAPM 產(chǎn)品運(yùn)營(yíng)編譯整理。）

Browser Insight 是一個(gè)基于真實(shí)用戶的Web前端性能監(jiān)控平臺(tái)，能夠幫大家定位網(wǎng)站性能瓶頸，網(wǎng)站加速效果可視化；支持瀏覽器、微信、App瀏覽HTML和HTML5頁(yè)面。想閱讀更多技術(shù)文章，請(qǐng)?jiān)L問 OneAPM 官方博客。