Возникает ли производительность, если я прикрепляю .on('click' события к $( "body" )?
В настоящее время у меня есть следующий код:
$('#loginLink, #registerLink').click(function () {
dialog(this);
return false;
});
$('#detailData')
.on('click', '.modalDeleteLink, .modalEditLink', function () {
dialog(this);
return false;
})
Есть только один из #loginLink и #registerLink, но может быть до ста элементов с классами .modalDeleteLink и .modalEditLink.
Я думал изменить все эти элементы, чтобы они имели класс .dialogLink, а затем просто использовали следующий код:
$("body").on("click", ".dialogLink", function(){
dialog(this);
return false;
});
Этот код намного проще поддерживать. Однако может ли быть какой-либо недостаток в производительности, связанный с этим телом?
Ответы
Ответ 1
Вам не нужно беспокоиться о производительности, если у вас нет сотен обработчиков или чрезвычайно большого документа.
Извлечь из документация:
В большинстве случаев событие , такое как клик, происходит редко, а производительность не представляет существенной проблемы.. Однако высокочастотные события, такие как mousemove или scroll, могут срабатывать десятки раз в секунду, и в этих случаях становится более разумным использовать события разумно. Производительность может быть увеличена за счет сокращения объема работы, выполняемой самим обработчиком, кэширования информации, необходимой обработчику, а не пересчета ее или путем ограничения количества фактических обновлений страниц с помощью setTimeout.
Прикрепление многих делегированных обработчиков событий в верхней части дерева документов может ухудшить производительность. Каждый раз, когда происходит событие, jQuery должен сравнивать все селекторы всех присоединенных событий этого типа с каждым элементом пути от целевой цели до вершины документа. Для обеспечения максимальной производительности присоединяйте делегированные события в местоположении документа как можно ближе к целевым элементам. Избегайте чрезмерного использования документа или документа .body для делегированных событий на больших документах.
Ответ 2
В jQuery, чем выше вы помещаете .on() в DOM, тем медленнее будет. Это связано с тем, что jQuery должен сравнивать все селекторы всех вложенных событий выбранного типа с целевым уровнем документа.
Смотрите страницу документации jQuery для .on():
Прикрепление многих делегированных обработчиков событий в верхней части дерева документов может ухудшить представление. Каждый раз, когда происходит событие, jQuery должен сравнивать все селекторы всех прикрепленные события этого типа к каждому элементу пути от целевой цели до вверху документа. Для обеспечения максимальной производительности присоедините делегированные события в месте расположения документа как можно ближе к целевым элементам. Избегайте чрезмерного использования документа или document.body для делегированных событий в крупных документах.
С учетом сказанного разница в производительности может быть незначительной для событий щелчка, поскольку, в отличие от прокрутки или событий перемещения мыши, они запускаются нечасто (только при нажатии пользователем).
