目錄
CSS
將樣式表置頂
避免CSS運算式
用<link>代替@import
避免在HTML標簽中寫樣式
避免使用Filters
GPU加速
值為0時不需要任何單位
不宣告過多的Font-size
不濫用Float
移除空的CSS規則
正確使用Display的屬性
圖片
優化影像
優化CSS Sprite
不在HTML中縮放圖片
使用小且可快取的favicon.ico
CSS
將樣式表置頂
經樣式表(css)放在網頁的HEAD中會讓網頁顯得加載速度更快，因為這樣做可以使瀏覽器逐步加載已將下載的網頁內容，這對內容比較多的網頁尤其重要，用戶不用一直等待在一個白屏上，而是可以先看已經下載的內容，
如果將樣式表放在底部，瀏覽器會拒絕渲染已經下載的網頁，因為大多數瀏覽器在實作時都努力避免重繪，樣式表中的內容是繪制網頁的關鍵資訊，沒有下載下來之前只好對不起觀眾了，
避免CSS運算式
CSS運算式可以動態的設定CSS屬性，在IE5-IE8中支持，其他瀏覽器中運算式會被忽略，例如下面運算式在不同時間設定不同的背景顏色，
{
background-color: expression( (new Date()).getHours()%2 ? "#B8D4FF" : "#F08A00" );
}CSS運算式的問題在于它被重新計算的次數遠比我們想象的要多，不僅在網頁繪制或大小改變時計算，即使我們滾動螢屏或者移動滑鼠的時候也在計算，因此我們還是盡量避免使用它來防止使用不當而造成的性能損耗，
如果想達到類似的效果我們可以通過簡單的腳本做到，
var currentTime = new Date().getHours();
if (currentTime%2) {
if (document.body) {
document.body.style.background = "#B8D4FF";
}
}
else {
if (document.body) {
document.body.style.background = "#F08A00";
}
}用<link>代替@import
避免使用@import的原因很簡單，因為它相當于將css放在網頁內容底部，
避免在HTML標簽中寫樣式
寫在HTML頭部的JavaScript（無異步），和寫在HTML標簽中的Style會阻塞頁面的渲染，因此CSS放在頁面頭部并使用Link方式引入，避免在HTML標簽中寫Style，
避免使用Filters
AlphaImageLoad也是IE5.5 - IE8中支持，這種濾鏡的使用會導致圖片在下載的時候阻塞網頁繪制，另外使用這種濾鏡會導致記憶體使用量的問題，IE9中已經不再支持，
GPU加速
CSS中以下屬性（CSS3 transitions、CSS3 3D transforms、Opacity、Canvas、WebGL、Video）可以觸發GPU渲染，請合理使用，過渡使用會引發手機過耗電增加，
值為0時不需要任何單位
為了瀏覽器的兼容性和性能，值為0時不要帶單位
不宣告過多的Font-size
過多的Font-size引發CSS樹的效率，
不濫用Float
Float在渲染時計算量比較大，盡量減少使用
移除空的CSS規則
空的CSS規則增加了CSS檔案的大小，且影響CSS樹的執行，所以需移除空的CSS規則
正確使用Display的屬性
Display屬性會影響頁面的渲染，因此請合理使用
a) display:inline后不應該再使用width、height、margin、padding以及float
b) display:inline-block后不應該再使用float
c) display:block后不應該再使用vertical-align
d) display:table-*后不應該再使用margin或者float
圖片
優化影像
當美工完成了網站的圖片設計后，我們可以在上傳圖片之前對其做以下優化
- 檢查GIF圖片中影像顏色的數量是否和調色板規格一致，如果你發現圖片中只用到了4種顏色，而在調色板的中顯示的256色的顏色槽，那么這張圖片就還有壓縮的空間，可以使用imagemagick檢查：
identify -verbose image.gif - 嘗試把GIF格式轉換成PNG格式，看看是否節省空間，大多數情況下是可以壓縮的，下面這條簡單的命令可以安全地把GIF格式轉換為PNG格式：
convert image.gif image.png - 在所有的PNG圖片上運行pngcrush（或者其它PNG優化工具），例如：
pngcrush image.png -rem alla -reduce -brute result.png - 在所有的JPEG圖片上運行jpegtran，這個工具可以對圖片中的出現的鋸齒等做無損操作，同時它還可以用于優化和清除圖片中的注釋以及其它無用資訊
jpegtran -copy none -optimize -perfect src.jpg dest.jpg
優化CSS Sprite
- Spirite中水平排列圖片，垂直排列會增加檔案大小；
- Spirite中把顏色較近的組合在一起可以降低顏色數，理想狀況是低于256色以便適用PNG8格式；
- 不要在Spirite的影像中間留有較大空隙，這雖然不大會增加檔案大小,但對于用戶代理來說它需要更少的記憶體來把圖片解壓為像素地圖，100×100的圖片為1萬像素，1000×1000就是100萬像素，
不在HTML中縮放圖片
不要通過圖片縮放來適應頁面，如果你需要小圖片，就直接使用小圖片吧，
使用小且可快取的favicon.ico
網站圖示檔案favicon.ico，不管你服務器有還是沒有，瀏覽器都會去嘗試請求這個圖示，所以我們要確保這個圖示
- 存在
- 檔案盡量小，最好小于1k
- 設定一個長的過期時間
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/302045.html
標籤：其他