CSS選擇器 - 性能的探究及提高

　　【本博客爲原創：http://www.cnblogs.com/HeavenBin/】 　　

前言：

　　在工做中編寫CSS樣式表時隨着選擇器層數的增長總會看到選擇器又醜又長的狀況，利用工做之餘研究從其命名再到如何提升其性能。本博客將以「通俗易懂」、「簡潔」的方式來探究CSS選擇器的性能，以及敘述總結如何提高CSS選擇器的性能。(2017-8-20)

 

一. CSS選擇器性能是如何消耗的？

工做原理：瀏覽器利用CSS選擇器來匹配文檔元素。

工做流程：例如 #hd .nav > a { padding-left: 15px }

　　1.在文檔全部元素中尋找全部的 a 標籤。

　　2.在1的結果中尋找其父元素的類名爲「.nav」的元素。

　　3.在2的結果中尋找其父輩元素的ID爲「hd」的元素。

　　4.在3的結果中增長樣式。

 

二. 分析怎麼提高CSS選擇器的性能?

在工做流程中能夠看出有兩個方面能夠提高性能：尋找的效率和尋找的次數

效率：選擇器的搜索個數，個數越少性能越好。

次數：選擇器的層數，層數越少性能越好。

 

三. 提高CSS選擇器性能的方式

方式一（減小搜索個數）：選擇效率高的選擇器，參考以下建議多用類選擇器少用標籤選擇器。

CSS選擇器搜索個數從少到多的排序：
　　id選擇器（#myid）
　　類選擇器（.myclassname）
　　標籤選擇器（div,h1,p）
　　相鄰選擇器（h1+p）
　　子選擇器（ul > li）
　　後代選擇器（li a）
　　通配符選擇器（*）
　　屬性選擇器（a[rel="external"]）
　　僞類選擇器（a:hover, li:nth-child）

 

方式二（減小層數）：使用BEM（block_element-modifier）的命名方式。

BEM：塊（block）、元素（element）、修飾符（modifier）

例如：

　　.hd{}

　　.hd_nav{}

　　.hd_nav_a{}

　　.hd_nav_a-link{}

　　.hd_nav_a-visited{}

 

方式三（減小層數）：使用面向屬性的命名方式。

面向屬性：以「樣式屬性的功能」來給選擇器命名。

例如：

　　.l{ float: left }

　　.tc{ text-align:center; }

　　.auto{ margin-left:auto; margin-right:auto; }

 

未完待續.....

　　若是您認爲這篇文章還不錯或者有所收穫，您能夠經過掃描一下下面的支付寶二維碼 打賞我一杯咖啡【物質支持】，也能夠點擊右下角的【推薦】按鈕【精神支持】，由於這兩種支持都是我繼續寫做，分享的最大動力