1、避免通配選擇器

　　優化選擇器的原則是減少匹配時間。CSS選擇器的匹配機制是：從右向左進行規制匹配的！

　　#header > a { font-weight:blod; }

　　上面這條規制實際是瀏覽器遍歷頁面所有a元素，并確定其父元素的id是否為header。

　　#header a {...}

　　后代選擇器開銷更大，在遍歷頁面的所有a元素后，會需向上遍歷直到根節點。

　　由此可知，選擇器最右邊的規制 往往決定了向左移匹配的工作量。故最右邊的選擇規則 稱之為關鍵選擇器。

　　.selected * {...}

　　在匹配所有元素后，再分別向上匹配直至根節點。通常比開銷最小的ID選擇器高出3個數量級。

2、避免單規則的屬性選擇器

　　.selected [href='#index'] {...}

　　瀏覽器先匹配所有的元素，檢查其是否有href屬性并且值為“#index”，再分別向上匹配class為selected的元素。故應該避免使用關鍵選擇器是單規則屬性選擇器的規則。

3、避免正則的屬性選擇器

　　CSS3添加了復雜的屬性選擇器，通過類正則表達式進行匹配。但這些類型的選擇器會比基于類別的匹配慢很多。

4、移除無匹配的樣式

　　1.刪除無用的樣式，可縮減樣式文件大小，加快加載速度。

　　2.對于瀏覽器，所有樣式規則都會被解析后索引起來，即使是當前頁面無匹配的規則！故移除無匹配的規則，減少索引項，加快瀏覽器查找速度。

總結

以上是生活随笔為你收集整理的性能优化(7)：教你正确使用css选择器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。