jquery, was ist die Leistung was ist schneller getElementById oder jquery selector?

Question

Was ist besser von Leistung klug document.getElementById('elementId') oder $('#elementId')? Wie kann ich die Geschwindigkeit selbst berechnen?

Answer 1

Wenn Sie über die Leistung betrifft, nativer getElementById ist viel viel schneller, aber jQuery gibt Ihnen sehr praktisch Zugang zu einer Menge Sachen. Also, möchten Sie vielleicht so etwas wie verwenden:

$(document.getElementById("some_id")).jQueryCall(); 

Diese wird Ihnen eine bessere Leistung, und zugleich, können Sie jQuery verwenden.

Answer 2

getElementById ist schneller, weil es nativen Code verwendet. Der jQuery-Selektor verwendet auch getElementById, muss jedoch zunächst eine Vielzahl von Tests und Vergleichen im Text durchführen.

Answer 3

Natürlich ist getElementById schneller, aber mit jQuery können Sie viele Dinge tun.

Um das zu testen, können Sie versuchen, 10k-mal für jedes zu loopen, und Zeitstempel vorher und nachher vergleichen.

Answer 4

Die native getElementById ist schneller. Die Jquery-Selektor-Engine umschließt dies nur für beliebige #x-Selektoren.

Mit der Firebug-Konsole können Sie jQuery auf die folgende Weise profilieren. Nicht sicher, es funktioniert gut für native API-Aufrufe wie getElementById.

console.profile(); 
$('#eleId'); 
console.profileEnd(); 

Answer 5

Verwenden Sie http://jsperf.com/, wenn Sie jede Art von Leistung zwischen jquery und dom testen möchten, aber jquery ist normalerweise langsamer mit allem, da es auf dem Dom basiert.

Answer 6

Ich bin gerade über diesen Beitrag gestolpert, während ich mich die gleiche Frage gestellt habe ... also entschied ich mich, ein schnelles Testskript zu machen ... lass es laufen, probier es selbst, blies meine Gedanken!

var now = Date.now(); 
var diff = 0; 
console.log(now); 

for(var i=0; i < 1000000; i++) 
{ 
    if($(document.getElementById("test")).css('opacity') == '0.2') 
     $(document.getElementById("test")).css('opacity', '1'); 
    else 
     $(document.getElementById("test")).css('opacity', '0.2'); 
} 

diff = Date.now() - now; 
console.log('With $(document.getElementById("test")).somejQueryCall(): ' + diff + ' milliseconds'); 

//////////////////////////////////////////////////////////////////////// 

var now2 = Date.now(); 
var diff2 = 0; 
console.log(now2); 

for(i=0; i < 1000000; i++) 
{ 
    if($("#test").css('opacity') == '0.2') 
     $("#test").css('opacity', '1'); 
    else 
     $("#test").css('opacity', '0.2'); 
} 

diff2 = Date.now() - now2; 

console.log('With $("#test").somejQueryCall(): ' + diff2 + ' milliseconds'); 

//////////////////////////////////////////////////////////////////////// 

var now3 = Date.now(); 
var diff3 = 0; 
var elem = $("#test"); 
console.log(now3); 

for(i=0; i < 1000000; i++) 
{ 
    if(elem.css('opacity') == '0.2') 
     $(elem).css('opacity', '1'); 
    else 
     $(elem).css('opacity', '0.2'); 
} 

diff3 = Date.now() - now3; 

console.log('With $(elem).somejQueryCall(): ' + diff3 + ' milliseconds'); 

Nachdem dieses Skript ausgeführt wird, habe ich die folgenden Ergebnisse:

Lauf 1

Mit $(document.getElementById("test")).somejQueryCall(): 552 Millisekunden

Mit $("#test").somejQueryCall(): 881 Millisekunden

Mit $(elem).somejQueryCall() : 1317 Millisekunden

Run 2

Mit $(document.getElementById("test")).somejQueryCall(): 520 Millisekunden

Mit $("#test").somejQueryCall(): 855 Millisekunden

Mit $(elem).somejQueryCall(): 1289 Millisekunden

Run 3

Mit $(document.getElementById("test")).somejQueryCall(): 565 Millisekunden

Mit $("#test").somejQueryCall(): 936 Millisekunden

Mit $(elem).somejQueryCall(): 1445 Millisekunden

ich den Unterschied nicht glauben !!! Ich musste das nur teilen!

Frieden!

Answer 7

Heh. Bei der Untersuchung dieser Frage habe ich diesen ausgezeichneten Beitrag gefunden. Und auch ein Post darüber mit der neuesten in JQuery Lernseite mit spezifischen Tipps zur Optimierung der Geschwindigkeit!

Beachten Sie, dass mit der neuesten DOM-Spezifikation die Wahrscheinlichkeit, dass Sie sich keine Sorgen über die Leistung im Allgemeinen machen müssen. Nur wenn Sie einen Engpass erstellt (oder entdeckt) haben.

Optimise Selectors

Answer 8

Da der andere Performance-Test, das auf dieser Seite verlinkt schien gebrochen zu werden, und es gehörte auch etwas, das nicht etwa in dieser Frage gestellt wurde (nämlich eine benutzerdefinierte jQuery-Methode), dann habe ich beschlossen (gibt das DOM-Element) in jQuery anstelle einer benutzerdefinierten Methode eine neue Performance-Benchmark, um die Frage zu beantworten, die das genaue Äquivalent umfasst:

https://jsperf.com/jquery-get-0-vs-get-element-by-id

Wenn ich es in meinem Chrome laufen, es zeigt, dass eine gerade jQuery

$('#foo').get(0) 

ist 92% langsamer als die äquivalente Operation in Standard JavaScript

document.getElementById('foo') 

Ich habe auch versucht, was zur Zeit als die akzeptierten Antwort hier markiert, die angeblich „sehr viel schneller“, aber es immer noch 89 ist % langsamer als die Standard-Äquivalent JavaScript:

$(document.getElementById("foo")).get(0); 

Fühlen Sie sich frei, um es für sich selbst laufen und sehen, was Sie in Ihrem Browser bekommen, mit dem performance benchmark, die ich gemacht. Die Version ohne jQuery scheint viel schneller zu sein.