Минимизация экземпляра jQuery против создания большего количества экземпляров - PullRequest
Новая
       25

Минимизация экземпляра jQuery против создания большего количества экземпляров

9 голосов
/ 13 июля 2011

Я начал серию постов по оптимизации javascript / jQuery и наткнулся на этот интересный результат.

Почему минимизация объектов jQuery (путем поиска в кэшированной коллекции jQuery) может быть медленнее, чем создание большего количества экземпляров объектов jQuery?

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

Это то, что я привык писать, когда я кеширую родителя (я называю это "appRoot"). 

var appRoot = $("#appRoot");
    appRoot.find(".element1").css("color","red");
    appRoot.find(".element2").css("color","blue");

против

    $(".element1").css("color","red");
    $(".element2").css("color","blue");

См. Результаты теста (немного другой сценарий). jsperf minimal-jquery-object-creation оказывается, что кэшированный фрагмент медленнее, чем некэшированный.

Я пытаюсь понять, почему?

Ответы [ 3 ]

3 голосов
/ 13 июля 2011

Я думаю, что вызов find () замедляет процесс.

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

2 голосов
/ 13 июля 2011

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

Люди часто ошибаются, не вспоминая, что более сложный и большой DOM изменит узкие места кода. Я думаю, что jsperf должен иметь какое-то предупреждение об этом.

2 голосов
/ 13 июля 2011

Я думаю, это потому, что в «больше объектов jquery» jQuery может напрямую использовать недавний API 

document.getElementsByClassName("classvalue")

в другом случае с "less jquery" вы должны всегда проверять, что найденный элемент находится под #appRoot, что занимает больше времени.

Вот еще один тест, использующий document в качестве appRoot, который, похоже, немного закрывает пробел при втором запуске: http://jsperf.com/minimize-jquery-object-creation/6

...