如何提升 CSS 选择器性能
CSS 选择器性能损耗来自?
CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器。而在这之前我们需要了解CSS选择器匹配的机制, 如子选择器规则:
#header > a {font-weight:blod;}
我们中的大多数人都是从左到右的阅读习惯,会习惯性的设定浏览器也是从左到右的方式进行匹配规则,推测这条规则的开销并不高。
我们会假设浏览器以这样的方式工作:寻找 id 为 header 的元素,然后将样式规则应用到直系子元素中的 a 元素上。我们知道文档中只有一个 id 为 header 的元素,并且它只有几个 a 元素的子节点,所以这个CSS选择器应该相当高效。
事实上,却恰恰相反,CSS选择器是从右到左进行规则匹配。了解这个机制后,例子中看似高效的选择器在实际中的匹配开销是很高的,浏览器必须遍历页面中所有的 a 元素并且确定其父元素的 id 是否为 header 。
如果把例子的子选择器改为后代选择器则会开销更多,在遍历页面中所有 a 元素后还需向其上级遍历直到根节点。
#header a {font-weight:blod;}
理解了CSS选择器从右到左匹配的机制后,明白只要当前选择符的左边还有其他选择符,样式系统就会继续向左移动,直到找到和规则匹配的选择符,或者因为不匹配而退出。我们把最右边选择符称之为关键选择器。
如何减少 CSS 选择器性能损耗?
Google 资深web开发工程师 Steve Souders 对 CSS 选择器的执行效率从高到低做了一个排序:
1.id选择器(#myid)
2.类选择器(.myclassname)
3.标签选择器(div,h1,p)
4.相邻选择器(h1+p)
5.子选择器(ul < li)
6.后代选择器(li a)
7.通配符选择器(*)
8.属性选择器(a[rel="external"])
9.伪类选择器(a:hover, li:nth-child)
根据以上「选择器匹配」与「选择器执行效率」原则,我们可以通过避免不恰当的使用,提升 CSS 选择器性能。
1、避免使用通用选择器
.content * {color: red;}
浏览器匹配文档中所有的元素后分别向上逐级匹配 class 为 content 的元素,直到文档的根节点。因此其匹配开销是非常大的,所以应避免使用关键选择器是通配选择器的情况。
2、避免使用标签或 class 选择器限制 id 选择器
BAD
button#backButton {…}
BAD
.menu-left#newMenuIcon {…}
GOOD
#backButton {…}
GOOD
#newMenuIcon {…}
3、避免使用标签限制 class 选择器
BAD
treecell.indented {…}
GOOD
.treecell-indented {…}
BEST
.hierarchy-deep {…}
4、避免使用多层标签选择器。使用 class 选择器替换,减少css查找
BAD
treeitem[mailfolder="true"] > treerow > treecell {…}
GOOD
.treecell-mailfolder {…}
5、避免使用子选择器
BAD
treehead treerow treecell {…}
BETTER, BUT STILL BAD
treehead > treerow > treecell {…}
GOOD
.treecell-header {…}
6、使用继承
BAD
#bookmarkMenuItem > .menu-left { list-style-image: url(blah) }
GOOD
#bookmarkMenuItem { list-style-image: url(blah) }
思考
作为一名前端工程师,应该具有「提升 CSS 选择器性能」的意识,但实际应用中,是否需要完全贯彻这些原则呢?这是一个探索「追求高性能」与「可维护性」两者平衡的问题。
对于「淘宝」,每个页面的 DOM 元素超过1000个以上的网站来说,通过限制 CSS 选择器,改善性能是具有实际意义的。但对于普通网站,我更倾向于保证「语义化」和「可维护性」的前提下,提升 CSS 选择器性能。
如何提升 CSS 选择器性能的更多相关文章
- 提升 CSS 选择器性能的方法
CSS 选择器性能损耗来自? CSS选择器对性能的影响源于浏览器匹配选择器和文档元素时所消耗的时间,所以优化选择器的原则是应尽量避免使用消耗更多匹配时间的选择器.而在这之前我们需要了解CSS选择器匹配 ...
- CSS选择器 - 性能的探究及提升
[本博客为原创:http://www.cnblogs.com/HeavenBin/] 前言: 在工作中编写CSS样式表时随着选择器层数的增加总会看到选择器又丑又长的情况,利用工作之余研究从其命名再到 ...
- [转]关于浏览器css选择器性能优化
作为一个前端开发, 我觉得很有必要了解浏览器对css选择器的解析,因为这个关系到页面的渲染,高效的方式.避开开销大的方式这些无疑为网站加载缩短了时间. 最近在新的项目中陷入了一个误区,也是出于对jqu ...
- CSS选择器性能分析
写了几篇关于js的博客,也是关于性能的,现在,我觉得有必要那css来认真分析一下了.之前只是看别人这么写就跟着写,但是没有去研究这样写或者是不是正确的写法,性价比怎么样,渲染的效率好么!这些都没有考虑 ...
- 网站CSS选择器性能讨论
CSS选择符由一些初始化参数组成,这些参数指明了要应用这个CSS规则的页面元素.作为一个网站的前端开发工程师,应该避免编写一些常见的开销很大的CSS选择符模式,尽量编写高效的CSS选择符,从而加快页面 ...
- 看这一篇就够了,css选择器知识汇总
对大多技术人员来说都比较熟悉CSS选择器,举一例子来说,假设给一个p标签增加一个类(class),可是执行后该class中的有些属性并没有起作用.通过Firebug查看,发现没有起作用的属性被覆盖了, ...
- 编写高效的CSS选择器
高效的CSS已经不是一个新话题,也不是一个我非得重拾的话题,但是,它却是自我在SKY工作以后,真正感兴趣并始终关注的一个话题. 很多人或者忘记了,或者仅仅是没有意识到,CSS可以是高效的也可能导致低能 ...
- 盒子端 CSS 动画性能提升研究
不同于传统的 PC Web 或者是移动 WEB,在腾讯视频客厅盒子端,接大屏显示器(电视)下,许多能流畅运行于 PC 端.移动端的 Web 动画,受限于硬件水平,在盒子端的表现的往往不尽如人意. 基于 ...
- css选择器的性能
性能排序: 1.id选择器(#myid) 2.类选择器(.myclassname) 3.标签选择器(div,h1,p) 4.相邻选择器(h1+p) 5.子选择器(ul < li) 6.后代选择器 ...
随机推荐
- openui5的资料比较少
openui5的资料比较少,稳定优秀的开源框架,国内了解的人了了,都在追AngularJS.ExtJS.React. React比较新,非死不可出品而且裹挟Native的噱头.Mobile Nativ ...
- delphi 输入文件相对路径的更改,更改成用户的
- ubuntu 使用apt-get install 安装php5.6--php7
使用ppa增加源:$ sudo apt-get install python-software-properties $ sudo add-apt-repository ppa:ondrej/php ...
- 重要的几个热键[Tab], [ctrl]-c, [ctrl]-d
来源于:鸟哥的Linux私房菜 在继续后面的章节之前,这里很需要跟大家再来报告一件事,那就是我们的文字模式里头具有很多的功能按键, 这些按键可以辅助我们进行指令的编写与程序的中断呢!这几个按键请大家务 ...
- 关于RDD
1. transform操作返回的是rdd, action操作返回其它数据类型,可以以此来区分操作类型: 2. Spark懒加载,懒到直到Action操作的时候才会加载数据计算,RDD的create和 ...
- SQL2008将服务器的数据库表数据插入到本地数据库
一,配置参数 exec sp_configure reconfigure exec sp_configure RECONFIGURE 若不配置参数会出现,提示这个错误: SQL Server 阻止了对 ...
- Java 内部类 this
内部类访问外部类的一个例子: public class Abc { private class Bc { public void print() { System.out.println(Abc.th ...
- lunix存取windows共享文件夹
在访问Windows共享资料之前,请确保Windows共享是可用的,这里就不再赘述该怎样设置Windows共享了,那可是另外一个课题. Linux访问Windows共享或者Linux共享资料给Wind ...
- Java NIO Channel之FileChannel [ 转载 ]
Java NIO Channel之FileChannel [ 转载 ] @author zachary.guo 对于文件 I/O,最强大之处在于异步 I/O(asynchronous I/O),它允许 ...
- 运行CUDA实例时候出现的问题
问题一:>LINK : fatal error LNK1123: 转换到 COFF 期间失败:文件无效或损坏 将 项目——项目属性——配置属性——连接器——清单文件——嵌入清单 “是”改为“否” ...