jQuery. Увеличение производительности

16 Янв
2012

В этой статье я расскажу несколько советов по увеличению производительности jQuery и javascript.

1. Кешируйте length при обращении в цикле.

2. В цикле for не обращайтесь каждый раз к свойству массива length, лучше сохранить его в переменную перед началом цикла.

var myLength = myArray.length;

for (var i = 0; i < myLength; i++) {
// do stuff
}


3. Добавляйте новый контент вне цикла

Работа с DOM очень сильно сказывается на производительности, поэтому если вы добавляете много элементов к DOM, то лучше сделать это сразу за один вызов.

// плохая производительность
$.each(myArray, function(i, item) {
var newListItem = '' + item + '';
$('#ballers').append(newListItem);
});


//хорошая производительность
var frag = document.createDocumentFragment();

$.each(myArray, function(i, item) {
var newListItem = '' + item + '';
frag.appendChild(newListItem);
});
$('#ballers')[0].appendChild(frag);


// хорошая производительность
var myHtml = '';

$.each(myArray, function(i, item) {
html += '' + item + '';
});
$('#ballers').html(myHtml);


4. Будьте осторожны с анонимными функциями

Очень частое использование анонимных функций может вызвать проблемы. Их сложно отлаживать, поддерживать, тестировать или повторно использовать. Лучше давать имена вашим объектам, обработчикам и callback функциям.

// плохое использование
$(document).ready(function() {
$('#magic').click(function(e) {
$('#yayeffects').slideUp(function() {
// ...
});
});

$('#happiness').load(url + ' #unicorns', function() {
// ...
});
});


// хорошее использование
var PI = {
onReady : function() {
$('#magic').click(PI.candyMtn);
$('#happiness').load(PI.url + ' #unicorns', PI.unicornCb);
},

candyMtn : function(e) {
$('#yayeffects').slideUp(PI.slideCb);
},

slideCb : function() { ... },

unicornCb : function() { ... }
};

$(document).ready(PI.onReady);


5. Оптимизация селекторов

Оптимизация селекторов является менее важной задачей, чем это было раньше, поскольку большинство браузеров реализует метод document.querySelectorAll() и проблема выборки от jQuery переходит к браузерам. Однако есть несколько советов, которые следует иметь в виду.

Выборки по ID

Всегда хорошо начинать описание селектора с ID.

// работает быстро
$('#container div.robotarm');

// работает супер-быстро
$('#container').find('div.robotarm');


Подход, в котором используется $.fn.find, работает быстрее, — выборки только по ID обрабатываются с помощью метода document.getElementById(), который работает очень быстро — поскольку это нативный метод браузера.
По материалам Хабрахабр.



загрузка...

Комментарии:

Наверх