用回调“链接”动画事件。

假设你想让一个段落在点击后消失。您还希望随后从DOM中删除该元素。你可能认为你可以简单地链接这些方法:

$("p").click(function(e) {
  $(this).fadeOut("slow").remove();
});

在这个例子中，.remove()将在. fadeout()完成之前被调用，破坏渐变效果，只是让元素立即消失。相反，当你想在完成前一个命令后才触发一个命令时，使用回调函数:

$("p").click(function(e){
  $(this).fadeOut("slow", function(){
    $(this).remove();
  });
});

. fadeout()的第二个参数是一个匿名函数，它将在. fadeout()动画完成后运行。这使得逐渐褪色，并随后删除元素。

使用字符串累加器样式

使用+运算符在内存中创建一个新的字符串，并将连接的值赋给它。只有在此之后，结果才被赋值给一个变量。 为了避免连接结果的中间变量，可以使用+=运算符直接分配结果。 慢:

a += 'x' + 'y';

速度:

a += 'x';
a += 'y';

基元操作可能比函数调用快

考虑在性能关键循环和函数中使用替代基元操作而不是函数调用。 慢:

var min = Math.min(a, b);
arr.push(val);

速度:

var min = a < b ? a : b;
arr[arr.length] = val;

请参阅JavaScript性能最佳实践

进行过多的DOM操作。虽然.html()， .append()， .prepend()等方法很棒，但由于浏览器呈现和重新呈现页面的方式，经常使用它们会导致速度变慢。通常更好的方法是将html创建为字符串，并将其包含到DOM中一次，而不是多次更改DOM。

而不是:

var $parent = $('#parent');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $('<div class="foo-' + i + '" />');
    $parent.append($div);
}

试试这个:

var $parent = $('#parent');
var iterations = 10;
var html = '';

for (var i = 0; i < iterations; i++){
    html += '<div class="foo-' + i + '"></div>';
}

$parent.append(html);

甚至这个($wrapper是一个新创建的元素，还没有注入到DOM中。将节点附加到这个包装器div不会导致速度变慢，最后我们将$wrapper附加到$parent，只使用了一个DOM操作):

var $parent = $('#parent');
var $wrapper = $('<div class="wrapper" />');
var iterations = 10;

for (var i = 0; i < iterations; i++){
    var $div = $('<div class="foo-' + i + '" />');
    $wrapper.append($div);
}

$parent.append($wrapper);

过度使用链条。

看到这个:

this.buttonNext[n ? 'bind' : 'unbind'](this.options.buttonNextEvent, this.funcNext)[n ? 'removeClass' : 'addClass'](this.className('jcarousel-next-disabled')).attr('disabled', n ? false : true);

解释

我对JavaScript也这么说，但是jQuery, JavaScript永远不应该取代CSS。

另外，确保站点对于关闭JavaScript的人来说是可用的(现在不像以前那么重要了，但拥有一个完全可用的站点总是好的)。

没有意识到性能受到了影响，并且过度使用选择器而不是将它们分配给局部变量。例如:-

$('#button').click(function() {
    $('#label').method();
    $('#label').method2();
    $('#label').css('background-color', 'red');
});

而不是:

$('#button').click(function() {
    var $label = $('#label');
    $label.method();
    $label.method2();
    $label.css('background-color', 'red');
});

或者更好的链接:-

$('#button').click(function() {
    $("#label").method().method2().css("background-color", "red"); 
});

当我意识到调用栈是如何工作的时候，我发现这是一个具有启发性的时刻。

编辑:在评论中加入建议。