Оптимизируйте свой код JQuery с помощью нескольких советов

Если вы смотрите на резкое улучшение скорости, есть несколько факторов, которые следует учитывать:

• Насколько эффективен ваш код
• Насколько эффективен браузерный JS-интерпретатор
• Насколько быстро работает компьютер с кодом

Тем не менее, существуют простые приемы, которые делают для лучшего выполнения, даже если его всего около 100 миллисекунд:

1) Сохраните запрос в переменной, если он понадобится вам позже

Предположим, у вас есть кнопка и необходимо применить некоторые свойства CSS.

$("#button").css('color','white');
$("#button").css('width','100%');
$("#button").css('background-color','green');

Предыдущий пример выполняет 3 раза один и тот же запрос к DOM, ищущему кнопку с идентификатором «button», невооруженным глазом это даже не так плохо. Но что произойдет, если вы выполните этот запрос в цикле?

for(var i = 0;i < 100;i++){
$('#list').append("
"+i+"
");
}

Запрос был выполнен 100 раз! В качестве хорошей практики вы можете кэшировать запрос раньше:

var list = $("#list");
for(var i = 0;i < 100;i++){
list.append("
"+i+"
");
}

2) Когда в вашем запросе используется селектор классов, предоставьте ограниченную область для его поиска.

Когда используется селектор класса, вероятно, вам нужно выбрать более 1 объекта DOM, как это

$(".mydivision");

Тем не менее, хорошей практикой является предоставление вашему запросу контекста для быстрого поиска, в противном случае jQuery выполнит поиск по всему документу, ищущему объекты нашего класса, вместо этого примените:

$(".mydivision","#mydivision-container");

Таким образом, jQuery будет фокусироваться только на данном контейнере, и запрос будет выполняться быстрее.

3) Цепи ваши функции jQuery максимально

Выполнение функций над селектором происходит быстро, если они выполняются с возвращенным объектом, вместо того, чтобы выполнить другой запрос

$("#button").css('color','white');
$("#button").addClass('greenButton');
$("#button").show('slow');

Как и в первом упомянутом пункте, запрос выполняется 3 раза, так что вместо него вы должны поставить эти функции в цепочку:

$("#button").css('color','white').addClass('greenButton').show('slow');

4) Сократите ваши файлы JavaScript и объедините их в 1 файл

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

5) Используйте нативный метод вместо $ .each

Выполните следующий пример в консоли вашего браузера.

var array = []; //Adding an array with 1000 items
for (var i=0; i<10000; i++) {
array[i] = 0;
}
console.time('nativeFor');
var l = array.length;
for (var i=0;i

Вы заметите, что нативный for примерно в 5 раз быстрее, чем jQuery для каждого метода. Наконец, мы рекомендуем вам всегда загружать последнюю версию jQuery, которую можно получить на официальном сайте jQuery.