很多常用的属性，比如id、name等都被浏览器原生实现，在JQuery中我们有时会用$(this).attr("id")的方式来获取id，这种方法的效率相比原生属性的获取效率而言，非常慢。

$.each(list,function(){ //A var id=$(this).attr("id"); //B var id=this.id; }) 测试结果

测试说明：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

结论

使用原生的API，可以极大的提高性能

最佳实践

对于id等常用的属性，用原生的属性，不要通过attr去获取；

【使用事件委托】

经常会遇到给一个列表中所有元素添加点击事件的业务场景，传统的做法是得到这个列表的JQuery对象:$("li"),然后添加click事件：

$("li").click(function(){})

这种方法的在列表数量比较大的时候会有严重的性能问题，应该值得关注。JQuery在很早的版本中已经引入了事件委托机制，可以很大程度的降低添加事件监听的消耗和内存的消耗。

对1w条记录的列表进行测试：

A:

var list=$("li");//length>1 list.click(function(){ })

B:

$("ul").delegate("li","click",function(){}) 测试结果

测试说明：对1w个<li>标签进行click事件添加的耗时，单位毫秒/ms,统计三次运行的平均值

方案 IE6 IE7 IE8 IE9 chrome firefox opera safari

A 2156 2172 1922 312 103 173 141 117

B 0 0 0 0 0 0 0 0

结论

委托的性能优势是非常绝对的；

最佳实践

对于需要同时给两个以上的同类型元素添加事件时，用方案B来代替A

【缓存查找的中间结果】 $(".list-item").show(); $(".list-item").hide();

=>

var listItem=$(".list-item"); listItem.show(); listItem.hide();

【减少DOM操作，尽量批量更新】

Dom 操作是浏览器操作中最为耗时的操作之一，JQuery中提供了append、appendTo、prepend、prependTo、after、 before、insertAfter、wrap等操作dom的实用方法，频繁使用这些方法可能会引起性能问题，一个提高性能的实践原则就是“尽可能少的 使用它们”。 如果一定要用到，也尽可能的采用合并、批量操作来减少dom的操作消耗。

【使用$.data 而不是$.fn.data】 $(elem).data(key,value); $.data(elem,key,value);

后者比前者快近10倍

【可能的话，使用最新版本的JQuery】

新版本总会对性能进行改进，还会提供一些非常好用的工具，如果可以的话，应该尽量选用最新的版本；

【jQuery html性能大坑】

jQuery的html方法的作用是为dom元素设置innerHTML，分析html的源代码（1.8.3）

if ( elem.nodeType === 1 ) { jQuery.cleanData( elem.getElementsByTagName( "*" ) ); elem.innerHTML = value; }

在设置dom的innerHTML之前，会执行jQuery.cleanData，这个方法会对dom元素做一些clean的处理，如removeEvent，删除缓存等。
以两百行的列表为例，在ff浏览器中，该方法会执行大约5ms到8ms。即当dom元素为空时和dom元素中有两百行数据时，执行html方法，后者会比前者多运行5ms到8ms。
坑点
cleanData方法在jQueryUI中也会定义，且会重写$.cleanData，增加一些额外的操作，性能会受到影响。
还是以两百行的列表为例，在ff浏览器中，该方法会执行大约60ms到70ms。即当dom元素为空时和dom元素中有两百行数据时，执行html方法，后者会比前者多运行60ms到70ms。
解决方案
1. 采用原生的dom.innerHTML
2.在执行html()方法之前，先执行remove()方法

前端日志分析

nginx负载均衡的5种策略