11 правил, слідкування за якими може збільшити продуктивність скрипту, написаного з використанням jQuery.
Власне, розмітка на основі якої будуть приклади.

<div id="content">
        <form method="post" action="/">
                <h2>Traffic Light</h2>
                <ul id="traffic_light">
                        <li><input type="radio" class="on" name="light" value="red" /> Red</li>
                        <li><input type="radio" class="off" name="light" value="yellow" /> Yellow</li>
                        <li><input type="radio" class="off" name="light" value="green" /> Green</li>
                </ul>
                <input class="button" id="traffic_button" type="submit" value="Go" />
        </form>
</div>

Шукайте елемент за його атрибутом id. Якщо у елемента нема id, то треба вказувати найближчий до нього елемент з id:

var active_light = $('#traffic_light .on');

Якщо ми шукаємо елемент через id, то це відбувається швидко, через те, що використовується метод DOM getElementById.

Використовуйте ім’я тегу перед назвою класу:

var active_light = $('#traffic_light input.on');

Тоді використовується метод DOM getElementByTagName і серед вибраних елементів шукається той, у якого є клас 'on'.
Вибірка елементів за назвою класу — одна з найповільніших вибірок в jQuery.

Але ніколи не треба ставити ім’я тега перед id:

var active_light = $('div#traffic_light');

Будуть вибрані всі елементи з тегом 'div', а вже потім серед них буде знайдено елемент з потрібним id.

Кешуйте об’єкти jQuery:

Якщо ви використовуєте об’єкт більше, ніж один раз, замість того, щоб повторювати кілька разів вибірку елементу:

$('#traffic_light input.on).bind('click', function(){...});
$('#traffic_light input.on).css('border', '3px dashed yellow');
$('#traffic_light input.on).css('background-color', 'orange');
$('#traffic_light input.on).fadeIn('slow');

збережіть його у локальну змінну:

var $active_light = $('#traffic_light input.on');
$active_light.bind('click', function(){...});
$active_light.css('border', '3px dashed yellow');
$active_light.css('background-color', 'orange');
$active_light.fadeIn('slow');

'$' перед іменем змінної можна ставити, щоб показати, що у ній зберігається об’єкти jQuery.

Вибудовуйте код в ланцюги:

Оскільки більшість методів jQuery повертають після виконання об’єкт jQuery, то попередній приклад можна записати так:

var $active_light = $('#traffic_light input.on');
$active_light.bind('click', 
 function(){return false;})
        .css('border', '3px dashed yellow')
        .css('background-color', 'orange')
        .fadeIn('slow');

Це дозволить нам зменшити розмір коду.

UPD. У коментарях зауважили, що доцільніше використовувати таку конструкцію:

$('#traffic_light input.on')
   .bind('click', function(){...});
   .css('border', '3px dashed yellow');
   .css('background-color', 'orange');
   .fadeIn('slow');

Два виклики фунції css() можна об’єднати:

...
.css({'border': '3px dashed yellow', 'background-color': 'orange'})

Використовуйте підзапити:

var $traffic_light = $('#traffic_light'),
        $active_light = $traffic_light.find('input.on'),
        $inactive_lights = $traffic_light.find('input.off');

Оскільки ми зберегли об’єкт у змінній, то наступні вибірки будуть відтворюватися тільки у збереженому об’єкті, а не у всьому дереві елементів.

Мінімізуйте роботу з DOM-деревом:

Оскільки маніпуляції (видалення, переміщення і вставка нових елементів) з деревом DOM досить повільні, то замість того, щоб вставляти кожен елемент в DOM:

var top_100_list = [...], 
$mylist = $('#mylist'); 

for (var i=0, l=top_100_list.length; i<l; i++)
{
        $mylist.append('<li>' + top_100_list[i] + '</li>');
}

краще спочатку створити набір елементів у змінній, щоб потім за один крок вставити його в DOM:

var top_100_list = [...], 
$mylist = $('#mylist'), 
top_100_li = ""; 

for (var i=0, l=top_100_list.length; i<l; i++)
{
        top_100_li += '<li>' + top_100_list[i] + '</li>';
}

$mylist.html(top_100_li);

Використовуйте делегування подій:

Кожна подія “спливає” в DOM-дереві до елементів-предків. Це можна використовувати, коли кільком елементам на одну й ту ж подію треба виконати однакову функцію.

Замість того, щоб прив’язувати до кожного з цих елементів свою подію:

$('#entryform input).bind('focus', function(){
        $(this).addClass('selected');
}).bind('blur', function(){
        $(this).removeClass('selected');
});

можна прив’язати подію до батьківського елементу:

$('#entryform).bind('focus', function(e){
        var cell = $(e.target);  

        cell.addClass('selected');
}).bind('blur', function(e){
        var cell = $(e.target);
        cell.removeClass('selected');
});

Прив’язуйте до сторінки лише ті скрипти, які до неї відносяться:

Зазвичай все складається в один великий скрипт, який вставляється на всі сторінки сайту і виконується на подію $(document).ready(). Але навіть, якщо функція не працює на конкретно даній сторінці, то все рівно витрачається час на пошук елементів до яких прив’язана ця функція.

Тому можна розділити скрипт на кілька частин або структурувати його таким чином:

var mylib =
{
        article_page :
        {
                init : function()
                {
                        ...
                }
        },
        traffic_light :
        {
                init : function()
                {
                        ...
                }
        }
}

а на сторінці, де ми хочемо використовувати функції, що відносяться, наприклад, до traffic_light перед закриваючим вставити:

<script type="text/javascript">
    mylib.article.init();
</script>
</body>

Затримати завантаження до $(window).load:

Часто розробники jQuery виконування скрипту пов’язують з подією $(document).ready(). Подія відбувається у той час рендерингу сторінки, коли об’єкти все ще завантажуються (але готові до маніпуляції). Іноді можна спостерігати, що сторінка підвисає під час завантаження. Причиною цьому можуть стати саме функції, які прив’язані до $(document).ready().

Щоб позбутися від цього, можна частину функцій прив’язати до події $(window).load(), які відбуваються вже після того, як весь вміст сторінки (враховуючи вміст iframe) вже завантажено.

$(window).load(function(){
        // функции jQuery, инициализируемые после загрузки страницы
});

Стискайте js код.

Хоч це і не має відношення саме до jQuery.
Це можна робити за допомогою YUICompressor, Dojo Shrinjsafe, або Google Closure Compiler.

Вивчайте jQuery.

Читайте документацію, там можна знайти багато чого корисного. Можна скачати cheatsheet по jQuery 1.3, щоб функціонал був у потрібний час перед очима.