Firebug: Part 4 - profiling

    As good code can help avoid debugging in the debugger, it will also help you never use the skills gained in this article.
    If on your site your browser "dies" from javascript overload, then you just need to read it (and apply it too).

    The whole cycle: Console , Commands , Debugging , Profiling



    Today we will write a little javascript and optimize it, because this is our goal.
    All action will take place on the main hubra .
    Let's start small, collect all the links on the page: They will become the object of our bullying.
    links = $$('a');



    Now we’ll create two functions that will add and remove the “hidden” class, which is used on the hub for its intended purpose: And now we’ll write a function that will hide and show all links on the page: And we’ll run the profiler: Wait a bit, and get the result on which it can be seen that the longest in the function we called are the removeClass () and getComputedStyle (). The main reason for this is 401 calls to each of them. Now let's try the second method - call the built-in mootools $ each: And see the result: There is an increase (as much as 2ms), but we still have not gotten rid of the main “brake”. And remember that the addClass () and removeClass () functions can be called on an array of elements:
    hide = function(el) {el.addClass('hidden');}
    show = function(el) {el.removeClass('hidden');}



    js = function() {
     for(var n=0; n   hide(links[n]);
      show(links[n]);
     }
    }



    console.profile('js');
    js();
    console.profileEnd();





    each = function() {
     $each(links, function(link) {
      hide(link);
      show(link);
     })
    }



    console.profile('each');
    each();
    console.profileEnd();





    mass = function() {
     hide(links);
     show(links);
    }

    console.profile('mass');
    mass();
    console.profileEnd();



    And now, after all we saw, we realized that there is not much difference. And it's time to think about whether we need to hide and then show 401 links?

    This article is based on the Michael Sync blog .

    * This source code was highlighted with Source Code Highlighter .

    PS nevertheless, sometimes you can find a lot of nonsense in the code because of which it will be slowly executed.

    Also popular now: