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