SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Apr 2007
    Posts
    69
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    a few questions about resources usage

    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:
    Code:
            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="לחץ לכניסה למשתמש" 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. #2
    SitePoint Enthusiast Anthony.Barnes's Avatar
    Join Date
    Aug 2011
    Location
    Canberra, Australia
    Posts
    80
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •