More Efficient Click Handling
| Project: | Google Analytics |
| Version: | 6.x-2.x-dev |
| Component: | Code |
| Category: | task |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | duplicate |
I recently ran into a problem where jQuery would start timing out the page when a link was clicked on the page. After some poking around, I found that Google Analytics was the culprit in causing serious slow-downs between clicking a link and going to the next page.
This problem occurred mostly on pages that had a lot of links (4000+). This particular line doesn't agree with a quantity of links:
$('a', context).click( function() {Internally, jQuery is building up a list of all the handlers that have been attached on the page. When adding 4000 click handlers to the page, it makes it so that when a link is clicked, jQuery has to loop through all those handlers and check if it should fire. Given enough links, some browsers (like Firefox) will think the script is in an infinite loop and prompt the user to end the script.
The solution to this is to replace all these link handlers with a single handler on the body tag. Any click on the page will "bubble up" through the parent tags, and then when the click handler fires on the body, we just check that it was a link that was clicked. This replaces those 4000 click handlers with one click handler, and the site moves much quicker between pages.
$('body', context).click( function(e) {
if (e.target.tagName.toLowerCase() != 'a') {
return;
}
var link = e.target;Here's a link explaining a little further: http://www.artzstudio.com/2009/04/jquery-performance-rules/#leverage-eve...
Attached patch significantly speeds up the clicking of links on my site, it'd be great to include in the module.
| Attachment | Size |
|---|---|
| google_analytics_click_efficiency.patch | 2.7 KB |
#1
Duplicate of #336924: Massive page rendering slowdown with many links
#2
This patch have issues. For e.g. add an image to a page, surround it with an link. Now click the image... your function sees - image clicked and skip the link. This is only one of the major issues I also have had in the linked case and I was never sure if I have solved it 100%. Please read the other case and check out my time wasting patches.
#3
Ah thanks, a valid concern. We should check for $(e.target).parents('a') and set that as the clicked link instead.
#4
I'm marking this case as a duplicate now. Use the old case, please. But I have had so many issues and got no feedback at all after months.
#5
After reading through the last issue, it's unfortunate this same solution never made it through last time around. I can assure you it's a very real problem. Here's an example page in question that's suffering from the super-slowdown: http://www.tribalfootball.com/newswire (1700 links).
Though my original patch has been applied to the site as a stop-gap, you can still emulate the problem by attaching a simple click handler to all links through Firebug:
$('a').click(function() {console.log('click');
});
Here's a reroll that takes into account link parents, finds the first one, then executes the link handler on that value.
#6
Shoot, crosspost. I'll open that other one again.