Правила эффективного использования 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()).