Performance suggestion on sticky headers

Discussion in 'Closed Reports' started by AlexT, Nov 14, 2014.

  1. AlexT

    AlexT Customer

    The jQuery scroll() event handler is used whenever the window scroll position is changed. As such, it is fired quite frequently, which can add noticable CPU processing to low-CPU devices. While I don't know if there is a better way to handle sticky headers (for example by only firing an event when the aboveHeight variable is exceeded, or by setting a timer as suggested in the link), at least, you could considerably improve performance by optimizing some code in the the xb_js_head template. Try to minimize the number of scroll() event handlers to one. For example,

    Code:
    Copy Source
    $(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('.navFloatwrapper').addClass('fixed');
        <xen:if is="!@xb_logoinnav">
        $('#logoBlock').css('margin-top', navwrapper);
        </xen:if>
        } else {
        $('.navFloatwrapper').removeClass('fixed');
        <xen:if is="!@xb_logoinnav">
        $('#logoBlock').css('margin-top','0px');
        </xen:if>
        }
    });
    
    <xen:if is="!@xb_floatsubnav">
    $(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('.tabLinks').addClass('displaynone');
        } else {
    
        $('.tabLinks').removeClass('displaynone');
        }
    });
    </xen:if>
    Could be combined into something similar to this:
    Code:
    Copy Source
    $(window).scroll(function(){
        if ($(window).scrollTop() > aboveHeight){
        $('.navFloatwrapper').addClass('fixed');
        <xen:if is="!@xb_logoinnav">
        $('#logoBlock').css('margin-top', navwrapper);
        </xen:if>
        <xen:if is="!@xb_floatsubnav">
        $('.tabLinks').addClass('displaynone');
        </xen:if>
        } else {
        $('.navFloatwrapper').removeClass('fixed');
        <xen:if is="!@xb_logoinnav">
        $('#logoBlock').css('margin-top','0px');
        </xen:if>
        <xen:if is="!@xb_floatsubnav">
        $('.tabLinks').removeClass('displaynone');
        </xen:if>
        }
    });
     
    Last edited: Nov 14, 2014
    Dylan likes this.
  2. AlexT

    AlexT Customer

    Btw, in addition to reducing the number of scroll() event handlers and using a timer, another recommendation (and trivial to implement) is to cache jQuery selector queries so that they don't need to be run every time (scrolling doesn't change the DOM). Here is a good write up: https://dannyvankooten.com/delay-scroll-handlers-javascript/
     
  3. Russ

    Russ Designer

    Thanks Alex, we'll combine them for the next release and we'll test out the delay scroll as well, seems simple enough.

    That floating navigation gave me a headache with all the options we had to put in because of the various setups xenbase can give you hah. :D
     
    Dylan and AlexT like this.
  4. Russ

    Russ Designer

    The initial suggestion is implemented, we're still looking into the event handlers however at a later release. Thanks for the suggestion @AlexT
     

Let's work together on your next project

Contact us today to talk about how we can help you