Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

jQuery – Best Practices #6

Folosirea contextului la selectori

În articolul precedent arătasem care sunt cei mai rapizi selectori jQuery, iar acum îți voi mai da un sfat care să facă orice selector Mai Rapid cu 25% decăt era (dar ordinea performanței va rămâne aceeași, adică primează selectorul de ID, apoi cel de tag + clasă, apoi cel de tag, apoi cel de clasă.


<p>$("div.clasa_mea", "#element_parinte");</p>

Să explic acum de ce codul de mai sus e super super Rapid. În primul rând, să explic sintaxa. jQuery acceptă și un al doilea parametru când se folosește un selector, reprezentând contextul în care se face căutarea propriu-zisă. Ce înseamnă asta ? În cazul de mai sus i-am spus lui jQuery să-mi caute elementul DIV cu clasa clasa_mea, dar să caute doar în cadrul elementului cu ID-ul element_parinte, în loc să caute tot DOM-ul cum ar fi făcut dacă nu s-ar fi precizat contextul căutării. De ce e super rapid ? În primul rând, jQuery procesează mai întâi contextul, și apelează funcția JavaScript getDocumentById( ), apoi începe căutarea în cadrul elementului găsit, căutând un element DIV ce are clasa clasa_mea. Deci e foarte rapid!

Evident că tot nu e mai rapid decât selectorul de ID. Acum precis te întrebi: dar dacă folosesc context la selectorul de ID, va fi mai rapid ? În ciuda faptului că ar părea logic, din păcate nu va fi mai rapid. Iată codul, și imediat explic și de ce:


<p>$("#myID", "#element_parinte");</p>

Dacă ai urmărit până acum ce am explicat, apelul de mai sus face două lucruri: caută elementul element_parinte cu viteza maximă a selectorului de ID, dar apoi mai face încă o căutare, cea a elementului myID. Chiar dacă va fi restrânsă căutarea doar în cadrul contextului, faptul că se mai face o căutare extra va adăuga câteva fracțiuni de secundă în plus la căutare, comparativ cu folosirea selectorului ID fără context care face doar o singură căutare.


Posted in Best Practices, JavaScript, jQuery, Web


This post first appeared on I Geek U, please read the originial post: here

Share the post

jQuery – Best Practices #6

×

Subscribe to I Geek U

Get updates delivered right to your inbox!

Thank you for your subscription

×