Правила эффективного использования jQuery

Скорость работы javascript’а оказывается критичной крайне редко, однако такое все же может произойти, и произойти в самый неподходящий момент. Поэтому, лучше держать эти правила в голове и не пренебрегать ими.

Используйте результат поиска элементов повторно

Не следует производить поиск одних и тех же элементов снова и снова, это достаточно дорогостоящая по времени выполнения процедура. Поэтому, вместо того, чтобы писать такой код:

$('#myElement').bind('click', function(){...});
. . .
$('#myElement').css('border', '3px dashed yellow');
. . .
$('#myElement').fadeIn('slow');

разумнее будет найти элемент один раз, сохранить его, а затем применять к нему необходимые операции:

var myElement = $('#myElement');
. . .
myElement.bind('click', function(){...});
. . .
myElement.css('border', '3px dashed yellow');
. . .
myElement.fadeIn('slow');

Если на протяжении работы вашего скрипта часто используются одни и те же элементы, то будет разумно найти эти элементы только один раз и сохранить результат в глобальной переменной:

window.elements; // объявим переменную elements как глобальную
function init()
{
  elements = $('.someElements');
}

В некоторых случаях, становится необходимо совершать манипуляции с разными группами элементов, которые, однако, являются связанными. Например, это могут быть элементы формы, с которыми необходимо совершать много манипуляций. В таком случае, нам постоянно придется искать нужные элементы:

$('#myForm input:checkbox') // все флажки
$('#myForm input:text') // все текстовые поля
$('#myForm input:text[value != ""]') // все непустые текстовые поля

Вместо этого, можно найти все элементы формы один раз, и при необходимости доставать оттуда необходимые:

var inputs = $('#myForm input');
inputs.filter(':checkbox') // найдем все флажки
inputs.filter(':text') //найдем все текстовые поля
inputs.filter(':text[value != ""]') // найдем все непустые текстовые поля

Или, вам может потребоваться совершать много манипуляций с элементами списка, в том числе удалять и добавлять их. В таком случае, «кэшировать» элементы списка не будет хорошей идеей, поскольку их состав будет постоянно меняться, а «кэш» оказываться неактуальным. Однако, можно сохранить объект самого списка в глобальной переменной, что тоже значительно сократит вычислительные затраты:

myList = $('#myList');
. . .
myList.find('li:first').remove(); // найдем и удалим первый элемент списка
myList.find('li.showed').hide(); // скроем все элементы списка с классом showed

Избегайте лишних манипуляций c DOM

Основной идеей здесь является то, что если вы хотите внести ряд изменений на странице (добавить/изменить элемены), проделывайте эти манипуляции локально и только после этого вносите изменения в DOM. Например, если вы хотите добавить в список сто новых элементов, то ошибочным будет делать это поэлементно:

var top_100_list = [...]; // содержимое новых элементов
$mylist = $('#mylist'); // необходимый список
 
for (var i=0; i< top_100_list.length; i++)
  $mylist.append('<li>' + top_100_list[i] + '</li>');

гораздо эффективнее будет вставить сразу все элементы:

var top_100_list = [...]; // содержимое новых элементов
var li_items = ""; // вставляемый html-текст
$mylist = $('#mylist'); // необходимый список
 
for (var i=0; i< top_100_list.length; i++)
  li_items += '<li>' + top_100_list[i] + '</li>';
$mylist.append(li_items);

Еще больший выигрыш можно получить, если группа вставляемых элементов окажется «обернутой» одним элементом. Поэтому, если бы у нас была задача заменить содержимое списка сотней новых элементов, то самым оптимальным, был бы такой вариант:

var top_100_list = [...]; // содержимое новых элементов
var new_ul = "<ul id='mylist'>"; // вставляемый html-текст
$mylist = $('#mylist'); // необходимый список
 
for (var i=0; i< top_100_list.length; i++)
  new_ul += '<li>' + top_100_list[i] + '</li>';
new_ul += "</ul>";
$mylist.replaceWith(new_ul);

Изменять элементы локально, поможет метод clone(), который создает копии элементов, вместе со всем их содержимым. Произведя все необходимые изменения с копиями, можно вставить их обратно в DOM, вместо старых версий (это можно сделать с помощью метода replaceWith()).