1、迴圈中快取length

var myLength = myArray.length;

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

2、在迴圈外使用append，避免過於頻繁操作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);
 

3、保持程式碼的整潔幹練，優化

// 醜
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();
    }
});
 

4、控制匿名函式，組織封裝

// 糾結
$(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); 
 

5、優化選擇器

//  快
$('#container div.robotarm');

// 非常快
$('#container').find('div.robotarm');

$('div.data .gonzalez');

$('.data td.gonzalez');

$('.data table.attendees td.gonzalez');

$('.data td.gonzalez');

6、使用事件委託：

// 如果列表裡面元素很多，不堪想象
$('li.trigger').click(handlerFn);

// 這樣寫好一點，用 $.fn.live 做事件委派
$('li.trigger').live('click', handlerFn);

// 最好的做法，用 $.fn.delegate 做事件委派，還可以指定一個上下文
$('#myList').delegate('li.trigger', 'click', handlerFn);

七、將元素detach出來再操作

var $table = $('#myTable');
var $parent = $table.parent();

$table.detach();
// ... 新增大量的行到表格中去
$parent.append(table);

八、使用樣式表給大量元素新增CSS

// 操作大於 20 個元素是不錯的，但少於時就不值了
$('a.swedberg').css('color', '#asd123');
$('<style type="text/css">a.swedberg { color : #asd123 }</style>')
    .appendTo('head');

九、使用$.data而不是$.fn.data

// 常規寫法
$(elem).data(key,value);



// 快 10 倍

$.data(elem,key,value);

十、變數定義

// 老套的寫法
var test = 1;
var test2 = function() { ... };
var test3 = test2(test);

// 新鮮的寫法
var test = 1,
    test2 = function() { ... },
    test3 = test2(test);
在自執行的函式中，變數定義可以完全省掉。

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