Что является наиболее эффективным способом регистрации прослушивателей событий в javascript

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

$('#myElement').find('select.foo').on('click', 'option', handler1); 
$('#myElement').find('select.bar').on('click', 'option', handler2);

или

$('#myElement').on('click', 'select.foo option', handler1); 
$('#myElement').on('click', '.select.bar option', handler2);

источник

2014-12-08 Aidan Ewen

Наиболее эффективным способом является использование [ваниль-УД] (http://vanilla-js.com/). – Oriol

Запустите некоторые тесты jsPerf. – j08691

Вы считали, что слушаете событие изменения в элементе select? – Undefined

Я согласен с комментатором, который сказал «несколько тестов JSPerf». Первое правило оптимизации - «преждевременно оптимизировать». Почему вы оптимизируете? У вас проблемы с производительностью? Если да, то уверены, что вы выделили его для этого кода? Вот что вам скажет профилирование. Если это этот код, то вы можете выяснить, какой метод обеспечивает большую производительность.

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

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

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

источник

2014-12-08 18:18:02

Спасибо, Этан - это полезно. Мы оптимизируем, потому что у нас есть проблемы с производительностью, и скорость будет напрямую влиять на прибыльность нашего приложения. у нас зарегистрировано ~ 1000 событий. Однако профилирование не позволило мне определить регистрацию событий как проблему. –

Я вижу. Ну, достаточно легко профилировать фактическую регистрацию; просто установите метку времени, сделайте регистрацию, а затем сравните временную метку, которая сообщит вам, сколько миллисекунд требуется для прохождения DOM, идентификации элементов и добавления обработчиков. За исключением AJAX, код jQuery является синхронным. –

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

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

Благодаря этому вопросу для ответа - Should all jquery events be bound to $(document)?

источник

2014-12-08 18:40:58

Что является наиболее эффективным способом регистрации прослушивателей событий в javascript

ответ

Смежные вопросы