jQuery — повторное использование селекторов (предложение обсудить)

    При множетсвенном использовании одного и того же селектора каждый раз происходит поиск по дереву DOM или же есть какой-то внутренний механизм «кэширования»?

    Что эффективнее (и на сколько)?

    jQuery('#mySelector').attr('border', '1px');
    jQuery('#mySelector').attr('color', 'red');
    jQuery('#mySelector').show();

    или

    mySelector = jQuery('#mySelector');
    mySelector.attr('border', '1px');
    mySelector.attr('color', 'red');
    mySelector.show();

    Т.е. нужно ли об этом задумываться? Если в jQuery нет такого «кэширования» (не знаю, насколько здесь уместно это определение), то возможно ли его реализовать и как?

    Предлагаю обсудить, выводы разместим в статье.
    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 9

      +4
      Логичнее что второй пример будет быстрее и эффективнее. Всегда из этого исходил, и использовал второй пример.
        0
        Недавно начал работать с jQuery. Вроде бы там есть встроенные методы для работы с кэшем data() и ещё какой-то. Разве нет?
          +4
          а почему вы не используете такой синтаксис
          jQuery('#mySelector').attr('border', '1px').attr('color', 'red').show();
          имхо гораздо короче…
            0
            Это они в примере рядом стоят, а в жизни могут быть, например, в различных циклах.
              0
              Так вы конкретизируйте тогда проблему. Если в различных местах, то тогда и алгоритм, соответственно, может быть совсем иным.
              jQ возвращает в качестве результата ссылку на объект, что позволяет писать цепочки операй — это одна из основных концепций подобных библиотек, и, понятно, что при таком подходе работает быстрее, нежели повторная выборка через аналогичный селектор.
              0
              Даешь еще короче :)
              jQuery('#mySelector').attr({border: '1px', color: 'red'}).show();
              +1
              Если объект мне нужен не однократно, тем более если в цикле, то я стараюсь его запомнить. Даже если там и был хеш то выборка из него тоже занимает время. А хеш врятли там есть т. к. надо будет как то следить за изменением dom чтобы не выдать не существующего элемента.
                0
                Не знаю как jQuery, но новый селектор движок от John Resig — Sizzle использует механизмы кэширования, правда опять же есть проблемы с IE, так в нём нет события на изменение DOM'а.
                  +1
                  С текущей версией jQuery:
                  * при _большОм_ количестве обращений к одному объекту в разных местах;
                  * при сложном селекторе;
                  * при большом количестве узлов в DOM;
                  * при медленном браузере;
                  эффективнее второй вариант. Иначе будет очень не значительный выигрыш, экономия на спичках.
                  «Надо ли об этом задумываться?» — каждый решает сам для себя.

                  Предварительно советую вдоль и поперёк изучить скорость работы _вашего_ кода с помощью firebug profiler'а и _обязательно_ познакомиться с внутренним устройством jQuery (init: function( selector, context ) {} — там не так уж и много всего, всё ясно и понятно). А если вы не только любознательны, но и трудолюбивы, вы может легко и быстро собрать тесты, проверить скорость работы разных вариантов, и поделиться резульатом с общественностью (написав замечательную статью) ^____^

                  Only users with full accounts can post comments. Log in, please.