dom - jQuery: What is more efficient? Many ID specific selectors, or one "Contains Prefix Selector" -


i have snippet of javascript in project caches array of jquery objects (anchor tags) on dashboard:

$.extend(cache, {     dashboard : {         buttons : [             $('#dash-new-lead'),               $('#dash-jobs-calendar'),             $('#dash-view-lead'),              $('#dash-sales-reports'),             $('#dash-search-leads'),           $('#dash-new-job'),             $('#dash-dispatch-jobs'),          $('#dash-dispatch-reports'),             $('#dash-manage-employees'),       $('#dash-manage-trucks'),             $('#dash-finalize-jobs'),          $('#dash-payment-profiles'),             $('#dash-employee-statements'),    $('#dash-company-statements'),             $('#dash-finance-reports'),        $('#dash-admin-sources'),             $('#dash-admin-statuses'),         $('#dash-admin-companies'),             $('#dash-admin-groups'),           $('#dash-admin-users'),             $('#dash-admin-dispositions'),     $('#dash-search-jobs'),             $('#dash-jobs-calendar-dispatch'), $('#dash-new-lead-dispatch'),             $('#dash-finance-notices')         ]     } });

each link styled later (using $.each) button. each link gets unique jquery ui icon (hence id's instead of class selector). depending on user's access level links may or may not exist in dom.

i'm wondering if more efficient use jquery's contains prefix selector:

$.extend(cache, {     dashboard : {         buttons : $('a[id|="dash-"]')     } });
  1. pro: fewer references jquery object = faster
  2. con: jquery cannot use document.getelementbyid = slower

it'll depend on browser, you'll need test sure.

because 'a[id|="dash"]' (notice removed -) appears valid queryselectorall() selector, browsers support method (which includes ie8) should have performance.

because you're including tagname, browsers don't support queryselectorall() (i believe) use getelementsbytagname(), filter applied <a> elements finds.

it should if you're able limit query narrower context document.

note according test, performance of getelementbyid() isn't terribly exciting in ie6 , ie7. , again ie8 support queryselectorall(), though wouldn't bad make sure succeeds particular selector. if not, query default sizzle's engine.

here's test using selector directly through queryselectorall(). can run in different browsers see supported.

note getelementsbyclassname() isn't supported before ie9, doubt using class offer great performance improvements on 'a[id|="dash"]'. exception being firefox3, support getelementsbyclassname(), , not queryselectorall().


Comments

Post a Comment

Popular posts from this blog

asp.net - repeatedly call AddImageUrl(url) to assemble pdf document -

i'm using abcpdf , i'm curious if can recursively call addimageurl() function assemble pdf document compile multiple urls? something like: int pagecount = 0; int theid = thedoc.addimageurl("http://stackoverflow.com/search?q=abcpdf+footer+page+x+out+of+", true, 0, true); //assemble document while (thedoc.chainable(theid)) { thedoc.page = thedoc.addpage(); theid = thedoc.addimagetochain(theid); } pagecount = thedoc.pagecount; console.writeline("1 document page count:" + pagecount); //flatten document (int = 1; <= pagecount; i++) { thedoc.pagenumber = i; thedoc.flatten(); } //now try again theid = thedoc.addimageurl("http://stackoverflow.com/questions/1980890/pdf-report-generation", true, 0, true); //assemble document while (thedoc.chainable(theid)) { thedoc.page = thedoc.addpage(); theid = thedoc.addimagetoc
Read more

java - Android recognize cell phone with keyboard or not? -

in android app, want detect user's device if device has keyboard(like motorola milestone) , show corresponding user interface. guys know how that? ! regards justicepenny http://developer.android.com/reference/android/content/res/configuration.html public int keyboard the kind of keyboard attached device. 1 of: keyboard_nokeys, keyboard_qwerty, keyboard_12key. that's it!
Read more

iphone - How would you achieve a LED Scrolling effect? -

how achieve led scrolling effect example below? led sign - led ticker emulator iphone , ipad http://img.skitch.com/20101201-rsfh4p1bajb1wp94k466pdpiuj.preview.jpg sometimes remunerates comment in other posts :) have put code you, should implement font '8pin matrix' realistic feeling. uilabel *label; - (void)viewdidload { [super viewdidload]; label = [[uilabel alloc]initwithframe:cgrectmake(10, 50, 300, 20)]; label.font = [uifont fontwithname:@"courier-bold" size:16.0]; label.backgroundcolor = [uicolor blackcolor]; label.textcolor = [uicolor greencolor]; label.linebreakmode = uilinebreakmodecharacterwrap; // otherwise "…" label.text = @"this led text scrolled "; // blanks space between [self.view addsubview:label]; [nstimer scheduledtimerwithtimeinterval:0.12f target:self selector:@selector(scrolllabel) use
Read more