Рекомендации по производительности делегирования Javascript

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

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

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

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

У каждого элемента наверняка будет больше прослушивателей событий, например, один для развертывания/свертывания, один для перехвата щелчка правой кнопкой мыши для отображения контекстного меню, один для щелчка левой кнопкой мыши для включения перетаскивания, один для двойного щелчка для выполнения какого-либо действия. и так далее...
С 5 обработчиками событий на элемент, в простом файловом дереве из 100 файлов вы потратите 500 обработчиков событий, которыми будет управлять браузер, вот где происходит огромное использование памяти.

Итак, в чем выигрыш в производительности при использовании делегирования, помимо того, что программирование становится более легким, простым и понятным?

В приведенном выше примере, когда вы регистрируете 5 событий в родительском элементе (например, в контейнере дерева) вместо 500, вы запрашиваете на 99 % меньше действий, поэтому в браузере выделяется меньше памяти.
Затем каждый раз, когда одно из отслеживаемое событие запускается, выборочная активация надлежащего действия, связанного с правильной целью, означает просто запуск функции для поиска и применения правильного обработчика.

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