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; }
未完待续.....
如果您认为这篇文章还不错或者有所收获,您可以通过扫描一下下面的支付宝二维码 打赏我一杯咖啡【物质支持】,也可以点击右下角的【推荐】按钮【精神支持】,因为这两种支持都是我继续写作,分享的最大动力
CSS选择器 - 性能的探究及提升的更多相关文章
- 如何提升 CSS 选择器性能
CSS 选择器性能损耗来自? CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器.而在这之前我们需要了解CSS选择器匹配 ...
- 提升 CSS 选择器性能的方法
CSS 选择器性能损耗来自? CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器.而在这之前我们需要了解CSS选择器匹配 ...
- [转]关于浏览器css选择器性能优化
作为一个前端开发, 我觉得很有必要了解浏览器对css选择器的解析,因为这个关系到页面的渲染,高效的方式.避开开销大的方式这些无疑为网站加载缩短了时间. 最近在新的项目中陷入了一个误区,也是出于对jqu ...
- CSS选择器性能分析
写了几篇关于js的博客,也是关于性能的,现在,我觉得有必要那css来认真分析一下了.之前只是看别人这么写就跟着写,但是没有去研究这样写或者是不是正确的写法,性价比怎么样,渲染的效率好么!这些都没有考虑 ...
- 网站CSS选择器性能讨论
CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素.作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面 ...
- 看这一篇就够了,css选择器知识汇总
对大多技术人员来说都比较熟悉CSS选择器,举一例子来说,假设给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了, ...
- 编写高效的CSS选择器
高效的CSS已经不是一个新话题,也不是一个我非得重拾的话题,但是,它却是自我在SKY工作以后,真正感兴趣并始终关注的一个话题. 很多人或者忘记了,或者仅仅是没有意识到,CSS可以是高效的也可能导致低能 ...
- css选择器的性能
性能排序: 1.id选择器(#myid) 2.类选择器(.myclassname) 3.标签选择器(div,h1,p) 4.相邻选择器(h1+p) 5.子选择器(ul < li) 6.后代选择器 ...
- CSS选择器从右向左的匹配规则
CSS选择器从右向左的匹配规则 下面这个栗子,CSS选择器它是如何工作的? .mod-nav h3 span {font-size: 16px;} 如果不知道匹配规则,可能的理解是从左向右匹配:先找到 ...
随机推荐
- Jenkins+Git配置
Jenkins+Git配置 一.GitHub上配置 前提:Jenkins能正常打开 将本地文件上传到GitHub上:进入终端 cd Documents cd project git clone htt ...
- Delphi临界区的使用
在开发一个平板点餐软件后台订单打印程序时,使用线程订单打印,为防打印阻塞使用临界区. 类: type MYPARA=record title:pchar; //标题 str:pchar; flag:i ...
- Oracle存储过程、包、方法使用总结
/** *@author:zhengwei *@date:2017-04-28 *@desc:存储过程用法总结 */ CREATE OR REPLACE PROCEDURE MYPROCEDURE(P ...
- 关于EF 通用增删改查的封装
1. Entity Framework是Microsoft的ORM框架,随着 Entity Framework 不断的完善强化已经到达了EF 6.0+ 还是非常的完善的,目前使用的比例相对于其他OR ...
- C/C++中const关键字的用法及其与宏定义的比较
1.const关键字的性质 简单来说:const关键字修饰的变量具有常属性. 即它所修饰的变量不能被修改. 2.修饰局部变量 ; ; 这两种写法是等价的,都是表示变量的值不能被改变,需要注意的是,用c ...
- Java 9 揭秘(12. Process API 更新)
Tips 做一个终身学习的人. 在本章中,主要介绍以下内容: Process API是什么 如何创建本地进程 如何获取新进程的信息 如何获取当前进程的信息 如何获取所有系统进程的信息 如何设置创建,查 ...
- 【期望DP】
[总览] [期望dp] 求解达到某一目标的期望花费:因为最终的花费无从知晓(不可能从$\infty$推起),所以期望dp需要倒序求解. 设$f[i][j]$表示在$(i, j)$这个状态实现目标的期望 ...
- android 7.0 多渠道打包 - 美团开源工具Walle 命令行打包
在Android 7.0(Nougat)推出了新的应用签名方案APK Signature Scheme v2后,之前快速生成渠道包的方式(美团Android自动化之旅-生成渠道包)已经行不通了,对此美 ...
- #Laravel 笔记# 多语言化 App::setLocale() 持久化。
App::getLocale();获取当前语言 App::setLocale();设置语言配置文件 语言配置文件config/app.php locale 是默认语言,fallback_locale为 ...
- Result Maps collection does not contain value for...
出现上述错误 主要是因为你的select标签内部的resultMap属性指向的不正确 在sql文件中只要有一个resultMap或resultType属性指向错误,则在这个文件中其余正确的语句也不能执 ...