Performance of $.on() in SPA

Question

I am trying to apply Telemetry on my SPA (written in AngularJS). When my SPA is loaded, it initially has a DOM structure similar to:

<html>
    <head> ... </head>
    <body>
        <div id="nav"></div>
        <div id="content"></div>
        <div id="footer"></div>
    </body>
</html>

I am injecting my Telemetry code via Tealium (a 3rd party Tag management software) which is injecting the Telemetry code asynchronously from the Head. The only DOM selectors my Telemetry code will have access to are: #nav, #content, #footer. If I want to track when a user clicks on a CTA, I would have to write something like:

$('#content').on('click', '.module .carousel .cta', function() { ... });

My SPA is fairly large, and I anticipate I will have a few hundred unique items to track. As a result, there will have a few hundred unique $.on() calls made.

My question is if performance will become an issue as each click will have to 'bubble' up to an element right next to <body>? Is there a better solution for me instead of using only $.on()? Note that I do not have access to the SPA codebase. The only codebase I have access to is in Tealium (which will inject JavaScript onto the SPA).

If it is an angular app, why dont you use relevant ng-click directive? And to answer your question, there is no performance you could notice regarding click event bubbling but you should avoid binding hundred events by refactoring your code and using common selector to bind the less events you can — A. Wolff, Apr 14 '16 at 17:06
@A.Wolff Sorry, I'm not very familiar with Angular so I quickly read up on ng-click. From my understanding. ng-click fires an event that can be listened to within Angular. Would injected JavaScript still have access to this event? — Jon, Apr 14 '16 at 17:07
Ha so you inject your own script outside angular app? I quite misunderstood it, my bad — A. Wolff, Apr 14 '16 at 17:10
@A.Wolff No problem. So I am injecting the Telemetry code outside the Angular app. The code is being injected via Tealium (tag management software). — Jon, Apr 14 '16 at 17:12
May be you can customize and optimize your code to listen for the URL's hash change, which would identify a specific page. http://stackoverflow.com/questions/680785/on-window-location-hash-change — Hoyen, Apr 14 '16 at 18:26
@Hoyen Unfortunately the URL's can be updated at any time so they are unreliable in determining which page/template/view the user is on :( — Jon, Apr 14 '16 at 18:32
@Jon Updating the template's HTML and/or CSS classes can also break your code. But you need to determine how often will it happen. Is the performance improvements worth it? Your question was to ask how you can improve code performance for a SPA. Listening for the hash change is equivalent to non SPA a user going to a new page — Hoyen, Apr 14 '16 at 18:38
@Jon Overall I doubt even if you do create a few hundred listeners on '#content' that it will cause much performance issues, since it will only trigger the matching element's function. But when initializing the events I would do something like this: var $content = $('#content'); $content.on('click',....). That way jQuery won't keep searching and using the same element. — Hoyen, Apr 14 '16 at 18:50
If you're able to modify the Angular application, my recommendation would be to write and register a service singleton with Angular that listens to a global variable and registers the appropriate events within Angular for the necessary resources based on the page value reflected by your router. — Whit Waldo, Apr 05 '22 at 20:30

Performance of $.on() in SPA

0 Answers0