标签：style blog io color ar 使用 java sp for
尽管JavaScript比JAVA C++慢很多，JQuery比原生Js还慢很多，但是我们通过良好的编程习惯还是能提高代码执行的效率。
选择同一个元素，各种方法之间的性能是不一样的，有时候差异会特别大。通常比较常用的选择器有以下几个：
ID选择器 $("#id")
标签选择器 $("td")
类选择器 $(".target")
属性选择器 $("td[target=‘target‘]")
伪类选择器 $("td:hidden")
这5种选择器的性能是依次下降的：
性能顺序：ID选择器 > 标签选择器 > 类选择器 > 属性选择器 > 伪类选择器
//错误的
$("div.bizHelp");
//正确的
$("bizHelp");
$("#container").find(".bizHelp");
保证查询的路径最短，性能最优
//错误的
$(window).bind(‘click‘,function(){
//do someing...
});
$(window).css(‘width‘,‘1000px‘);
$(window).bind(‘load‘,function(){
//do someing...
});
//优化的
var $win = $(window);
$win.bind(‘click‘,function(){
//do someing...
});
$win.css(‘width‘,‘1000px‘);
$win.bind(‘load‘,function(){
//do someing...
});
var obj=$("#obj");
//A:
obj.css("width",200);
obj.css("height",200);
obj.css("background":"#eee");
//B:
obj.attr("style","width:200px;height:200px;background:#eee;");
//C:
//加个css .operation{width:200px;height:200px;background:#eee;}
obj.addClass("operation")
性能排序：C>B>A
//不好的
$.each(arr,function(i){
$(window).append(‘<li>‘+arr[i]+‘</li>‘)
});
//优化的
var _html=[];
$.each(arr,function(i){
_html.push(‘<li>‘+arr[i]+‘</li>‘)
});
$(window).append(_html.join(‘‘));
//不好的
$(‘a‘).click(function(){
//do someing...
});
//推荐的
$(document.body).click(function(event){
if(event.target.tagName==‘A‘){
//do someing...
}
});
//JQuery的方法
$(document.body).delegate("a","click",function(){
//do someing...
});
var list=ul.find("li"),
e;
//A:
var i=list.length;
while(i--){
e=$(list[i])
}
//B:
list.each(function(){
e=$(this);
});
//C:
$.each(list,function(){
e=$(this);
});
JQuery提供了$.fn.each()和$.each()两个方法来实现对集合的遍历，除此之外，还可以采用JS原生的for循环、while等来实现迭代，应该了解一下他们之间的性能差异：
测试说明：1w次执行耗时，单位毫秒/ms,统计三次运行的平均值
| 方案 | IE6 | IE7 | IE8 | IE9 | chrome | firefox | opera | safari |
| A | 172 | 219 | 157 | 30 | 3 | 5 | 4 | 6 |
| B | 219 | 234 | 203 | 41 | 4 | 6 | 5 | 8 |
| C | 219 | 234 | 187 | 52 | 3 | 4 | 5 | 7 |
结论
总体上来说A>C>B
方案A有大约25%的性能提升，但是不稳定。追求极致性能，用方案A；
循环数量少的话，建议使用方案C，比较稳定；
$.each(list,function(){
//A
var id=$(this).attr("id");
//B
var id=this.id;
})
很多常用的属性，比如id、name等都被浏览器原生实现，在JQuery中我们有时会用$(this).attr("id")的方式来获取id，这种方法的效率相比原生属性的获取效率而言，非常慢。
使用原生的API，可以极大的提高性能
测试说明：10w次执行耗时，单位毫秒/ms,统计三次运行的平均值
| 方案 | IE6 | IE7 | IE8 | IE9 | chrome | firefox | opera | safari |
| A | 6880 | 7030 | 4220 | 1188 | 157 | 244 | 133 | 135 |
| B | 310 | 310 | 150 | 27 | 4 | 5 | 17 | 3 |
新版本总会对性能进行改进，还会提供一些新的方法。
如果可以的话，应该尽量选用最新的版本；
标签：style blog io color ar 使用 java sp for
原文地址：http://www.cnblogs.com/dtdxrk/p/4081633.html
