如题,优化jQuery代码其实就是优化jQuery的选择器,常用的选择器包括#选择器,className选择器和tagName选择器,暂不考虑复杂的选择器。那么问题来了:
1.在一个中大型项目中,#选择器最快是毋庸置疑的,那className和tagName呢?
例如:$('.class')
和$('tag.class')
,那个效率上稍微高一些?
2.className在jQuery是遍历tagName获得的吗?
jQuery官方教程中有提到如何优化选择器:
Optimize Selectors
简而言之,就是下面四条军规:
- 优先使用id,把id放在最前面
- 把最独特的选择符放在最右边。比如最右边使用tag.class这样的组合。
- 减少选择符的层次
- 避免使用缺乏独特性的选择符
不要用空格以及>
多于两个的选择器
用 $(sel, context)
里的context或者$.fn.find
限定范围优于用ID(可维护性、可读性、易复用性,也包括性能)实际上,越是“大型”的项目里面ID就越要慎用,包括JS包括CSS。总是在用ID是复用性的灾难,反模块化的象征
可以参考我之前的这个回答最后那段代码,无论是十行的简单交互还是一千行以上的复杂效果基本都能写得清晰易懂
用什么选择器跟项目大不大有很大关系吗?