Рациональное использование jQuery

Сегодня наш разговор пойдет о том, как рационально использовать библиотеку jQuery. Для начала первое правило: всегда используйте последнюю версию этой библиотеки – скорость выше, возможностей больше, ошибок меньше. Всегда читайте документацию. Где ее найти, мы уже упоминали. Если у вас большие JS библиотеки, то не забудьте их сжать (например, при помощи YUICompressor, Dojo ShrinkSafe или Google Closure Compiler).

А теперь о том, что неявно. Возьмем небольшой участок разметки на которой и будем приводить примеры.

<div id="content">
	<form method="post" action="" id=”entryform” />
		<h2>Ваш пол</h2>
		<ul id="Gender">
			<li><input type="radio" class="on" name="genderR" value="M" /> Мужской</li>
			<li><input type="radio" class="off" name=" genderR " value="W" /> Женский</li>
			<li><input type="radio" class="off" name=" genderR " value="Na" /> Не указан<<li>
		<input class="button" id="submit_button" type="submit" value="Далее" />
	</form>
</div>

1. Элемент лучше и быстрее всего искать по его аттрибуту id, потому что используется метод DOM getElementById. Если у элемента нет id, то нужно указывать ближайший к нему элемент с id:

var gender = $('#Gender.on');

2. Использовать имя тега перед названием класса:

var gender = $('#Gender input.on');

В этом случае используется метод DOM getElementsByTagName и среди выбранных элементов ищется тот, у которого есть класс 'on'. Сама популярная выборка элементов по названию класса — одна из самых медленных в jQuery.

3. Никогда не ставьте имя тега перед id:

var gender = $('div#Gender);

В этом случае сначала будут выбраны все элементы с тэгом 'div', а уже потом среди них будет найден элемент с нужным id.

4. Кешируйте объекты jQuery. Например, вы используете объект больше чем один раз, вместо того, чтобы несколько раз искать по элементу:

$('#Gender input.on).bind('click', function(){...});
$('#Gender input.on).css('background-color', '888');
$('#Gender input.on).fadeIn('slow');

сохраните его в локальную переменную:

var $gender = $('#Gender input.on');
$gender.bind('click', function(){...});
$gender.css('background-color', '888');
$gender.fadeIn('slow');

Примечание: чаще всего '$' перед именем переменной ставят, чтобы показать что в ней храниться объект jQuery.

5. Выстраивайте цепочки. Большинство методов jQuery возвращают после выполнения объект jQuery, это позволит сократить размер кода:

$('#Gender input.on').bind('click', 
function(){return false;})
	.css('background-color', '888')
	.fadeIn('slow');

6. Используйте подзапросы. Это сократит время поиска объекта, так как последующие выборки будут происходить из сохраненного объекта

var $gender = $('#Gender'),
	$onGender = $gender.find('input.on'),
	$offGenders = $gender.find('input.off');

7. Минимизируйте работу с DOM-деревом. Любые манипуляции (удаление, перемещение и вставка новых элементов) с DOM довольно медленные, поэтому вместо того, чтобы вставлять каждый элемент в DOM:

var toplist = [...], 
$mylist = $('#mylist'); 
for (var i=0, l=toplist.length; i<l; i++ )
{
	$mylist.append('<li>' + toplist[i] + '</li>');
}
Лучше работу с DOM свести к одному шагу.
var toplist = [...], 
$mylist = $('#mylist'), 
topli = ""; 

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

$mylist.html(toplist);

8. $(window).load. Чаще всего выполнение скрипта привязывают к событию $(document).ready(). Событие происходит в то время, когда объекты все еще загружаются. Иногда можно наблюдать, что страница подвисает во время загрузки. Причиной этого могут быть именно функции, которые привязаны к $(document).ready(). Чтобы избежать этого, можно часть функций привязать к событию $(window).load(), которое происходит уже после того, как все содержимое страницы (включая содержимое iframe) уже загружено.

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

9. Привязывайте к странице только относящиеся к ней скрипты. Обычно все складывается в один большой скрипт, который вставляется на все страницы сайта и выполняется на событие $(document).ready(). Но даже если функция не работает на данной конкретной странице, то все равно тратится время на поиск элементов, к которым привязана эта функция. Скрипт можно разделить на несколько частей или сделать его следующим образом:

var mylib =
{
	article:
	{
		init : function()
		{
			...
		}
	},
	forum_posts :
	{
		init : function()
		{
			...
		}
	}
}

а на странице, где мы хотим использовать функции, относящиеся, например, к article вставить:

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

Заинтересовались? Звоните нам по телефонам +375 (29) 774-35-89 и +375 (44) 774-35-89 в Минске. Мы будем рады помочь Вам в реализации Вашего проекта.