Jquery 性能优化和技巧

1、尽量使用ID、标签选择器

$('#content')
$('span')

 

2、尽量给选择器指定上下文。

$('#content').find(":hidden");

$('span').filter(':animated');

 3、缓存对象

 

var content=$('#content');
content.css('...');
content.bind('....
......

 4、使用用链式操作改善3中的代码

$('#content').css('...') .bind('....

 5、缓存为全局对象

window.$my={
      head:$('head'),
      content:$('content')
}

 6、循环时的DOM操作

   将要拼接的HTML代码拼接完后，再插入到DOM中，减少DOM操作，可以极大的提高性能。

7、for 替代each

8、事件代理

 $('#myTable td').click(function(){
		$(this).css('background','red');
	});
//下面代码优化后，减少事件绑定
	$('#myTable').click(function(e){
		var $clicked = $(e.target);
		$clicked.css('background','red');
	});

 9、将常用的代码转化为插件

(function($){
    $.fn.yourPluginName=function(){
    //your code
         return this;
    }
})(JQuery);

10、 使用JOIN拼接字符串

 

11、合理用HTML5的Data属性

 

12、尽量使用原生的javascript

 

13、压缩javascript