对于jQuery性能的一些优化建议

使用外部样式表为大量元素修改样式

当使用 $.fn.css 为超过 20 个元素修改样式时，应考虑直接在页面中添加 style 标签，据说性能可提升 60%。

// 当元素少于 20 个时使用这个方法，多余 20 个时，速度就慢了
$('a.swedberg').css('color', '#asd123');
// 多余 20 个元素时，应考虑直接在页面中添加 style 标签
$('<style type="text/css">a.swedberg { color : #asd123 }</style>')
  .appendTo('head');

使用 $.data 替代 $.fn.data

将 $.data 应用于 DOM 元素上，比直接在选择器上调用 $.fn.data 要快 10 倍。当然，前提是要先明白 DOM 元素和 jQuery 结果集之间的区别。

// 速度一般
$(elem).data(key,value);
// 速度提升 10 倍
$.data(elem,key,value);

别在空元素上浪费时间

jQuery 不会主动告诉你，你正在一个空白的结果集上运行代码 – 而且执行过程中并未出错。所以有时候再执行代码之前，需要先判断一下结果集是否为空：

// 不好：执行了三个函数之后
// 才发现结果集上没有任何元素
$('#nosuchthing').slideUp();
// 好
var $mySelection = $('#nosuchthing');
if ($mySelection.length) { $mySelection.slideUp(); }
// 最好：增加一个 doOnce 插件
jQuery.fn.doOnce = function(func){
  this.length && func.apply(this);
  return this;
}
$('li.cartitems').doOnce(function(){
  // 这里可以确保结果集不是空的
});

这种方法特别适用于 jQuery UI 方面，因为即使结果集中不包含任何元素，其开销也会很大。
变量的定义

可以在一条语句中定义多个变量：

// 老掉牙的写法
var test = 1;
var test2 = function() { ... };
var test3 = test2(test);
// 新写法
var test = 1,
  test2 = function() { ... },
  test3 = test2(test);

在自执行函数中，变量甚至可以不用定义：

(function(foo, bar) { ... })(1, 2);

条件判断

// 土方法
if (type == 'foo' || type == 'bar') { ... }
// 较先进的方法
if (/^(foo|bar)$/.test(type)) { ... }
// 使用对象查找
if (({ foo : 1, bar : 1 })[type]) { ... }