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

未完待续.....

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

CSS选择器 - 性能的探究及提升的更多相关文章

  1. 如何提升 CSS 选择器性能

    CSS 选择器性能损耗来自? CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器.而在这之前我们需要了解CSS选择器匹配 ...

  2. 提升 CSS 选择器性能的方法

    CSS 选择器性能损耗来自? CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器.而在这之前我们需要了解CSS选择器匹配 ...

  3. [转]关于浏览器css选择器性能优化

    作为一个前端开发, 我觉得很有必要了解浏览器对css选择器的解析,因为这个关系到页面的渲染,高效的方式.避开开销大的方式这些无疑为网站加载缩短了时间. 最近在新的项目中陷入了一个误区,也是出于对jqu ...

  4. CSS选择器性能分析

    写了几篇关于js的博客,也是关于性能的,现在,我觉得有必要那css来认真分析一下了.之前只是看别人这么写就跟着写,但是没有去研究这样写或者是不是正确的写法,性价比怎么样,渲染的效率好么!这些都没有考虑 ...

  5. 网站CSS选择器性能讨论

    CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素.作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面 ...

  6. 看这一篇就够了,css选择器知识汇总

    对大多技术人员来说都比较熟悉CSS选择器,举一例子来说,假设给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了, ...

  7. 编写高效的CSS选择器

    高效的CSS已经不是一个新话题,也不是一个我非得重拾的话题,但是,它却是自我在SKY工作以后,真正感兴趣并始终关注的一个话题. 很多人或者忘记了,或者仅仅是没有意识到,CSS可以是高效的也可能导致低能 ...

  8. css选择器的性能

    性能排序: 1.id选择器(#myid) 2.类选择器(.myclassname) 3.标签选择器(div,h1,p) 4.相邻选择器(h1+p) 5.子选择器(ul < li) 6.后代选择器 ...

  9. CSS选择器从右向左的匹配规则

    CSS选择器从右向左的匹配规则 下面这个栗子,CSS选择器它是如何工作的? .mod-nav h3 span {font-size: 16px;} 如果不知道匹配规则,可能的理解是从左向右匹配:先找到 ...

随机推荐

  1. 读书共享 Primer Plus C-part 8

    第十三章 文件输入/输出 fopen--fclose fopen 是文件的操作的开始 fclose是文件操作的结束 getc--putc getchar--putchar getc对应文件的获取单个字 ...

  2. Chrome浏览器扩展开发系列之十:桌面通知Notification

    Desktop Notification也称为Web Notification,是在Web页面之外,以弹出桌面对话框的形式通知用户发生了某事件.Web Notification于2015.9.10成为 ...

  3. PhpStorm配置PHP解释器(wampServer版)

    PHPStorm(以下简称为PS)和wampServer集成环境安装简单,不再赘述. 本人使用PhpStrom版本为2017.1.4版本. PS刚开始使用会使用自带服务器,但是有几率不能自动匹配到PH ...

  4. 几个SQL语句(备忘)

    1.三涨停 select biao1.代码,biao1.名称 from biao1,biao2,biao3 where (biao1.涨幅+ biao2.涨幅+biao3.涨幅)>0.27 an ...

  5. C++强制类型转换:static_cast、dynamic_cast、const_cast、reinterpret_cast

    1. c强制转换与c++强制转换 c语言强制类型转换主要用于基础的数据类型间的转换,语法为: (type-id)expression//转换格式1 type-id(expression)//转换格式2 ...

  6. CJOJ 2482 【POI2000】促销活动

    CJOJ 2482 [POI2000]促销活动(STL优先队列,大根堆,小根堆) Description 促销活动遵守以下规则: 一个消费者 -- 想参加促销活动的消费者,在账单下记下他自己所付的费用 ...

  7. Es6 新增解构赋值

    1.数组的解构赋值 基本用法 ES6 允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构(Destructuring). 要想实现解构,就必须是容器,或者具有可遍历的接口. 以前,为 ...

  8. 常用的DNS

    中国互联网络中心(推荐,安全又快速):1.2.4.8.210.2.4.8.101.226.4.6(电信及移动).123.125.81.6(联通)阿里DNS:223.5.5.5.223.6.6.6goo ...

  9. linux执行sh报错:$’\r’: 未找到命令的解决

    背景 执行.sh脚本时出现$'\r': 未找到命令, 原因 是因为命令直接从windows 复制过来导致的 解决 yum install dos2unix dos2unix **.sh 进行转换 再次 ...

  10. [肯定不知道]PeopleSoft中PSADMIN你不知道的秘密

    PeopleSoft psadmin工具是用于管理PS App server,process scheduler 和 web server节点的.可以使用一些设置菜单选项来管理或配置上面提到的任何组件 ...