3
\$\begingroup\$

I am attempting to build my own website, based off Google's Material Design principles, to better my design/UX skills.

I am currently working on effects for my navigation, I wondered what would be best to lower browser resource usage when viewing my web page.

Quick Example:
When scrolling, without wrapping certain property changes within an if, does the browser (jQuery) attempt to make the property changes although they have already been made?

var scrollPos = $(window).scrollTop();
$(window).scroll(function() {
    scrollPos = $(window).scrollTop();
    if(scrollPos >= 200) {
        if(!$('div.header').is('[style]')) { $('div.header').css('position','fixed'); };
    };
};

compared to...

var scrollPos = $(window).scrollTop();
$(window).scroll(function() {
    scrollPos = $(window).scrollTop();
    if(scrollPos >= 200) {
        $('div.header').is('[style]')) { $('div.header').css('position','fixed');
    };
};

Full Code Example:

//scroll listener
$(window).scroll(function() {
    scrollPos = $(window).scrollTop();
    if(scrollPos >= 200) {
        if(!$('div.header').is('[style]')) { $('div.header').css('position','fixed'); };
        if(!$('div.nav').is('[style]')) { $('div.nav').css('padding','0'); };
        $('div.nav > ul > li, div.nav > ul > ul > li')
            .not('.faded')
            .css('display','none')
            .fadeIn(250)
            .addClass('faded')
            .css('display','inline-block');
        if(!$('div.header div.title').is('[style]')) {
            $('div.header div.title')
                .css('display','none')
                .children('h1')
                .css('display','none');
        }
    } else {
        if($('div.header').is('[style]')) { $('div.header').removeAttr('style'); };
        if($('div.header div.title').is('[style]')) { $('div.header div.title').removeAttr('style'); };
        if($('div.nav').is('[style]')) { $('div.nav').removeAttr('style'); };
        if($('div.nav li').hasCLass('faded')) { $('div.nav li').removeClass('faded'); };
        if($('div.nav li.nav-title').is('[style]')) {
            $('div.nav li.nav-title').fadeOut(250, function() {
                $('div.header div.title h1').fadeIn(250);
            });
        };
    };
});

compared to...

//scroll listener
$(window).scroll(function() {
    scrollPos = $(window).scrollTop();
    if(scrollPos >= 200) {
        $('div.header').css('position','fixed');
        $('div.nav').css('padding','0');
        $('div.nav > ul > li, div.nav > ul > ul > li')
            .not('.faded')
            .css('display','none')
            .fadeIn(250)
            .addClass('faded')
            .css('display','inline-block');
        $('div.header div.title')
            .css('display','none')
            .children('h1')
            .css('display','none');
    } else {
        $('div.header').css('position','static');
        $('div.header div.title').css('display','block');
        $('div.nav').removeAttr('style');
        $('div.nav li').removeClass('faded');
        $('div.nav li.nav-title').fadeOut(250, function() {
            $('div.header div.title h1').fadeIn(250);
        });
    };
});

Does either one make a difference in browser resource usage? Or is one incorrect?

\$\endgroup\$
  • 1
    \$\begingroup\$ I'd recommend you edit the post to include your actual real code, while expressing your concerns about browser resource usage - you can even include your html, css and javascript in an on-site executable snippet; you'll get the best value out of Code Review that way, since reviewers are always free to address any & all aspects of your code. \$\endgroup\$ – Mathieu Guindon Jan 11 '16 at 3:03
1
\$\begingroup\$
  • First of all, having scroll handlers is not the best idea. Usually it kills performance.
  • If you have no choise - use debounce-like function within - in 99% you do not need explict calls on every move.
  • Don't use $('smth') within your handler. Save them to variables somewhere before. Do not look for them in your DOM tree on every scroll event.
| improve this answer | |
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.