元素选择器和类选择器渲染时间折腾
发布在css研究2014年9月23日view:4633
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

曾经

曾经有一个叫做标签选择器和一个类选择器摆在我面前,我不该如何选择,等到过了之后才发现原来前辈们都说类选择器更加高效更加友好!id选择器慎用,标签选择器和css3选择器都是低效的,建议少用。上天给了一个无聊的时间再玩一次,那么我会跟他们说,其实折腾过了才发现,原来是这么一回事且待我YY来。

我读书少,不要骗我

类选择器内心自白

大家好,我叫类型选择器,俗称某.class,我的规则名字是你们csser随便可以帮我取的,比如介样 .CSS 或者介样.css再或者你可以大胆的使用中文类 .我是中文类 这个也是被浏览器所识别的,还有一点我是区分大小写滴,别弄错了哦,但HTML标签不管是大写还是小写都是通用的。

很多前辈都说我是他们的好儿子,因为我能够帮助他们快速、高效、便捷地管理各项HTML标签,完全不用担心什么调试问题,哪里用到甩哪里,粑粑再也不用担心我被冷落了。真逼溺爱啊,有木有,纵观全网,有css的地方就有我。这也是我最值得拿来炫耀的地方,你看伟大的bootcss也有很多用类选择器来写哦。

标签选择器内心自白

大家好,我的名字叫标签选择器(Type selectors),其实我讨厌我的兄弟类选择器,每次都要跟我兄弟的屁股后面屁颠屁颠的。Why,这是why,额…因为…额…因为我也别无选择啊。只有在为数不多的时候我可以自立门户,比如说在css reset的时候,我就很嗨心了。开心起码不用跟它在后面嘻嘻!但是他们都说我类选择器性能更长,渲染的时间更长,我,我,我今天就是来洗白的!!!

洗白

关于选择器

在这里我并不是说非要死皮赖脸说,类型选择器一定比类选择器的性能更加牛逼,假如真要争一个结果出来,那估计这辈子真的要输了。之前也是听到很多人都说类型选择器比类选择器性能差,渲染时间更长。他们的有些人的理由是说英文是从右往左读,比如这段css .new .bd li a{color:#ff0} 就说其实是开始a标签开始找,然后再找li,再找类.bd,最后找.new这样的倒序过程。你说遍历文档的a标签,然后再到列表li,肯定很慢啦,但是事实真的是这样么?我自己基于本地网络利用Chrome33做了一个实验:

首先css只有一行,一个类选择器规则,一个是标签选择器规则,HMTL标签分别从2个——5个——10个——20个——100个——1000个变动,看看加载时间具体是怎样:

标签选择器css代码一:

div div div div div div div div div div div div div div div div div div div div div span em i{font-family:simsun; font-size:16px;background-color:#CCc;line-height:1;}

类选择器css代码二:

.i{font-family:simsun; font-size:16px;background-color:#CCc;line-height:1;}

HTML代码

<div>
<div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div>
<p>别看我太多,我只是一个小尾巴<span><em>我叫全狗狗男神<i class="i">我在你后面汪汪叫</i></em></span></p>
</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>

</div>
<div>
<div>
<i>这是第二个i</i>
</div>
</div> ...... <div>
<div>
<i>这是第1000个i</i>
</div>
</div>

说明:标签从上面2个作为基础,先从标签选择器再到类选择器,标签选择器Ctrl+F5,分别记录load的加载时间。然后再关掉浏览器对类选择器重新记录。关于load和DOMContentLoaded,前者是总的加载时间(包括标签、css、js等),而DOM是文档也就是标签加载时间,总的来说时间越短,访问越快。

2个标签:
第一次

5个标签:
第一次

10个标签:
第一次

20个标签:
第一次

100个标签:
第一次

1000个标签:
第一次

是不是看得很晕?而且有点不敢相信自己所看见的,DOM有1000个标签时,也不见得标签选择器比类选择器在性能上输很多,某些时候甚至比类选择器更加便捷。有人就开始反驳我了,你丫的才测试一行css代码,能不能多行。好,那我们css以100-200-500-1000-2000行为对比,相关代码如下:

标签选择器css代码一:

div div div div div div div div div div div div div div div div div div div div div span em i{font-family:simsun; font-size:16px;background-color:#CCc;line-height:1;}
/*---下面为无关紧要的css--*/
...省略100~200行,不能有图片请求的css,纯css!如
.leftArea{width:660px;float:left;}

标签选择器css代码一:

.i{font-family:simsun; font-size:16px;background-color:#CCc;line-height:1;}
/*---下面为无关紧要的css--*/
...省略100~2000行,不能有图片请求的css,纯css!如
.leftArea{width:660px;float:left;}

HTML代码

<div>
<div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div>
<div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div>
<p>别看我太多,我只是一个小尾巴<span><em>我叫全狗狗男神<i class="i">我在你后面汪汪叫</i></em></span></p>
</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>
</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div>

</div>

100行代码:
第一次

200行代码:
第一次

500行代码:
第一次

1000行代码:
第一次

2000行代码:
第一次

说实话

从上面的测试中我们看不见所谓的css类会比标签选择器更具有优势的方法,更谈不上压倒性的胜利。当然我这里也只是局限性的做抽样测试而已,你也可以在你本地用统一的办法的或者找出另一个办法来去衡量他们之间的性能优化。对于有没有在线工具测试这种,答案是当然有:你可以点击这里 之前有一篇外文叫做Writing efficient CSS selectors 你也可以点击 译文:编写高效的CSS选择器 查阅。文章中效率问题不敢全部举双手赞同。而我看来标签选择器其实很多时候就是辅助类选择器所不能控制的样式而存在的,比如说.new li a 就是为了控制a链接的样式问题而存在,因为加入每个a标签都加上类选择器 .a 在你看来所谓的性能优化,其实更多了一层标签,所以怎么用看你自己吧。不过对于模块类的,我还是推荐类选择器,毕竟控制上比标签选择器更加灵活。

好了,说完了,我的观点是这样,那么你的观点呢,在评论中牛逼哄哄地说出来吧。

参考资料

Class_selectors
Type_selectors

本文地址:http://xiaoho.com/?p=781
原创文章,转载请注明来自:◎小黑路人xiaoho.com

评论
发表评论
10个月前
添加了一枚【评注】:12123
4年前

@DO1路人乙 没搜到,贴个地址让我观摩一下。

4年前

@蠕儿 不过确实id最好还是尽量少用,就像你说的demo操作的时候绑定id,所以id确实慎用。

4年前

@威老 id选择慎用,应该也不是出于性能考虑,因为id大多用来定位和操作dom,所以为了结构 样式 行为分离,就尽量不用了啊。

4年前

@威老 有的,不信你随便google一下就知道了

4年前

“id选择器慎用” 我靠,这是什么样的 "前辈们" 啊

4年前

@蠕儿 不客气啦,其实我之前也在一直纠结,但是测试过之后,是不是反正现在官方都没有定论,大胆的用吧。

4年前

哇,我一直在纠结这个问题呢啊。感谢你做的测试。

WRITTEN BY
DO1路人乙
个人博客:xiaoho.com
TA的新浪微博
PUBLISHED IN
css研究

很喜欢这个前端论坛~所以在自己博客的每一篇原创文章都会在这边跟大家分享一下,暂定就这么多,纯粹的爱好者。

我的收藏