Web 發(fā)展的速度讓許多人嘆為觀止碑韵，層出不窮的組件撬讽、技術(shù)蕊连，只需要合理的組合悬垃、恰當(dāng)?shù)脑O(shè)置游昼，就可以讓 Web 程序性能不斷飛躍。所有 Web 的思想都是通用的尝蠕，它們也可以運(yùn)用到 Java Web烘豌。這一系列的文章，主要講解網(wǎng)頁前端性能優(yōu)化看彼，是與用戶最直接接觸的廊佩。事實(shí)證明，與其消耗大量時間在服務(wù)器端靖榕，在前端進(jìn)行的優(yōu)化更易獲得用戶的肯定标锄。
一.引言
前端的高性能部分，主要是指減少請求數(shù)茁计、減少傳輸?shù)臄?shù)據(jù)以及提高用戶體驗(yàn)料皇，在這個部分，圖片的優(yōu)化顯得至關(guān)重要星压。許多網(wǎng)站的美化践剂，都是靠絢麗的圖片達(dá)到的，圖片恰恰是占用帶寬的元兇娜膘。每個 img 標(biāo)簽逊脯，瀏覽器都會試圖發(fā)起一個下載請求。本文就詳細(xì)介紹了圖片優(yōu)化的幾種方式竣贪，介紹了使用的工具以及優(yōu)化后的結(jié)果军洼。
二.圖片壓縮
減少圖片的大小，可以明顯的提高性能演怎，而對于已有圖片歉眷，要想減少圖片的大小，只能改變圖片的格式颤枪，這里推薦的是 PNG8 的格式汗捡，它可以在基本保持清晰度的情況下，減少圖片的大小。知道這個原理以后扇住，可以用 Windows 的畫圖工具春缕、以及 PhotoShop 工具逐個的改變。但是這樣做的缺點(diǎn)是單張?zhí)幚硭姨＃侍簟１疚耐扑]一個在線轉(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套啤，就如下圖所示。對于大批量的圖片網(wǎng)站改化，這個方法會幫助快速實(shí)現(xiàn)批量圖片壓縮。
圖 3. 壓縮后的結(jié)果
三.圖像合并實(shí)現(xiàn) CSS Sprites
CSS Sprites 是一個吸引人的技術(shù)枉昏，它其實(shí)就是把網(wǎng)頁中一些背景圖片整合到一張圖片文件中陈肛，再利用 CSS 的「background-image」，「background- repeat」兄裂，「background-position」的組合進(jìn)行背景定位句旱，background-position 可以用數(shù)字能精確的定位出背景圖片的位置。
利用CSS Sprites 能很好地減少網(wǎng)頁的 HTTP 請求懦窘，從而大大的提高了頁面的性能前翎，這也是 CSS Sprites 最大的優(yōu)點(diǎn)，也是其被廣泛傳播和應(yīng)用的主要原因畅涂。
CSS Sprites 能減少圖片的字節(jié)港华，由于圖像合并后基本信息不用重復(fù)，那么多張圖片合并成 1 張圖片的字節(jié)往往總是小于這些圖片的字節(jié)總和午衰。同時 CSS Sprites 解決了網(wǎng)頁設(shè)計(jì)師在圖片命名上的困擾立宜，只需對一張集合的圖片上命名就可以了，不需要對每一個小元素進(jìn)行命名臊岸，從而提高了網(wǎng)頁的制作效率橙数。更換風(fēng)格方便，只需要在一張或少張圖片上修改圖片的顏色或樣式帅戒，整個網(wǎng)頁的風(fēng)格就可以改變灯帮。維護(hù)起來更加方便崖技。同時，由于將圖片合并到一張圖片钟哥，因此圖片的請求數(shù)就被縮減到 1 個迎献。其他的請求都可以用到本地緩存，不需要訪問服務(wù)器腻贰。下圖是一個合并以后的圖片吁恍。它將很多小圖標(biāo)都拼到了一起。
圖 4. 合并后的圖片
這里介紹一個小工具 ---「CSS Sprites 樣式生成工具 2.0」播演，可以從這里下載冀瓦。這是一個簡單免費(fèi)的小工具，用該工具打開上面的圖片写烤，選中圖片中的某塊翼闽。如下圖的「綠色大拇指」部分，工具會計(jì)算出這個部分的長顶霞、寬肄程、距離左上角的距離锣吼。勾選復(fù)制類名选浑、復(fù)制寬、復(fù)制高玄叠，再點(diǎn)擊「復(fù)制當(dāng)前樣式」按鈕古徒。這樣生成的樣式會被復(fù)制到剪切板上。
圖 5. 小工具的使用
生成的 CSS 代碼如清單 1 所示读恃。
清單 1. 小工具生成的 CSS 代碼
<pre>
.div_6148{width:18px;height:20px;background-position:-17px -209px;}
</pre>
將這段代碼運(yùn)用在網(wǎng)頁上隧膘，
清單 2. 測試 CSS Sprites 代碼
<html>
<head>
<style>
.div_6148
{
width:18px;
height:20px;
background-image:url(css-sprites-source.gif);
background-position:-17px -209px;
}
</style>
</head>
<body>
<div class="div_6148"></div>
</body>
</html>
打開測試網(wǎng)頁顯示結(jié)果如下圖所示。
圖 6. 測試網(wǎng)頁效果
可以看到寺惫，網(wǎng)頁只顯示工具選擇的「綠色大拇指」部分疹吃，這樣的代碼可以運(yùn)用在網(wǎng)頁的多個部分，而圖片只需要下載一次西雀，這就是該技術(shù)的最大優(yōu)勢萨驶，減少了因?yàn)樾D片引起的多個請求。
四.多域名請求
有時候艇肴，圖片數(shù)據(jù)太多腔呜，一些公司的解決方法是將圖片數(shù)據(jù)分到多個域名的服務(wù)器上，這在一方面是將服務(wù)器的請求壓力分到多個硬件服務(wù)器上再悼。另一方面核畴，是利用了瀏覽器的特性。一般來說冲九，瀏覽器對于相同域名的圖片谤草，最多用 2-4 個線程并行下載。不同瀏覽器的并發(fā)下載數(shù)，都是不同的丑孩，并發(fā)數(shù)如下清單 3 所示泳炉。
清單 3. 各瀏覽器的并發(fā)下載數(shù)
<pre>
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
</pre>
而相同域名的其他圖片，則要等到其他圖片下載完后才會開始下載嚎杨。 這里我做了一個測試花鹅，選擇了多個相同域名的圖片在同一網(wǎng)頁上。代碼如清單 4 所示枫浙。
清單 4. 單域名的多圖片下載
<html>
<body>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
接下來刨肃，使用 FireFox 的 Firebug 插件監(jiān)控網(wǎng)絡(luò)(Firebugde 使用請參考Firebug,Debugger javascript 調(diào)試?yán)?附下載地址)。結(jié)果如下圖所示箩帚。
圖 7. 單域名多圖片的監(jiān)控效果
可以看到真友，相同域名的多張圖片，它們下載的起始點(diǎn)是存在延遲的紧帕。它們并不是并行下載盔然。當(dāng)我們將其中的 3 張圖片換成別的域名圖片。如清單 5 所示是嗜。
清單 5. 多域名多圖片下載
<html>
<body>
<br>
<br>
<br>
<br>
<br>
</body>
</html>
再次查看網(wǎng)絡(luò)監(jiān)控愈案，可以看到，這些圖片是并行下載的鹅搪。
圖 8. 多域名多圖片測試結(jié)果
多域名的下載固然很好站绪，但是太多域名并不太好，一般在 2-3 個域名下載就差不多丽柿。
五.如何確定慢加載
上文介紹的主要是如何對圖片進(jìn)行優(yōu)化合并恢准，但是我們不可能對每個頁面的每個圖片都進(jìn)行上面的操作，所以甫题，如何獲知當(dāng)前頁面的慢加載圖片則尤為重要馁筐。
Browser Insight 主要是OneAPM開發(fā)的一款針對于前端頁面監(jiān)控以及前端性能優(yōu)化的工具，功能維度很豐富坠非，本文主要介紹的是其慢加載的瀑布流圖功能敏沉。
圖9.Browser Insight 頁面響應(yīng)時間
圖10.資源列表-時序圖
參考上面兩個圖片，我們可以在 Browser Insight 的「訪問頁面」的「慢加載追蹤」模塊進(jìn)入「資源列表時序圖」頁面麻顶，我們可以在這個頁面及其詳細(xì)的看到拖慢整個頁面加載的圖片赦抖、腳本、css 等辅肾，進(jìn)而進(jìn)行有針對性的優(yōu)化
（備注：本文轉(zhuǎn)載自 IBM 社區(qū)队萤，由 OneAPM 產(chǎn)品運(yùn)營編譯整理。）
Browser Insight 是一個基于真實(shí)用戶的Web前端性能監(jiān)控平臺矫钓，能夠幫大家定位網(wǎng)站性能瓶頸要尔，網(wǎng)站加速效果可視化舍杜；支持瀏覽器、微信赵辕、App瀏覽HTML和HTML5頁面既绩。想閱讀更多技術(shù)文章，請?jiān)L問 OneAPM 官方博客还惠。
