Производительность JQuery / JavaScript с использованием $ (this)

Question

Я часто использую JQuery такого типа:

$('.filter-topic-id').each(function () {
    var me = $(this);
    if (me.text() == topics[k]) {
        me.parent().show();
    }
});

Я храню $(this) в переменной с именем me, потому что, боюсь, она пересмотрит $(this) без причины. Достаточно ли умны основные движки JavaScript, чтобы знать, что не нужно его переоценивать? Может быть, даже JQuery достаточно умен?

Answer 1

Они недостаточно умны, чтобы знать, чтобы не переоценивать $(this) снова, если это то, что говорит ваш код. Рекомендуется кэшировать объект jQuery в переменной.

Если ваш вопрос относится к вашему пути в вопросе по сравнению с этим способом

$('.filter-topic-id').each(function () {
    if ($(this).text() == topics[k]) { // jQuery object created passing in this
        $(this).parent().show(); // another jQuery object created passing in this
    }
});

твой путь - лучшая практика.

Answer 2

Достаточно ли умны основные движки JavaScript, чтобы знать, что не нужно его переоценивать?

Нет. Но если вы используете jQuery, вы, вероятно, нацелены на удобочитаемость, а не на максимальную производительность.

Напишите любую версию, которую вам легче всего читать и поддерживать, и не беспокойтесь о таких микрооптимизациях, пока ваша страница не станет слишком медленной и вы не исчерпали другие более существенные источники задержки. Не так много работы, связанной с вызовом $(node).

Answer 3

Нет хорошего способа, которым javascript мог бы определить, что верно следующее: -

fn(x) == fn(x);

Даже если бы это было возможно, вызов второго fn мог бы быть действительным только в том случае, если можно было гарантировать, что fn не имеет других побочных эффектов. Если между вызовами на fn есть другой код, это еще сложнее.

Следовательно, у движков Javascript нет другого выбора, кроме как на самом деле вызывать fn каждый раз, когда он вызывается.

Затраты на вызов $ () довольно малы, но не незначительны. Я бы, конечно, держал результат в локальной переменной, как вы делаете.

Answer 4

Вы можете попробовать профилировать свой код с помощью Firebug и посмотреть, много раз использование $ (this) замедляет ваше приложение или нет

Answer 5

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

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

$('div').click(function() {
    var $this = $(this);
    $this.find("p").each(function() {
        // here, there's no reference to the div other than by using $this
        alert(this.nodeName); // "p"
    });
});

Answer 6

this - это просто ссылка на текущий элемент DOM в итерации, поэтому при вызове $ (this) накладные расходы незначительны или вообще отсутствуют. Он просто создает оболочку jQuery вокруг элемента DOM.