css选择器与JQ选择器的性能比对与优化方案

css和JQ的选择器写起来似乎很相似，但他们的写法在性能上有一定的区别。

以下就较为常用的选择器进行比对和优化：

CSS选择器

效率高到低：

1.id选择器（#id）

2.类选择器（.class）

3.标签选择器（div,h1,p）

4.后代选择器（li a）

优化方案：

1.优先考虑用class选择器，虽然id选择器效率最高，但id选择的唯一性，需谨慎使用。

2.使用id或者class选择器时，勿再加类名或者标签名。例如

/*bad*/
div#id{}
p.class{}
.class1.class2{}

/*good*/
#id{}
.class{}
.class2{}

3.把多层标签选择规则用class替换。例如

/*bad*/
div>input[type="button"]{}
/*good*/
.input-btn{}

4.少用后代选择器，尤其是和标签或者通配符一起使用。例如

/*bad*/
ul li *{}
/*good*/
.list-in{}

JQ选择器

效率高到低：

1.id选择器$('#id') 

2.标签选择器$('div')：它直接来自原生的Javascript方法getElementByTagName()。

3.类选择器$('.class')：class选择器是最慢的，因为在IE浏览器下它会遍历所有的DOM节点。尽量避免使用class选择器。

4.find(),next(),children()等函数

5.后代选择器$('ul a')

优化方案：

1.用id最优

2.标签来修饰class，例如

$(' .class')//bad
$('div.class')//good

注意：勿用标签来修饰id，效率低；勿用ID来修饰ID。例如

$('#id #id_in')//bad
$('div#id_in')//bad
$('#id_in')//good

3.将已遍历的之后会用到的对象赋值给一个参数，缓存起来，之后就不必重新遍历。例

var obj= $('div.class');//obj就是缓存起来的对象
obj.find('li').addClass('.on');

4.尽量使用jq提供的find(),next(),children()等函数将进行遍历，少用高级选择器。例如

$('#di li')//bad
$('#div').find('li')//good

5.使用链式操作，避免多次遍历对象。例如

$('#id').addClass('.on').click(function(){});

参考网站

css选择器性能详情可链接：http://www.aliued.cn/2013/01/24/网站css选择器性能讨论.html 

JQ选择器性能优化方案参考链接：http://blog.163.com/hongshaoguoguo@126/blog/static/18046981201322311438610/