Являются длинными цепочками jQuery?

Я использую jQuery долгое время, и я написал плагин для слайд-шоу для своей работы, и я (а не 100% сознательно) написал, вероятно, 75% в одной цепочке. Он полностью комментирует и я указываю каждый end() и то, что он его перезагружает, и т.д., Но это замедляет работу jQuery или DOM, или это действительно ускоряет его?

Ответы

Ответ 1

Это зависит от вашего конкретного кода, как всегда. Что касается хранения ссылки vs .end(), ну... с действительно длинной цепочкой, быстрее не связывать vs .end(), просто потому, что вам нужно обрабатывать дополнительный багаж (хранение/восстановление), например ссылку .prevObject, .selector, .context и т.д., что вам, вероятно, не важно во многих случаях.... и только более переплетенные ссылки на предыдущие объекты.

Там, где это сложнее измерить... это не исполнение (хотя это медленнее, даже если бесконечно)... это более сложная сборка мусора для очистки всех этих объектов позже, так как граф зависимостей теперь намного больше.

Теперь... это может измерить разницу? если только ваша цепочка действительно длинная, и в этом случае, вероятно, это микро-оптимизация, о которой вам не нужно беспокоиться в большинстве случаев.

В 99% случаев, если вы не совершаете какую-либо вопиющую работу, требующую наказания, не беспокойтесь об этом, как в большинстве микро-оптимизаций. Если у вас возникла проблема с производительностью, зайдите в нее.

Ответ 2

Одной из самых дорогих вещей, которые вы можете сделать в современном браузере, является доступ к DOM и управление ими. Цепочка позволяет минимизировать фактические запросы, которые вы должны выполнить, что может означать значительно более быстрый код. Другой вариант - выполнить начальный поиск, сохранить это в переменной и сделать все, что от этой переменной. Говоря это, jquery был специально разработан с этой цепочкой api в виду, поэтому более идиоматично цепочки.

Ответ 3

Я думаю, что цепочки jQuery - отличная возможность... нужно действительно использовать ее чаще. например:

$(this)
  .find('.funky')
  .css('width', 30)
  .attr('title', 'Funky Title')
.end()
.fadeIn();

намного лучше (и элегантно) - не нужно создавать 2 объекта jQuery $(this), чем:

$(this).find('.funky').css('width', 30).attr('title', 'Funky Title');
$(this).fadeIn();

Ответ 4

Моя догадка не будет никакой разницей или быстрее из-за отсутствия посредников.

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