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

оригинал:http://comp-sandbox.ru/javascript-jquery/jquery-uvelichenie-proizvoditelnosti

---

В этой статье я расскажу несколько советов по увеличению производительности 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(), который работает очень быстро — поскольку это нативный метод браузера.