В этой статье рассматривается ряд практических советов по производительности jQuery и javascript. Многие советы основаны на презентации jQuery Anti-Patterns for Performance (автор Paul Irish).

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

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

var myLength = myArray.length;

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

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

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

// плохой код
$.each(myArray, function(i, item) {
   var newListItem = '<li>' + item + '</li>';
   $('#ballers').append(newListItem);
});

// лучше сделать так:
var frag = document.createDocumentFragment();

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

// или так:
var myHtml = '';

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

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

Очень частое использование анонимных функций может вызвать проблемы. Их сложно отлаживать, поддерживать, тестировать или повторно использовать. Лучше давать имена вашим объектам, обработчикам и 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);

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

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

Выборки по ID

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

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

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

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

источник