css頁面最佳化

最近看了很多頁面最佳化方面的文章，集合多篇文章，整理總結如下：

1、樣式放頭上，指令碼放腳下。不內嵌，只外鏈。使用 引用樣式表，而不是通過 @import 匯入。 

* 不贊成：<p style=”font-size: 14pt ;”>Home</p>

* 建議用：<link href="style.css" rel="stylesheet" type="text/css"/></link>

2、十六進位的顏色值對的位元和大小寫

編寫十六進位顏色值時你可能會用小寫字母或省略成3位元，關於這寫法沒找到確實的資料證明對瀏覽器的渲染效率是否有影響，但十六進位的顏色值預設標準是大寫及6位元標註。在未知情況下不希望冒險而降低了渲染的效率。

* 不贊成：#f3a
* 建議用：#FF33AA

3、display與visibility的差異

他們用於設定或檢索是否顯示對象。display隱藏對象不保留物理空間，visibility為隱藏對象保留佔據的物理空間。當瀏覽器渲染被佔據的物理空間時，會有所消耗資源。

* 不贊成：visibility:hidden
* 建議用：display:none

4、border:none;與border:0;的區別

和display與visibility的關係類似，分別不保留與保留空間。更多的是border:0;儘管可以隱藏掉邊框，但它會為你保留border-color/border-style的使用權。

* 不贊成：border:0;
* 建議用：border:none;

5、不宜用過小的背景圖片平鋪

不要使用過小的圖片做背景平鋪，這就是為何很多人都不用 1px 的原因，寬高 1px 的圖片平鋪出一個寬高 200px 的地區，需要 200*200=40, 000 次，佔用資源。提高背景圖片渲染效率跟圖片尺寸及體積有關，最大的圖片檔案體積保持約70KB。

* 不贊成：寬高8px以下的平鋪背景圖片
* 建議用：衡量適中體積及尺寸的背景圖片

6、慎用 * 萬用字元

所謂萬用字元，就是將 CSS 中的所有標籤均初始化，不管用的不用的，過時的先進的，一視同仁，這樣，大大的佔用資源。要有選擇的初始化標籤。 

7、慎用IE濾鏡

IE的濾鏡除了比較消耗資源外也有相容性問題。當中有讓PNG透明的濾鏡，可採用GIF或JPG似透非透的辦法來避免使用此濾鏡。一般來說，PNG 比 GIF 要小，小得多。再者，GIF 中有多少顏色是被浪費的，很值得最佳化。 

* 建議用：個別透明圖片用 gif，其餘用 png

8、選取器

<1>. 有四種目標選取器：ID, class, tag和通用符。看下他們各自的效率如何:

#main-navigation { } /* ID (最快) */body.home #page-wrap { } /* ID */.main-navigation { } /* Class */ul li a.current { } /* Class *ul { } /* Tag */ul li a { } /* Tag */* { } /* Universal (最慢) */#content [title='home'] /* Universal(慢) */

<2>. 盡量不使用後代選取器，後代選取器是CSS裡最昂貴的選取器
* 不贊成：html body ul li a { }
* 建議用：<a class="link"></a>   .link { }

<3>. 盡量不要用標籤修飾
* 不贊成：ul#main-navigation { }  ID是唯一的，所以不需要用標籤修飾ul，這隻會讓它更低效。

9、合理使用簡寫

例如margin：
* 不贊成：

margin-top:1px;margin-right:1px;margin-botton:1px;margin-left:1px;

* 建議用：

margin:1px 1px 1px 1px;

縮寫的順序是上->右->下->左。順時針的方向。相對的邊的值相同，則可以省掉：

margin:1px;//四個方向的邊距相同，等同於margin:1px 1px 1px 1px;margin:1px 2px;//上下邊距都為1px，左右邊距均為2px，等同於margin:1px 2px 1px 2pxmargin:1px 2px 3px;//右邊距和左邊距相同，等同於margin:1px 2px 3px 2px;margin:1px 2px 1px 3px;//注意，這裡雖然上下邊距都為1px，但是這裡不能縮寫。

其他的像border，font，background等也進行簡寫，不建議簡寫color（第二點）

10、CSS重用最佳化

CSS代碼的共用屬性提取來達到節約代碼、維護方便。
* 不贊成
.yangshi_a{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{ width:100px; height:20px; text-align:right; float:left; font-size:24px;}
* 建議用
.yangshi_a ,.yangshi_b{ width:100px; height:20px; text-align:left; float:left; font-size:24px;}
.yangshi_b{text-align:right; }

11、盡量減少瀏覽器reflow和repaint

最簡單的就是為頁面中所有圖片指定寬度和高度。
當瀏覽器勾畫頁面時，它需要能夠流動的，片這樣的可替換的元素。提供了圖片尺寸，瀏覽器知道去環繞附近的不可替換元素，甚至可以在圖片下載之前開始渲染頁面。如果沒有指定的圖片尺寸，或者如果指定的尺寸不符合圖片的實際尺寸，一旦圖片下載，瀏覽器將需要reflows和重新繪製頁面。為了防止reflows，在HTML的<img>標籤中或在CSS中為所有圖片指定寬度和高度。
此處方法很多，有很多相關文章

最後：瀏覽器越來越強悍，上面寫的更多的是良好的代碼規範，最佳化效果不一定明顯

參考：
1、http://homepage.yesky.com/458/8225958.shtml
2、http://www.woaicss.com/article/div/css11.htm
3、http://www.daqianduan.com/css-efficiency-browsers-render-speed/
4、http://www.woaicss.com/article/div/css--.htm
5、http://www.zcool.com.cn/article/ZMjE5NzI=.html

6、瀏覽器渲染原理，reflow和repaint http://www.cnblogs.com/beixiaosmail/archive/2012/02/04/2338090.html