Page performance - defer unwanted scripts executions

September 11th, 2009   Filed Under Javascript, browser, jQuery, optimization, page performance, snippet  

In extension to my previous post regarding deferring images I would like to share my thoughts about deferring unwanted scripts executions.

The process hungry operations in DOM manipulation include insertion or deletion of elements and attaching events to them. And if all of such DOM manipulation occurs at the page load time it literally hangs other stuff piped in the download queue; And we blame the network latency to be the culprit.

So how do we solve this problem. It is simple to say, “Yeah! that’s right”. But what’s the right way of doing the right thing is not well known.

I have tried my way of solving this problem. In this regard I suggest two measures to be taken:

1) Use Event Bubbling
2) Defer unwanted event attachments

1) Use Event Bubbling: Event Bubbling is something that happens naturally on the DOM tree. In plain english every event on the page bubbles up to its parent until it reaches the document element. For example if we have an HTML document having body>div>a tag. Then when you click on the “a” element, the javascript engine looks for any onclick handler assigned to the “a” tag if it is assigned then it will trigger it. Then it traverses up to the parent element which is the div tag. Now if the div tag is having any onclick handler then that will also get triggered and so on.

What we generally do is we assign all the click events to the corresponding elements so that when they are clicked the handler executes and performs something. Attaching this kind of event handlers to several elements on the page penalizes on the page download performance.

So what we do is, instead of assigning so many click handlers we can assign only one click handler to the document, where the cue ultimately reaches.

Now how do we know on the document level which element was clicked?

For that you have an event object which carries the information about the element on which the event occured. Reading the event object we can determine what to do. So basically you write a list of if ..else in the document click function.

Code:

//CENTRALIZED CLICK EVENT HANDLER
$(document).bind("click",function(e){
    if(!e.button){//ONLY WHEN LEFT CLICKED
        var et = e.target;
        var qet = $(et);
        if(et.className=="closeBut"){
            window.close();
        }
        if((et.tagName == "LI")&& qet.parents("del")[0]){
            //code to handle click on LI which has a parent DEL
        }
    }
});

The above code is based on jquery way of assigning handlers. In the above code you can see that the event object has a property called target which points to the object where the event occured. Now using that object you can truthify the condition to perform some activity based on the properties of that object or the surrounding objects. For example here we are checking for the className in one if condition and className and parent both in the other condition.

2)  Defer unwanted event attachments: This measure is another trick to unburden your load time script executions. What we do here is club all the hover and mouseover event attachments into one sub-routine and trigger it when the user moves his mouse for the first time.

Generally we see that a user’s pattern of opening links or a web page includes getting distracted to some other links or checking emails while the page opens. So a user open a web page and opens another web page or goes to check his emails or just waits for the page to load.

Here if the user doesn’t move his mouse, the heavy operation of assigning mouseover or hover events to list(s) or whatsoever on the page has an opportunity to get deferred to a later time when actually the user comes to the page and is ready to interact with the page.

Code:

//ON DOCUMENT MOUSEMOVE
$(document).bind("mousemove",function(e){
    if(typeof initHovers=='undefined'){
        if($$("#oc .menu")[0]){//MENU
                mainmenu($$("#oc .menu"));
        }
        $$=$;//DISABLING THE CACHING AFTER PAGE LOAD
        initHovers = 1;
    }
});

The above code does exactly what I have declared above. Here it checks for an undefined variable existence called “initHovers”. If it does not exist only then we execute the sub-routine and define the variable with a global scope. As a result the sub-routine execute only once on the mousemove event on the document. And we save few seconds/milliseconds on the page load.

Post Linx
Permalink | Trackback | | Print This Article | Leave a Comment