Search code examples
javascriptjqueryfilterqueuechaining

Does chaining with queue() and filter() in Jquery increase performance?

I'm cleaning up some Jquery code. I always read, chaining is good for performance.

Question:
Does this also include chains with a lots of queue() and filter()?

For example, I have unchained:

var self = this,
    co = el.jqmData("panel"),
    pop = $('div:jqmData(id="'+co+'")'),
    wrap = pop.closest('div:jqmData(wrapper="true")');

if ( pop.is(":visible") ) {
    if ( pop.hasClass('switchable') && wrap.jqmData('switchable') ) {
        pop.css('display','none').addClass("switched-hide");
            self.panelWidth( true );                    
        } else {
            self.hideAllPanels("8");
            }
    } else {
        if ( pop.hasClass('switchable') && wrap.jqmData('switchable') ) {
            pop.css('display','block').removeClass("switched-hide");
            self.panelWidth( true );
        } else {
            self.hideAllPanels("8");

            if ( pop.hasClass('ui-popover-center') ){
                pop.css("left", (($(window).width() - pop.outerWidth()) / 2) + $(window).scrollLeft() + "px");
                }       

            pop.jqmData("fixed") == "top" ? 
                pop.css( "top", $( window ).scrollTop() + "px" ) :
                    pop.css( "bottom", wrap.outerHeight() - $( window ).scrollTop() - $.mobile.getScreenHeight() + "px" );

        ...there's more
        }

Which I didn't like for the duplicate code in the first place. I'm now playing around with a chained version like so and am afraid I'm overdoing it:

 wrap.filter(':jqmData(switchable="true")')
      .find( pop )
           .filter('.switchable:visible')
                .css('display','none')
                .addClass("switched-hide")
                .end()
           .filter('.switchable:hidden')
                .css('display','block')
                .removeClass("switched-hide")
                .end()
           .queue(function(next){
                self.panelWidth( true )
                next();
                })
           .end()
      .end() // back to wrap
      .filter(':not(:jqmData(switchable="true")')
           .find( pop )
                .queue(function(next){
                     self.hideAllPanels("8")
                     next();
                     })
                .filter('.ui-popover-center')
                     .css("left", (($(window).width() - pop.outerWidth()) / 2) + $(window).scrollLeft() + "px")
                     .end()
                .filter(':jqmData(fixed="top")')
                     .css( "top", $( window ).scrollTop() + "px" )
                     .end()
                .filter(':jqmData(fixed="bottom")')
                     .css( "bottom", wrap.outerHeight() - $( window ).scrollTop() - $.mobile.getScreenHeight() + "px" )
                     .end()
                 ...

Question:
Is there a point where chaining Jquery is turning negative for performance, especially if using queue() and filter() or should I just keep on going?

Thanks for input!

PS: Haven't tested the above. There are probably a few mistakes. I'm looking more for conceptual info.

Solution

  • Unless your DOM and/or your js script is massive (or loopy), then you are unlikely to notice any performance difference between chained and unchained versions of the same code.

    Personally, I would make my decision based on which is easier to develop and maintain. Readability of the code is probably the most important factor.