Different Function Test result Inquiry

Question

I accidently made a post on StackOverflow, I'm new and wasn't intentional. I got redirected here. One person mentioned that the below test is not right because i'm using the scroll method and the way I was testing is invalid. Anyways if anyone can look at the variations of the code below and give me some pointers. I would really appreciate it. Thanks Rest of the Post below is copy paste.

---

I'm new so excuse me for any ignorance or misunderstanding on my part.

I decided to run a few test on js functions on jspref to see which method of using function is better suited for this small particular example. To get a better understanding.

LINK to the page with tested functions

Problem:

Getting different results each time, Cold Start, Re-test, Re-Re Test are all coming with different results

First Func - Is just embeded in normally

$(function() {
  var up = $('#horiz_line').offset().top + $('#horiz_line').height() + 25,
      triga = $('.trigger');
  triga.css("display", "none");
  $(window).scroll(function() {
    var down = $(this).scrollTop();
    (down > up) ? triga.fadeIn('fast') : triga.fadeOut('fast')
  });
});

Second Func - Calling a Global Function

$(function() {
  triga.css("display", "none");
  $(window).scroll(function() {
    scrollMenu($(this).scrollTop())
  });
});

function scrollMenu(down) {
  var up = $('#horiz_line').offset().top + $('#horiz_line').height() + 25,
      triga = $('.trigger');
  (down > up) ? triga.fadeIn('fast') : triga.fadeOut('fast')
}

Third Func - Registering/Calling variable func (To test/Learn: I have no idea wt i'm doing)

$(function() {
  $(window).scroll(function() {
    scrollMenu($(this).scrollTop())
  });
  var scrollMenu = function(down) {
      var triga = $('.trigger'),
          up = $('#horiz_line').offset().top + $('#horiz_line').height() + 25;
      (down > up) ? triga.fadeIn('fast') : triga.fadeOut('fast')
      }
});

Fourth Func - Same as Third except Up is called before hand, and registered as a global func. Which i'm guessing is not a good idea if the project gets bigger over time.

// Variable Up Takes up The Global Namespace. Is it better to pre-define it OR have it         inside the scroll Menu anonymous func and get calculated each time the function is run? 
$(function() {
  var up = $('#horiz_line').offset().top + $('#horiz_line').height() + 25;
  $(window).scroll(function() {
    scrollMenu(up, $(this).scrollTop())
  });
  var scrollMenu = function(up, down) {
      var triga = $('.trigger');
      (down > up) ? triga.fadeIn('fast') : triga.fadeOut('fast')
      }
});

What is a good practice and what not.

Thank you in advance.

TLDR:- I have no idea what I'm doing, just trying to learn a little.

Answer 1

Protecting your code

When this project becomes bigger, you might want to wrap this code like in it's own scope similar to how jQuery plugins are packaged. This is to prevent naming collisions, protect your code and portability. This also implies that you should avoid globals. So case #2 is out.

Abstraction vs Performance

The more you abstract and simplify the API, the more code you actually create thus the more processing it will take. Keep your code simple.

Browser Implementation

Browser will also be a factor in performance. A browser with a more powerful implementation of a certain routine will tend to be faster at that routine compared to the others. In Chrome's case, the first 2 tests run best. However, in Firefox, all tests run at almost the same performance.

DOM querying

Now back to the code with case #2 out of the way. In cases #3 and #4, your code is querying the DOM every time the scroll event is triggered. This causes performance degradation. If you have references to static elements, it's better to cache them outside the function rather than being fetched every time.

This code should do the trick as well as a jsPerf test for your case #1 vs my modified code. As you can see, my Firefox 18 performs both operations equally while Chrome 23 performs better with the modified code which proves that browser implementation can make a difference.

$(function() {
      //cache non-changing elements and values
  var horizLine = $('#horiz_line')
    , up = horizLine.offset().top + horizLine.height() + 25
    , triga = $('.trigger')
    , $window = $(window)
    ;

  triga.css('display', 'none');

  //we cached window wrapped in jQuery earlier so we reuse it
  $window.scroll(function(){
    //omitting down variable since it was only used once
    ($window.scrollTop() > up) ? triga.fadeIn('fast') : triga.fadeOut('fast')
  });

});

Answer 2

These four functions are doing different things:

The 1st and 4th set up immediately and down when the user scrolls.

The 2nd and 3rd set both up and down when the user scrolls. (The 2nd seems unlikely to work properly because triga is not defined in the 1st function, so the line triga.css("display", "none"); will result in an error. Only in the 1st will the triga element be initially hidden.)

So they will behave differently if the element #horiz_line changes position between the function being set and the user scrolling.

I'm guessing what you want is to check the position of the horizontal line and the scroll top when the user scrolls. In this case something like the 2nd and 3rd function should work, but it is needlessly complicated to pass the values as parameters and call a function from within a function. Instead you can do either:

$(function() {
  var triga = $('.trigger');
  triga.css("display", "none");
  $(window).scroll(function() {
    var down = $(this).scrollTop(),
        up = $('#horiz_line').offset().top + $('#horiz_line').height() + 25;
    triga[down > up ? 'fadeIn' : 'fadeOut']('fast');
  });
});

or

$(function() {
  var triga = $('.trigger');
  triga.css("display", "none");
  $(window).scroll(scrollMenu);
  function scrollMenu() {
    var down = $(window).scrollTop(),
        up = $('#horiz_line').offset().top + $('#horiz_line').height() + 25;
    triga[down > up ? 'fadeIn' : 'fadeOut']('fast');
  }
});

If, on the other hand, up never changes, then there will be a performance advantage to either defining up as a global variable or passing it as a parameter to the scrolling function (because accessing the DOM is usually costly in terms of performance.)

I think the other aspect of your question is whether there is a performance difference in passing a value as a parameter to a function vs. having it in the scope of an outer function; I don't know but suspect it makes a negligible difference, especially if the parameter is first defined as a variable in the outer function anyway.

More generally: focus on understanding how the code works before worrying about performance optimisation!