CSS选择器 - 性能的探究及提升

2018-06-24 01:46:49来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

  本博客为原创: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; }

 

未完待续.....

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

支付宝

 

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:CSS布局---居中方法

下一篇:HTML&CSS——使用DIV和CSS完成网站首页重构