Заметки WEB-разработчика

Полезные материалы для web-разработки

Как ускорить работу jquery

В этой статье пойдет речь о том, как заставить работать jquery быстрее.

Как ускорить работу jquery

Првило 1.

Страйтесь выбирать элемены по id. Это самый быстрый способ найти элемен. В этом случае jquery использует нативный js - метод getElementById.

vaк myDiv = $('#myDiv'); // => document.getElementById('myDiv');

Правило 2.

Второй быстрый способ поиска элемента - по тегу. Если вам нужно сделать выборку id + тег, выбирайте самый ближний id по отношению к вашиму тегу.

Правило 3.

Кешируйте jquery объекты.

$('#myDiv li span').click(function(){ ... });
$('#myDiv li span').css('color', '#000');

В этом случае выборка по #myDiv происходит два раза. Правильнее сделать так:

var mySpan = $('#myDiv li span');
mySpan.click(function(){ ... });
mySpan.css('color', '#000');
Можно создать глобальный объект, где будут содрежаться все ваши выборки, доступные отовсюду:
window.$my = {
	mySpan : $('#myDiv li span')
}

Правило 4.

Не забывайте про цепочики вызовов.

Предыдущий пример можно было описать и так:

$('#myDiv li span').click(function(){ ... }).css('color', '#000');

Правило 5.

При возможности, используйте поиск среди уже выбранных элементов (подзапросов), а не по всему дереву DOM

var $spans = $('span');
$("p").find( $spans ).css('color','red');

Правило 6.

Минимизируйте операции, манипулирующие с DOM - деревом. Всегда лучше обновлять DOM, чем как-то изменять его. Например, следующая операция будет происходить довольно медленно:

// медленно
for ( var i = 0; i < data.length; i++ ) {
	$( '#kind' ).append( '' );
}
// правильно сделать так:
for ( var i = 0; i < data.length; i++ ) {
	var str +=  '';
}
$( '#kind' ).append(str);

Правило 7.

Привязывайте события к родителям

// медленно
$('div').on('click', someHandler);
 
// быстро, с указанным пространством имен - box1
$('div').on('.box1', someHandler);

Правило 8.

Сжимайте код. Чем меньше код весит в килобайтах, тем быстрее он грузится, а чем меньше файлов с кодом, тем меньше запросов идет на сервер. Поэтому вы должны стремиться к тому, чтобы у вас на production версии было 1-2 минифицированнных файла js. Кстати, есть куча online сервисов по минификации (сжатию) css и js кода. Подробнее здесь.

Комментарии

Комментарии через Вконтакте