Share
Som engelsktalende er våre tanker rettet mot å tolke data og tekst fra venstre til høyre. Som det viser seg, har mange av de moderne JavaScript-valgmotorene (jQuery, YUI 3, NWMatcher) og den innfødte querySelectorAll, parse selector strenger fra høyre til venstre.
Det er viktig å merke seg at du oftest ikke trenger å bekymre deg for valg av ytelse for mye - så lenge selektoren ikke er motbydelig. jQuery sizzle er utrolig rask og imøtekommende.
Vurder følgende valg:
Accentsconagua
$ ('.boks p'); Selv om noen - generelt eldre - velger motorer først spørre DOM for elementet med a klasse av eske, og deretter fortsette å finne noen p merker som er barn, jQuery fungerer i omvendt. Det begynner med å spørre DOM for alle avsnittetiketter på siden, og deretter fungerer det opp over foreldre noder og søker etter .eske.
Vi kan bruke den utmerkede JsPerf.com-nettsiden for å teste dette ut.
// Markeringen// Testen // 1. $ ('# boks p'); // 2. $ ('# box'). Finn ('p');Hallo
Bildet over viser at du bruker finne() eller barn () er omtrent 20-30% raskere, avhengig av nettleseren.
JQuery-biblioteket har en optimalisering som umiddelbart vil avgjøre om en id ble sendt til jQuery-objektet ( $ ( '# Box') ). Hvis det er tilfelle, trenger det ikke å bruke Sizzle; I stedet passerer den raskt väljeren til getElementById. Og selvfølgelig, hvis nettleseren er moderne nok, querySelectorAll vil ta over for Sizzle.
På den annen side, med $ ('# boks p'), jQuery trenger å analysere denne strengen med Sizzle API, som vil ta litt lengre tid (selv om Sizzle har en optimalisering for selektorer som starter med en id). Dette er nettopp derfor det er også marginalt raskere å gjøre ting som $ ('. Elems'). Først () over $ ( 'Elems:. Første'). Den sistnevnte selektoren må analyseres.
La oss se på et annet eksempel:
$ ('# container>: deaktivert'); Denne velger synes hensiktsmessig. Finn alle deaktiverte innganger (eller faktisk elementer) som er innenfor #container. Men som vi har lært, er jQuery og den innfødte querySelectorAll arbeid høyre til venstre. Dette betyr at jQuery vil gripe, bokstavelig talt, hvert element i DOM, og avgjøre om det er funksjonshemmet Attributtet er satt til ekte. Legg merke til at det ikke er forhåndsfiltrering for å først finne alle innganger på siden. I stedet vil hvert element i DOM bli forespurt.
// Fra jQuery Kilde deaktivert: funksjon (elem) return elem.disabled === true;
Når det er samlet en samling, reiser den opp kjeden til foreldrene, og bestemmer om den er #container. Dette er sikkert ikke effektivt, og selv om det er sant at kanskje for mye oppmerksomhet i samfunnet blir betalt til selgerprestasjon, bør vi likevel strebe for å ikke skrive altfor intensive selgere når det er mulig.
Du kan forbedre denne velgeren litt ved å gjøre:
// Bedre $ ('# container> -inngang: deaktivert'); Denne koden vil begrense spørringen til alle innganger på siden først (i stedet for hver element). Enda bedre, men vi kan igjen bruke finne eller barn metode.
$ ( '# Container') barn ( 'inngang: deaktivert.');
Det er viktig for meg å gjenta at du ærlig ikke trenger å bekymre deg for valg av ytelse for mye. Det er mange optimeringer i jQuery som vil hjelpe deg. Det er generelt bedre å fokusere på større billettartikler, som kodeorganisasjon og struktur.
Som et eksempel, hvis Sizzle kommer over en velger som $ ('# boks p'), Det er sant at det fungerer til høyre, men det er også en rask regexoptimalisering som først vil avgjøre om den første delen av velgeren er en id. I så fall vil det bruke det som kontekst når du søker etter avsnittetiketter.
Likevel er det alltid nyttig å vite hva som skjer bak kulissene - i hvert fall på et svært lavt nivå.
