jQuery Кэширование и перемещение объектов

Question

Я пытаюсь настроить кеширование jQuery и как он улучшает производительность и как ее следует использовать?

Как я понимаю, при использовании селектора jQuery вы выполняете поиск DOM и создаете объект jQuery, который вы можете перемещать. Означает ли это, что если вы создаете объект jQuery тега body html, вы можете избежать необходимости пересекать DOM при создании новых объектов jQuery? Будет ли какой-нибудь момент для этого?

Учитывая ...

var htmlBody = $('body'); 
$('header',htmlBody).css('background','green'); 
$('footer',htmlBody).css('background','yellow'); 

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

$('header').css('background','green'); 
$('footer').css('background','yellow'); 

Answer 1

Первое, что вам нужно понять, это то, что доступ DOM дорог. Это считается одной из наиболее распространенных причин низкой производительности.

Рассмотрим следующий код:

var elem = document.getElementByTagName('p'), 
    i; 

for (i = 0; i < document.getElementByTagName('p').lenght; i++) { 
    elem[i].innerHtml = 'foo'; 
} 

И альтернатива использования закешированного Длинна

var elem = document.getElementByTagName('p'), 
    i; 

for (i = 0; i < elem.lenght; i++) { 
    elem[i].innerHtml = 'foo'; 
} 

Второй случай будет работать быстрее во всех браузерах (в два раза быстрее в Safari 3 и 190 раз IE7, и только с использованием кешированного значения длины в цикле.

JQuery предоставляет лучший API для доступа и управления DOM, но под капотом st плохо полагается на собственный API для выполнения этой работы. Ваши соображения по производительности должны основываться не на том, сколько переменных у вас есть, а на том, как быстро ваш код будет работать. Некоторые из этих точек помогут вам

• избежать доступ DOM в циклах
• Назначения ссылки DOM на локальные переменные и работе с местными жителями
• Кэширования длиной при переборе над HTML коллекцией

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

Answer 2

В вашем случае, я бы сказал, нет разница в сохранении body в качестве контекста. Синтаксис:

jQuery(selector [, context ])

Где context является DOM-элемент или селектор, чтобы использовать в качестве контекста для поиска (например, только дочерние узлы контекста будет произведен поиск). По существу, jQuery('footer') использует body как контекст.

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

Answer 3

Будет некоторое улучшение производительности, если пересечение DOM будет выполнено в указанном контексте.Но в примере контекст дается как «тело». Это будет полезно, когда DOM-перемещение будет выполнено для статического кэшированного DOM в большем масштабе.

$("div.container").click(function() { 
    $("span", this).addClass("test"); 
}); 

В этом пролет будет просматриваться с в $("div.container").

Если такие же манипуляции с DOM выполняются несколько раз в рамках одной и той же функции или объекта замыкания, было бы лучше сохранить элемент DOM в объекте javascript и использовать его, чтобы избежать повторного прохождения DOM.