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; }

 

未完待续.....

　　若是您认为这篇文章还不错或者有所收获，您能够经过扫描一下下面的支付宝二维码 打赏我一杯咖啡【物质支持】，也能够点击右下角的【推荐】按钮【精神支持】，由于这两种支持都是我继续写做，分享的最大动力