jquery performance optimisations
| Project: | Dynamic display block |
| Version: | 6.x-1.x-dev |
| Component: | Code |
| Category: | task |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | active |
Jump to:
When you use a jquery selector more than once, you should cache the result, rather than doing the lookup twice.
eg - ddblock.js line 108
$("#ddblock-"+ opts.ddblocknr + ' ' + '#count2').html((opts.currSlide + 1) + " of " + opts.slideCount);
// Only show prev if previous slide exist - Only show next if next slide exist
var index = $(this).parent().children().index(this);
$("#ddblock-"+ opts.ddblocknr + ' ' + '#prev2')[index == 0 ? 'hide' : 'show']();
$("#ddblock-"+ opts.ddblocknr + ' ' + '#next2')[index == opts.slideCount - 1 ? 'hide' : 'show']();would be faster if you cached the result of $("#ddblock-"+ opts.ddblocknr) and used it as a context for further operations - a bit like this:
var $block = $("#ddblock-"+ opts.ddblocknr);
$("#count2", $block).html((opts.currSlide + 1) + " of " + opts.slideCount);
// Only show prev if previous slide exist - Only show next if next slide exist
var index = $(this).parent().children().index(this);
$("#prev2", $block)[index == 0 ? 'hide' : 'show']();
$("#next2", $block)[index == opts.slideCount - 1 ? 'hide' : 'show']();At least, that's my understanding anyway... That's one of the things I did to the Rotor module to help with #408028: RotorBanner is a CPU hog on both Firefox and Safari..
However, looking at that example above again. I don't really see why you would be looking for an element with id #count2 inside an element with id #ddblock-"+ opts.ddblocknr. I mean, IDs are supposed to be unique to the document, so shouldn't #count2 be enough? (I really haven't looked at your code much at all so I may be wrong - just wanted to share my findings from trying to improve the Rotor module)
#1
Thanks for reporting.
I didn't have much time to look at the efficiency of the jQuery code.
Javascript slideshows are by definition cpu intensive so improvement is speed are very welcome.
See e.g. this link or this link where the author of the jQuery cycle plugin talks about performance.
Like you say #count should really be a class (you can have more sideshow with a prev/next pager on one page so #count should be .count)
Same for #next2 and #prev2
Will try your solution of getting the ID only ones and then using it further in the script.
I don't have much knowledge about efficiency how JQuery gets the classes and ID's for the DOM.
Will try to read some more about this in the jQuery documentation.
Will let you know about any improvements.
#2
subscribing.
#3
subcribing
#4
Found jquery performance optimization rules at: http://www.artzstudio.com/2009/04/jquery-performance-rules/
Will try to follow them in the next release of the module.