把 HTML 中作为 trigger 的 class name 放到 attribute 里面，会影响效率吗？

推荐关注

› Meteor

› JSLint - a JavaScript code quality tool

› jsFiddle

› D3.js

› WebStorm

推荐书目

› JavaScript 权威指南第 5 版

› Closure: The Definitive Guide

This topic created in 4199 days ago, the information mentioned may be changed or developed.

比如有个删除按钮：
<div class='btn btn-danger btn-delete'></div>

其中btn-delete是给jQuery做选择器用的
$('.btn-delete').click (...)

因为class中btn btn-danger是和UI相关的，而btn-delete是和事件处理相关的，
所以我想把名字改成
<div class='btn btn-danger trigger-delete'></div>

此时JS代码为
$('.trigger-delete').click (...)

这样从名字就能一目了然看出，那些是和CSS相关，那些是和JS相关。

我的问题是，如果我把trigger-delete移到attribute里面，改成这样
<div class='btn btn-danger' data-trigger='delete'></div>

此时JS代码为
$('[data-trigger="delete"]').click (...)

这样class只和CSS有关。

这种做法可行吗？会有效率或者别的问题？前端小白弱问。

btn

div

delete

21 replies • 2014-12-17 14:49:05 +08:00

boom11235

Dec 8, 2014

可行的，只是选择器执行起来效率差点。

nilennoct

Dec 8, 2014

肯定没有用class快，lz可以考虑用类似J_Delete或T_Delete的类名与css中用的class名区分开

ZackYang

Dec 8, 2014

带来可维护性和可读性的提高相较于导致性能的损失几乎可以忽略.

learnshare

Dec 8, 2014

最近在思考这个问题：如何用合理的 attr 替代冗长的 class。暂时还没有什么结果出来，有结果再跟你分享一下。

arbipher

Dec 8, 2014

@boom11235
@nilennoct
@ZackYang
有没有推荐的文章解释选择器执行效率的？

@learnshare
好

tini8

Dec 8, 2014

这样html代码是变美了，可js代码变丑了：

$('[data-trigger="delete"]')

learnshare

Dec 8, 2014

@arbipher

css的选择器效率分析： http://segmentfault.com/blog/trigkit4/1190000000657442
关于CSS选择器的效率问题： http://www.cnblogs.com/aotian/p/3532478.html
Efficiently Rendering CSS： http://css-tricks.com/efficiently-rendering-css/

bsbgong

Dec 8, 2014

跟@ZackYang 的观点一致，这点性能差别可以忽略，代码的可维护性更有价值。

ZackYang

Dec 8, 2014

@arbipher Look http://www.ruanyifeng.com/blog/2011/08/jquery_best_practices.html

boom11235

Dec 8, 2014

@learnshare 这个问题主要是js的选择器性能而不是css吧

建议：
css中用class，js的唯一元素挂id，其他的元素选择综合考虑。
attr和class在现代浏览器中js选择性能差别很小的。

kmvan

Dec 8, 2014

选个class就不用jq吧，直接 selectQuery。

learnshare

Dec 8, 2014

@boom11235 我认为 JS 选择元素的效率和 CSS 中“一样”，当然不一定是 1:1，但在忽略 JS 和 CSS 执行差异之后，两者执行两个选择器的速度比例应该几乎一样。（浏览器实现的问题，这个不是楼主要关心的重点）

我同样赞同 @ZackYang 的观点，程序的可读性和可维护性大大提高，一点选择器效率的降低无关紧要。

我昨天写了这个 demo http://plnkr.co/edit/5BEEsEAdEogibjMyR55b?p=preview ，来尝试找出用 class 和 attr 带来的差异。目前的结果是：自定义的 attr 是非标准的，无法验证，但能够被广泛支持。

jame

Dec 8, 2014 via iPhone

class="btn action" data-trigger="delete"
$('.action[data-trigger="delete"]')
这样会更快

learnshare

Dec 8, 2014

在 H5 规范里，推荐的是扩展 class 或者 data-* 属性 http://www.w3.org/TR/html5/single-page.html#extensibility

在 Angular.js 里，使用 ng-* 或者其他任意的属性名来扩展。

这个 data-* 适合 JS 中存储数据用，而 class 适合为元素扩展样式用。如果想要参考 disabled 这类属性扩展一个 hide(=true/false) 属性，class 和 attr 都可以。

attr 方式好在简洁易懂，但 data-hide 属性就不如 hide 属性易读。

我会继续研究这个问题。

pysama

Dec 8, 2014

不要在意这些细节，真的~

fengliu222

Dec 8, 2014

@learnshare 这位同学给出的文档，是CSS选择器速度文档，关乎于浏览器渲染页面时的性能，但并非jquery的attribute selector与class selector之间的速度对比。
http://jsperf.com/jquery-class-vs-attribute-selectors/3
上面这个地址，歪果仁做了个测试，是关于两种选择器的速度对比的（googleapis这个域名需要翻一下）。
可以得出，虽然慢了一点，但完全是可以接受的。
相对于使用data-*带来的可维护性和可读性的收益，那点性能损耗可以忽略。

spark

Dec 9, 2014

楼主可以看看Rails是怎么做的

spark

Dec 9, 2014

补个链接 http://edgeguides.rubyonrails.org/working_with_javascript_in_rails.html

arbipher

Dec 10, 2014

感谢大家的回复。

@ZackYang
@boom11235
@fengliu222
同意你们的观点，“可维护性和可读性的收益”大于“性能损耗”

@pysama
确实有点过于细节了。这个问题反复出现，困扰我好久了。。。前几次都忽略，这次终于受不了了

@tini8
$('[data-trigger="delete"]')
这个不丑吧，除去data这个词，trigger和delete用最简单的方法描述了这个函数的类型和作用。

@kmvan
selectQuery是DOM API？那选出来的元素，如果再进行其他jQuery操作的话，不是还得转化过去。。。

@jame
nice code。只用一个名为action的class name就解决了效率的问题。

@learnshare
期待你的研究成果。

bolasblack

Dec 17, 2014

@tini8 @arbipher

怎么可能会丑……直接扩展 jQuery 的选择器语法不就好了？甚至包装一下 $ 函数，比如如果选择器以 & 开头，就替换为属性选择器：

$('&delete') -> $('[data-trigger="delete"]')

这样子难道还丑么？

bolasblack

Dec 17, 2014

我始终秉持一个观点，在绝大部分开发工作中，可维护性远比效率重要太多了，完全可以牺牲效率还提升可维护性