1. 縮寫(xiě)值
盡量減少 margin-left:auto; margin-right:auto; 這樣的寫(xiě)法。
取而代之應(yīng)該寫(xiě)成這樣, margin:0 auto;
2. 避免消耗性能的屬性
filter:alpha(opacity=50) 或 width:exprexssion(this > 100 ? '100px' : 'auto'; )
3. 選擇器合并
把具有相同樣式的選擇器寫(xiě)在一起。這樣不僅減少代碼利于維護(hù),還能減少瀏覽器的渲染次數(shù)。
4. 背景圖片優(yōu)化合并
a. 圖片本身的變化
當(dāng)圖片色彩過(guò)于豐富且無(wú)透明要求時(shí),建議采用jpg格式并保存為較高質(zhì)量。
當(dāng)圖片色彩過(guò)于豐富又有透明或半透明要求或陰影效果時(shí),建議采用png24格式,并對(duì)IE6進(jìn)行png8退化(或在不得已情況下使用濾鏡)。
當(dāng)圖片色彩不太豐富時(shí)無(wú)論有無(wú)透明要求,請(qǐng)采用png8格式,大多數(shù)情況下建議采用這種格式。
當(dāng)圖片有動(dòng)畫(huà)時(shí),只能使用gif格式。
你可以使用工具對(duì)圖片進(jìn)行再次壓縮,但前提是不會(huì)影響色彩和透明。
b. 多張圖片合并
單個(gè)圖標(biāo)之間必須保留空隙,空隙大小由容器大小及顯示方式?jīng)Q定。這樣做的好處是既考慮了“容錯(cuò)性”又提高了圖片的可維護(hù)性。
圖標(biāo)的排列方式,也由容器大小及顯示方式?jīng)Q定。排列方式分為以下幾種:橫向排列(容器寬度有限)、縱向排列(容器高度有限)、斜線排列(容器寬高不限),靠左排列(容器背景居左)、靠右排列(容器背景居右)、水平居中排列(容器背景水平居中)、垂直居中排列(容器背景垂直居中)。
合并后圖片大小不宜超過(guò)50K,建議大小在20K-50K之間。
為保證多次修改后的圖片質(zhì)量,請(qǐng)保留一份PSD原始圖,修改和添加都在PSD中進(jìn)行,最后導(dǎo)出png。
c. 分類合并
按照模塊或元件,把同屬于一個(gè)模塊或元件的圖片進(jìn)行合并,方便模塊或元件的維護(hù)。
按照?qǐng)D片大小,把大小一致或差不多的圖片進(jìn)行合并,可充分利用圖片空間。
按照?qǐng)D片色彩,把色彩一致或差不多的圖片進(jìn)行合并,保證合并后圖片的色彩不過(guò)于豐富,可防止色彩失真。
5. 盡量避免使用 Hack
6. CSS 能解決的問(wèn)題,就不用 JS
7. 壓縮文件,減小文件大小
刪除注釋、多余的空格和換行。
移動(dòng)端:
1. 盡量減少圖片請(qǐng)求
2. 顏色盡量暗
3. 盡量減少網(wǎng)絡(luò)請(qǐng)求