Некоторые вопросы о 25 советах jquery

Question

Я просто читал это: http://www.tvidesign.co.uk/blog/improve-your-jquery-25-excellent-tips.aspx

И у меня были вопросы по поводу некоторых из выдвинутых трюков:

9 - Дайте вашим селекторам контекст:

В чем разница между контекстом и более конкретным селектором?

Вместо того, чтобы делать

var selectedItem = $('#listItem' + i, $('.myList'));   

Как насчет

var selectedItem = $('.myList>#listItem' + i); 

Какой из них быстрее / лучше, или нет разницы?

12 - Узнайте о делегировании события:

Я бы предположил, что при малом количестве обработчиков делегирование событий происходит медленнее, чем обычное связывание.

Сколько обработчиков - время, когда вы должны начать использовать делегирование событий?

Кроме того, в чем разница (с точки зрения того, насколько быстро или насколько «хорошо» это) между использованием делегирования и созданием цели клика в dom, когда пользователь нажимает на цель клика, а затем цель клика находит элементы для манипулирования. Этот метод быстрее или делегирование быстрее?

Редактировать: Кроме того, сколько уровней вы должны делегировать? Лучше делегировать что-нибудь на 10 уровнях или просто связать 2 обработчика.

13 - Использовать классы для хранения состояния

14 - Еще лучше - использовать внутренний метод data () jQuery для сохранения состояния:

Зачем использовать данные против классов? Данные быстрее? Я думаю, что в целом я считаю, что классы легче читать, что противоречит тому, что говорится в записи в блоге, потому что я вижу это в DOM.

Спасибо!

Answer 1

9 - Дайте вашим селекторам контекст:

var selectedItem = $('#listItem' + i, $('.myList'));

v / s

var selectedItem = $('#listItem' + i);

Согласно статье первый должен быть быстрее. Но я не понимаю, как это может быть ...

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

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

Что касается этого:

var selectedItem = $('.myList>#listItem' + i);

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

Но указанный контекст может быть полезен при работе с другими типами селекторов, особенно если вы используете его повторно, например:

var ctx = selectedItem = $('.myList')
for (var i=0; i<1000; i++) {
    var selectedItem = $('.listItem' + i, ctx);
}

В этом примере он значительно увеличивает скорость.

Как и во всем остальном, связанном с производительностью - вы должны измерить, прежде чем узнаете, применимо ли что-то в вашей конкретной ситуации.

Сколько обработчиков - время, когда вы должны начать использовать делегирование событий?

Когда я чувствую, что страница медленная. В 99% случаев обычные обработчики событий достаточно хороши.

Answer 2

Я не могу ответить на все ваши вопросы, но, вероятно, могу предоставить некоторую соответствующую информацию, которая может быть полезной.

9 - Дайте вашим селекторам контекст:

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

Из документации:

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

По умолчанию, если контекст не указан, $ () ищет элементы DOM в контексте текущего документа HTML. Если вы укажете контекст, такой как элемент DOM или объект jQuery, выражение будет сопоставлено с содержимым этого контекста.

14 - еще лучше, используйте метод внутренних данных j (jQuery) для хранения состояния:

Эта функция может быть полезна для присоединения данных к элементам без необходимости создания нового расширения. Это также не ограничивается строкой. Значение может быть любого формата. Класс является более общим, здесь вы можете связать свои данные с элементом или набором элементов. Он может быть использован в качестве метаданных в некоторой перспективе.

PS. Вы можете найти больше информации здесь

Answer 3

Относительно № 9:

Когда вы предоставляете контекст для запросов селектора, вы ограничиваете размер обходимого дерева, чтобы найти элементы, соответствующие вашему селектору, особенно если вы используете селекторы, которые используют имена тегов, такие как: $ ('div> span') .

Производительность зависит от типа селектора и количества элементов в контексте, который вы предоставляете.

Посмотрите на getElementsByTagName , чтобы лучше понять эти проблемы.

Что касается "какой из них лучше" - это сильно зависит от размера просматриваемого DOM и от ряда других элементов, но, как правило, первый селектор (тот, что имеет контекст) должен быть быстрее.

Относительно № 12:

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

Относительно № 13:

Я думаю, что пример, приведенный в документе, на который вы ссылаетесь, выполняет эту работу, но я постараюсь уточнить немного дальше. Классы - это обычный и стандартный способ прикрепления дополнительной информации к узлам HTML. Возьмем в качестве примера панель вкладок: если у вас есть стандартный класс «вкладка», который применяется к каждой вкладке на панели вкладок, вы можете добавить дополнительный класс к одной из вкладок, чтобы указать, что она выбрана в данный момент. Добавление дополнительного класса с именем «selected» позволит вам применить другой стиль к выбранной вкладке и запросить панель вкладок, используя jQuery, для некоторой дополнительной логики (например: проверить, какая вкладка в настоящее время выбрана для выполнения HTTP-запроса, и получить содержимое для этой вкладки).

Относительно № 14:

Классы ограничены по типу и количеству данных, которые вы можете (или должны) хранить в них. Данные - это более гибкий способ хранения больших объемов данных состояния для элементов HTML.

Answer 4

Для (9)

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

Если обратный случай (например, контекст очень специфичен, а выбранные элементы, которые вы хотите, являются достаточно общими), я могу видеть, как это поможет ...

//LI elems with CSS class "foo"
//but only inside the element with the ID "onlyInHere"
$('li.foo', '#onlyInHere')