imported>Vix: Новая страница: «оригинал:http://comp-sandbox.ru/javascript-jquery/jquery-uvelichenie-proizvoditelnosti ----- В этой статье я расскажу нескольк…»

2013-08-31T20:17:43Z

Новая страница: «оригинал:http://comp-sandbox.ru/javascript-jquery/jquery-uvelichenie-proizvoditelnosti ----- В этой статье я расскажу нескольк…»

Новая страница

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

JQuery. Увеличение производительности - История изменений

imported>Vix: Новая страница: «оригинал:http://comp-sandbox.ru/javascript-jquery/jquery-uvelichenie-proizvoditelnosti ----- В этой статье я расскажу нескольк…»