Is There Any Possible Danger Of Using "jquery.on()" Profusely

I'm writing Javascript controller for a large project, I found my self using 'JQuery .on()' function a lot to handle all click events, that because most of the content is being dow

Solution 1:

In my exerience it really depends on the application. I've found that using jQuery extensively has lead to a high memory overhead for the browser. From using the heap trace to debug (in google chrome), I've found that this is because jQuery keeps a LOT of objects in memory. The main issue I've found with this is when you use jQuery to create DOM nodes or apply non-standard javascript traversal or functions, jQuery has to keep track of these specific nodes.

When it comes to handlers specifically, there shouldn't be too much memory overhead in addition to normal javascript. I've found that when it comes to optimizing, each instance has been specific to the code and the envrionments that it has to operate on. If you need your code to operate on mobile devices, then you need to keep your heap as low as possible because of the memory limitations for these envrionments.

I've found that if you're experiencing performance issues that you suspect are related to javascript, inspecting the heap snapshots is the only effective way to debug. I typically reduce memory footprint using these steps:

1. Create any objects using native javascript in place of $('<div>')
2. Try and remove any each loops
3. Change any DOM queries to native javascript using IDs
4. Move any event handlers (onclick etc.) to native javascript or place them in the relevant attrbutes for the relevant DOM nodes

From the example provided I'd be a little concerned with the data handlers, because in my experience this would require jQuery to keep track of a lot of objects in memory. If I was to optimize this code, I would be moving as many of these to native JS as possible.