javascript/jquery performance

Question

Что происходит в jQuery с событием .on(), если его элемент не существует в DOM?

Например, если я использую это:

$(document).on('click', "#registerFormSubmit", function(){ 
    // do something here 
}); 

И у меня нет #registerFormSubmit подарка на всех страницах, является браузер замедлился кодом, или нет?

So Почему я это делаю?

Я не хочу разделить свой javascript-код на 10 .js-файлов и включать каждый в зависимости от того, какой из них требуется на какой странице, так как я полагаю, что сервер/браузер будет передавать данные намного быстрее, если он находится в 1 файл (особенно если файл запутан и проинструктирован).

Если код замедляет работу даже с страницами, не содержащими этот элемент, может ли быть хорошим решением сохранить весь код в одном файле?

var page = window.location.pathname.split('/'); 
if (page[1] == 'contact'){ 
    $(document).on('click', "#registerFormSubmit", function(){ 
     // do something here 
    }); 
} 

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

Однако предлагаемое решение if (page) не должно присоединяться к событию, если страница не сопоставлена, imo.

Может ли кто-нибудь пролить свет на это, пожалуйста?

Answer 1

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

jQuery может обрабатывать простые селекторы формы tag#id.class очень быстро, когда они используются для фильтрации делегированных событий. Итак, "#myForm", "a.external" и "button" - все быстрые селекторы. Делегированные события, которые используют более сложные селектора, особенно иерархические, могут быть в несколько раз медленнее - хотя они все еще достаточно быстры для большинства приложений. Иерархических селекторов часто можно избежать, просто привязывая обработчик к более подходящей точке документа. Например, вместо $("body").on("click", "#commentForm .addNew", addComment) используйте $("#commentForm").on("click", ".addNew", addComment).

источник: http://api.jquery.com/on/

Я предлагаю вам использовать упомянутый выше формат вместо $(document).on('click', "#registerFormSubmit"), и если вы не собираетесь использовать событие щелчка на всех страницах, то простой ответ не ставят его во всех .js файлы. Загрузите только необходимые файлы .js и обработайте registerFormSubmit событие click в отдельном файле .js.