javascript - jQuery vs document.querySelectorAll

Jag har hört flera gånger att jQuerys starkaste tillgång är sättet det frågar efter och manipulerar element i DOM:en på; du kan använda CSS-frågor för att skapa komplexa sökningar som skulle vara mycket svåra att göra i vanlig JavaScript. Men, såvitt jag vet, kan du uppnå samma resultat med document.querySelector eller document.querySelectorAll, som stöds i Internet Explorer 8 och senare.

Så frågan är denna: varför riskera jQuerys overhead om dess starkaste fördel kan uppnås med ren JavaScript?

Jag vet att jQuery har mer än bara CSS-väljare, till exempel korsbläddrare AJAX, snygg händelsekoppling osv. Men dess sökdel är en mycket stor del av styrkan hos jQuery!

Några tankar?

Svar #1

document.querySelectorAll() har flera inkonsekvenser mellan olika webbläsare och stöds inte i äldre webbläsareDetta kommer förmodligen inte orsaka några problem längre nuförtiden. Den har en mycket ologisk scopingsmekanism och några andra mindre trevliga funktioner. Dessutom är det svårare med JavaScript att arbeta med resultatmängderna från dessa frågor, vilket man i många fall kanske vill göra. jQuery tillhandahåller funktioner för att arbeta med dem såsom: filter(), find(), children(), parent(), map(), not() och flera fler. För att inte tala om jQuery:s förmåga att arbeta med pseudo-klassselektorer.

Jag skulle dock inte betrakta dessa saker som jQuerys starkaste funktioner, utan andra saker som att "arbeta" med DOM:en (händelser, stil, animation och manipulering) på ett webbläsarkompatibelt sätt eller AJAX-gränssnittet.

Om du bara vill ha selektormotorn från jQuery kan du använda den som jQuery själv använder: Sizzle På det sättet har du kraften från jQuerys selektormotor utan den obehagliga overheaden.

REDIGERA: Bara för protokollet, jag är ett stort fan av vanlig JavaScript. Ändå är det ett faktum att du ibland behöver 10 rader JavaScript där du skulle skriva 1 rad jQuery.

Självklart måste du vara disciplinerad för att inte skriva jQuery så här:

$('ul.first').find('.foo').css('background-color', 'red').end().find('.bar').css('background-color', 'green').end();

Det här är extremt svårt att läsa, medan det senare är ganska tydligt:

$('ul.first')
   .find('.foo')
      .css('background-color', 'red')
.end()
   .find('.bar')
      .css('background-color', 'green')
.end();

Den motsvarande JavaScript skulle vara mycket mer komplex, vilket illustreras av pseudokoden ovan:

1) Hitta elementet, överväg att ta alla element eller bara det första.

// $('ul.first')
// taking querySelectorAll has to be considered
var e = document.querySelector("ul.first");

2) Iterera över arrayen av barnnoder via några (möjligen nästlade eller rekursiva) loopar och kontrollera klassen (classlist finns inte tillgänglig i alla webbläsare!)

//.find('.foo')
for (var i = 0;i<e.length;i++){
     // older browser don't have element.classList -> even more complex
     e[i].children.classList.contains('foo');
     // do some more magic stuff here
}

3) applicera CSS-stilen

// .css('background-color', 'green')
// note different notation
element.style.backgroundColor = "green" // or
element.style["background-color"] = "green"

Denna kod skulle vara minst dubbelt så många kodrader som du skriver med jQuery. Dessutom skulle du behöva ta hänsyn till problem med olika webbläsare, vilket kommer att kompromettera den stora hastighetsfördelen (förutom pålitligheten) hos den inbyggda koden.

Svar #2

Om du optimerar din sida för IE8 eller nyare, bör du verkligen överväga om du behöver jQuery eller inte. Moderna webbläsare har många funktioner inbyggda som jQuery tillhandahåller.

Om du bryr dig om prestanda kan du få otroliga prestandafördelar (2-10 gånger snabbare) genom att använda native JavaScript: http://jsperf.com/jquery-vs-native-selector-and-element-style/2

Jag omvandlade ett div-taggmoln från jquery till naturlig javascript (IE8+ kompatibel), resultaten är imponerande. 4 gånger snabbare med bara lite overhead.

                    Number of lines       Execution Time                       
Jquery version :        340                    155ms
Native version :        370                    27ms

You Might Not Need Jquery ger en riktigt bra översikt över vilka inbyggda metoder som ersätter vilka webbläsarversioner.

http://youmightnotneedjquery.com/

Bilaga: Ytterligare hastighetsjämförelser hur inhemska metoder konkurrerar med jQuery

  • Array: $.inArray vs Array.indexOf: Jquery 24% långsammare

  • DOM: $.empty vs Node.innerHtml: Jquery 97% långsammare

  • DOM: $.on vs Node.addEventListener: Jquery 90% långsammare

  • DOM: $.find vs Node.querySelectorAll: Jquery 90% långsammare

  • Array: $.grep vs Array.filter: Nativ 70% långsammare

  • DOM: $.show/hide vs display none: Jquery 85% långsammare

  • AJAX: $.ajax vs XMLHttpRequest: Jquery 89% långsammare

  • Höjd: $.outerHeight vs offsetHeight: Jquery 87% långsammare

  • Attr: $.attr vs setAttribute: Jquery 86% långsammare

Svar #3

För att förstå varför jQuery är så populärt är det viktigt att förstå var vi kommer ifrån!

För ungefär ett decennium sedan var de bästa webbläsarna IE6, Netscape 8 och Firefox 1.5. På den tiden fanns det få sätt som fungerade i flera webbläsare för att välja ett element från DOM förutom Document.getElementById().

Så när jQuery släpptes tillbaka 2006 var det ganska revolutionerande. På den tiden satte jQuery standarden för hur man enkelt kan välja/ändra HTML-element och trigga händelser, eftersom dess flexibilitet och webbläsarstöd var utan motstycke.

Nu, mer än ett decennium senare, har många funktioner som gjorde jQuery så populärt blivit inkluderade i JavaScript-standarden:

  • Istället för jQuerys $() kan du nu använda Document.querySelectorAll()
  • Istället för jQuerys $el.on() kan du nu använda EventTarget.addEventListener()
  • Istället för jQuerys $el.toggleClass() kan du nu använda Element.classList.toggle()
  • ...

Dessa var inte allmänt tillgängliga tillbaka 2005. Att de är det idag väcker uppenbarligen frågan om varför vi överhuvudtaget ska använda jQuery. Och faktiskt undrar människor i allt högre grad om vi överhuvudtaget ska använda jQuery.

Så, om du tror att du förstår JavaScript tillräckligt väl för att klara dig utan jQuery, varsågod! Känn inte att du måste använda jQuery bara för att så många andra gör det!

Relaterade artiklar