A few questions about resources usage

JavaScript
1

I have a really long application so i’m trying to minimiza cpu/memory usage
with each function, therefore I have a few simple questions.

  1. on elements added after the page has been loaded,
    is there a difference between putting “onclick” inside the element tag or using
    jquery’s delegate like the following example?
    $(“#mainchatwindow”).delegate(‘img[func=“gift”]’,‘click’ function…

  2. does it make a big difference selecting an element with a full path
    like (#body #contentdiv #userstbl td.example)
    or just typing (.example) ?

  3. I have 2 arrays of objects, both objects has an id attribute, one of the
    objects are the images on the page, the second one is an ajax result with updated images.
    will it be better to first loop threw both objects just to create new arrays
    with just the id’s instead of looping the threw those big objects?
    like this:


        if (data.online)
            var online_length = data.online.length;
        else
            var online_length = 0;
        var online_users = [];   //user
        var online_users2 = [];  //server   

        $.each($("#userwindow .online_users"), function(i, v) {
            online_users.push($(v).attr('fb_id'));  
        });

        for (i=0; i<online_length; i++) { 
            online_users2.push(data.online[i].fb_id);  
        };
    // check for new online users
        for (i=0; i<online_length; i++) { 
            if(jQuery.inArray(data.online[i].fb_id, online_users) < 0)
                $("#userwindow #online_users").append('<a target="_blank"     href="http://www.facebook.com/profile.php?id='+data.online[i].fb_id+'"><img title="&#1500;&#1495;&#1509; &#1500;&#1499;&#1504;&#1497;&#1505;&#1492; &#1500;&#1502;&#1513;&#1514;&#1502;&#1513;" border="0" class="online_users" fb_id="'+data.online[i].fb_id+'" width="40" height="40" style="margin:2px;" src="http://graph.facebook.com/'+data.online[i].fb_id+'/picture" /></a>'); 
        }
            
    // check to remove no logner onnline users
        for (i=0; i<online_users.length; i++) {
            if(jQuery.inArray(online_users[i], online_users2) < 0)
                $("#userwindow .online_users[fb_id='"+online_users[i]+"']").parent().remove();
        }
2

I can help answer some of this.

is there a difference between putting “onclick” inside the element tag or using
jquery’s delegate like the following example

Adding an ‘onclick’ attribute to an element has been deprecated in the HTML specifications. Using .live() and .delegate() it will take extra cpu, but it’s worth it to keep your code valid and maintainable.

does it make a big difference selecting an element with a full path
like (#body #contentdiv #userstbl td.example)
or just typing (.example) ?

In your example if you just used the class name to locate the element jQuery would have to iterate over every single element in the DOM. This takes quite a bit longer than scoping the amount of elements it has to search to an id/element type.

It’s always faster to scope your selectors to an id if possible. You can store it as a jQuery collection as well so your code doesn’t have to re-do the work to select it from the dom againl, eg:


// you don't need multiple ids, each id should be unique
var $userTable = jQuery('#userstbl');
var exampleCell = jQuery('td.example',$userTable);