Этот блог не слишком устарел, но он дает некоторые ответы на ваши вопросы, а также дает дополнительную информацию об ускорении вашего сайта при использовании jquery: http: // www .artzstudio.com / 2009/04 / jquery-performance-rules /

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

До ваших вопросов:

1. Кэширование объекта jQuery должно обеспечить наилучшую производительность. Это позволит избежать поиска в DOM, который может замедлиться при многократном выполнении. Вы можете извлечь выгоду из цепочки jQuery - иногда нет необходимости в локальной переменной.
2. То же самое происходит с $ (this), когда this является элементом DOM. Несмотря на то, что это самый быстрый способ получить объект jQuery, он все же медленнее, чем кеширование. Если достаточно ванильного DOM-элемента - тогда вообще не вызывайте jQuery. Пример с атрибутом id превосходен - предпочтительнее this.id, чем $ (this) .attr ('id), если вам не понадобится $ (this)
3. Более конкретные селекторы действительно уменьшат время поиска DOM. Тем не менее, действительно есть черта, которую нужно провести - делайте селекторы более конкретными, только если вы на 100% уверены, что это заметно улучшит производительность.

1) Назначение и вызовы jQuery

Применяется ли это же правило при обращении к $ (this) jQuery?

Да, безусловно. Вызов функции $ создает новый объект jQuery и с ним связаны накладные расходы. Множественные вызовы $ с одним и тем же селектором каждый раз создают новый объект.

2) this vs $ (this)

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

, который содержит миллион
• элементов:

  $("#someList  li").each(function() {
      var id = $(this).attr('id');
  });
  

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

  3) Всегда ли больше конкретности лучше?

  Не всегда. Это в основном зависит от браузеров, и, опять же, не стоит углубляться в микрооптимизации, если вы не знаете наверняка, что в вашем приложении что-то работает довольно медленно. Например:

  $("#someElement") vs $("#someElement", "#elementsContainer")
  

  Может показаться, что, поскольку мы также предоставляем контекст при поиске элемента по идентификатору, второй запрос будет быстрее, но все наоборот. Первый запрос преобразуется в прямой вызов встроенного getElementById (..) , а второй - нет из-за селектора контекста.

  Кроме того, некоторые браузеры могут предоставлять интерфейс для доступа к элементам по имени класса, используя getElementsByClassName , и jQuery может использовать его для этих браузеров для более быстрых результатов, и в этом случае предоставляет более конкретный селектор, например:

  $("#someElement.theClass")
  

  может на самом деле быть помехой, чем просто написание:

  $(".theClass")
  

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

1. Назначение и вызовы jQuery

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

2. this vs $ (this)

   Опять же, в критических для производительности ситуациях raw dom лучше. Другой , кроме этого, вы должны выбрать, который короче или более читаемый . Сюрприз, сюрприз, это не всегда jQuery.

3. Всегда ли больше специфичности лучше?

   Есть больше типов специфичности, которые люди обычно путают. Один из них бесполезен , например: имя тега для селектора идентификатора тег # id , он будет медленнее, чем простой идентификатор. Но есть другой тип , когда он будет огромным преимуществом , если быть точным. Теперь этот тип зависит от браузера, потому что современные будут жертвовать старыми, но он того стоит. Это происходит, когда вы указываете тег для тега class . класс . В IE 6-7 он будет значительно быстрее, чем простой .class , потому что sizzle может использовать быструю функцию document.getElementsByTagName .Теперь другой тип - это когда вы указываете слишком много предков . Это замедлит работу в каждом браузере. Это потому, что селектор выполняется справа налево. Следует помнить о правиле: всегда выбирайте крайний правый селектор как можно точнее .