it-swarm.com.de

Ist die Auswahl nach Klasse oder ID schneller als nach einem anderen Attribut?

Im Grunde ist 

$("#someid")

oder

$(".someclass")

schneller als

$("[someattr='value']")

Ich könnte mir vorstellen, dass dies der Fall ist (dh die Auswahl nach der ID ist am schnellsten, dann die Klasse, dann das Attribut), aber weiß es jemand genau?

42
Jay

ID ist absolut das schnellste. Ein Grund dafür ist, dass die ID eindeutig sein sollte. Daher stoppt die API, nachdem die ID im DOM gefunden wurde.

Wenn Sie einen Klassen- oder Attributselektor verwenden müssen, können Sie die Leistung verbessern, indem Sie den optionalen context-Parameter angeben.

Zum Beispiel...

$(".someclass", "#somecontainer")

Wobei somecontainer so etwas wie ein div ist und ein Element mit der Klasse someclass umgibt. Dies kann einen großen Leistungsvorteil bieten, wenn somecontainer einen kleinen Bruchteil des DOM ausmacht. 


AKTUALISIEREN:

Ich habe vor ein paar Jahren einige Tests mit dem Kontextparameter durchgeführt. Nachdem ich die folgenden Kommentare gelesen hatte, war ich neugierig, ob sich etwas geändert hat. In der Tat scheint sich die Szene mit den heutigen Browsern etwas verändert zu haben. Vielleicht hat es auch mit Verbesserungen in jQuery zu tun? Ich weiß es nicht.

Hier sind meine Ergebnisse mit 10.000 Iterationen (Code ist unten):

IE9

$(".someclass") - 2793 ms

$(".someclass", "#somecontainer") - 1481 ms

Chrome 12

$(".someclass") - 75 ms

$(".someclass", "#somecontainer") - 104 ms

Firefox 3.6

$(".someclass") - 308 ms

$(".someclass", "#somecontainer") - 357 ms

Unter diesen großen 3 modernen Browsern scheint der Kontextparameter nur IE9 zu helfen. Ältere Browser profitieren auch vom Kontextparameter. In Anbetracht der Verbreitung jedes dieser Browser und der Mittelwertbildung ist der Nettogewinn jetzt ein bisschen waschen.

Und hier ist der Code für den Fall, dass jemand es selbst ausprobieren möchte ...

<html>
    <head>
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){

                startTime = new Date().getTime();               
                for (i = 0; i < 10000; i++)
                {
                    s = $(".someclass");
                }           
                $("#withoutcontext").html(elapsedMilliseconds(startTime));


                startTime = new Date().getTime();
                for (i = 0; i < 10000; i++)
                {
                    s = $(".someclass", "#somecontainer");
                }           
                $("#withcontext").html(elapsedMilliseconds(startTime));

            });

            function elapsedMilliseconds(startTime)
            {
                var n = new Date();
                var s = n.getTime();
                var diff = s - startTime;
                return diff;
            }
        </script>
    </head>
    <body>
        <h1>jQuery Selector Performance: Context vs No Context</h1>

        <h2>$(".someclass")</h2>
        <span id="withoutcontext">---</span> ms<br /><br />

        <h2>$(".someclass", "#somecontainer")</h2>
        <span id="withcontext">---</span> ms<br /><br />

        <hr />

        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <div id="somecontainer">
            <p class="a">a</p>
            <p class="b">b</p>
            <p class="c">c</p>
            <p class="someclass">someclass</p>
        </div>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
        <p class="a">a</p>
        <p class="b">b</p>
        <p class="c">c</p>
    </body>
</html>
71
Steve Wortham

Die Auswahl nach ID ist die schnellste, da sie direkt getElementByID zugeordnet wird. Die anderen beiden Elemente müssen jedes Element überprüfen, um die ausgewählten Elemente zu ermitteln.

Wenn Sie "class" oder "attribute" auswählen müssen, versuchen Sie, die Suche in eine ID einzuschließen.

$("#someid .someclass")
11
a programmer

Die ID ist eindeutig und wenn Sie hier nur ein erstes Element auswählen möchten, ist dies das Äquivalent 

$ ("# someid") => 75.695 ops/sec, am schnellsten

$ (. unique_class ') => 45,257 Ops/s, 40% langsamer: Nur eine Klasse auf der Seite

$ (". someclass"). first () => 42,217 ops/sec, 46% langsamer: mehrere Klassen auf Seite, erstes Element auswählen

$ (". someclass: eq (0)") => 18.324 Ops/s, 76% langsamer: mehrere Klassen auf einer Seite, Element am ausgewählten Index auswählen

Test-URL: http://jsperf.com/jquery-selector-speed-tests/98

7
ewwink

ID- und Klassen-Selektoren sind, zumindest für sich genommen, tendenziell schneller, ob für jQuery oder für CSS. Dies ist vor allem darauf zurückzuführen, dass Browser Algorithmen für IDs und Klassen in ihren DOM/CSS-Engines optimiert haben.

In modernen Browsern mit neueren Versionen von jQuery werden alle Selector-Strings, die von einem Browser als unterstützte CSS-Selektoren verstanden werden, von document.querySelectorAll() verarbeitet. Sie bieten maximale Leistung, solange Standard-CSS-Selektoren verwendet werden. Nicht standardmäßige Selektoren oder ältere Browser werden von jQuery und/oder der Sizzle-Bibliothek verwaltet, die ihr Bestes tun, um die DOM-Methode mit den DIM-Elementen zu verwenden.

Beachten Sie vor allem, dass die Leistung von Browser (Version) zu Browser (Version) aufgrund unterschiedlicher DOM-Implementierungen variieren kann. Zumindest glaube ich, dass es so ist.

7
BoltClock

Die ID wird immer am schnellsten sein, da sie auf der Seite eindeutig ist. Die Klasse "ist" möglicherweise schneller als ein Attribut, hängt aber davon ab.

Der eigentliche Kicker ist die Auswahl einer Klasse innerhalb und die ID darf NICHT schneller als die Auswahl der Klasse sein. Das hängt von der Seite und vom Browser ab. In meinen Tests, Auswahl einer komplexen Seite mit einer begrenzten Anzahl von Elementen mit einer "Klasse", wobei das übergeordnete Element des Klassenelements eine ID wie die folgende hatte:

<div id='iamout'>
  <div class='aonther'>
    <div class='iamin'>stuff</div>
    <div class='iamin'>stuff</div>
  </div>
</div>

ein Selektor wie $('.iamin','#iamout') war nicht immer so schnell wie $('.iamin')

Nicht alle Browser unterstützen select nach Klassennamen (nativ), aber moderne/neuere Browser bieten eine bessere Leistung, je nachdem, welchen Browser Sie verwenden.

Wenn Sie eine optimale Leistung benötigen, müssen Sie Ihre genaue Seite testen.

2

Die ID ist am schnellsten, da es das einzige Element ist, das diese Kennung enthalten kann. Viele Objekte können möglicherweise denselben Klassennamen haben. Jemand könnte dies überprüfen, aber es scheint, als müsste das Dokument nicht weiter durchsucht werden, sobald die ID gefunden wurde. Für Klassen ist dies möglicherweise nicht der Fall? HTH

0
webtrifusion