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

不要每次都在循环中访问数组的 length 属性，应在循环开始之前就将其缓存：

var myLength = myArray.length;
for (var i = 0; i < myLength; i++) {
  // do stuff
}

在循环外执行 append 操作

直接操作 DOM 是非常耗费性能的，尤其不要在循环中直接操作 DOM：

// 这样性能很差
$.each(myArray, function(i, item) {
  var newListItem = '<li>' + item + '</li>';
  $('#ballers').append(newListItem);
});
// 这样性能较好
var frag = document.createDocumentFragment();
$.each(myArray, function(i, item) {
    var newListItem = '<li>' + item + '</li>';
    frag.appendChild(newListItem);
});
$('#ballers')[0].appendChild(frag);
// 这样也很好
var myHtml = '';
$.each(myArray, function(i, item) {
    html += '<li>' + item + '</li>';
});
$('#ballers').html(myHtml);

代码要保持精炼

避免做重复的事情。如果你一直在做重复的事情，那么就可能出问题了：

// 丑
if ($eventfade.data('currently') != 'showing') {
  $eventfade.stop();
}
if ($eventhover.data('currently') != 'showing') {
  $eventhover.stop();
}
if ($spans.data('currently') != 'showing') {
  $spans.stop();
}
// 漂亮！！
var $elems = [$eventfade, $eventhover, $spans];
$.each($elems, function(i,elem) {
  if (elem.data('currently') != 'showing') {
    elem.stop();
  }
});

警惕匿名函数

匿名函数满天飞是很痛苦的事情，它们难以调试、维护、测试或者复用，应尽可能的对函数命名并将其封装在对象中，实施有效的管理：

// 不好
$(document).ready(function() {
  $('#magic').click(function(e) {
    $('#yayeffects').slideUp(function() {
      // ...
    });
  });
  $('#happiness').load(url + ' #unicorns', function() {
    // ...
  });
});
// 好
var PI = {
  onReady : function() {
    $('#magic').click(PI.candyMtn);
    $('#happiness').load(PI.url + ' #unicorns', PI.unicornCb);
  },
  candyMtn : function(e) {
    $('#yayeffects').slideUp(PI.slideCb);
  },
  slideCb : function() { ... },
  unicornCb : function() { ... }
};
$(document).ready(PI.onReady);

选择器的优化

随着越来越多的浏览器支持 document.querySelectorAll()，选择器的重担已经慢慢转移给浏览器了，但还是有一些技巧需要注意：

优先并尽可能地使用 ID 选择器：