Effizienter jQuery sort-Methode für DOM-Elemente, basierend auf numerischen Attribut

Habe ich einige einfache jQuery geschrieben zu Sortieren, einige Elemente, basierend auf einem numerischen Attribut, wie dargestellt, an http://jsfiddle.net/MikeGrace/Vgavb/

//get array of elements
var myArray = $("#original div");

//sort based on timestamp attribute
myArray.sort(function (a, b) {

    //convert to integers from strings
    a = parseInt($(a).attr("timestamp"), 10);
    b = parseInt($(b).attr("timestamp"), 10);

    //compare
    if(a > b) {
        return 1;
    } else if(a < b) {
        return -1;
    } else {
        return 0;
    }
});

//put sorted results back on page
$("#results").append(myArray);

Es funktioniert gut, aber ich glaube nicht, dass es skaliert werden, da insgesamt 185 jQuery-Aufrufe, 184 von denen, die immer das Attribut eines Elements zu tun, der Vergleich.

Was ist ein effizienter Weg, dies zu tun Sortierung mit jQuery?

InformationsquelleAutor Mike Grace | 2010-12-21
  1. 6

    Wenn Sie besorgt über die Leistung, und sicher wissen, wo das Attribut kommt, können Sie die DOM-Methoden direkt, .getAttribute() in diesem Fall:

    a = parseInt(a.getAttribute("timestamp"), 10);
b = parseInt(b.getAttribute("timestamp"), 10);

    Sie können den test hier den Unterschied, wie Sie sehen, es ist mehr als nur ein wenig Geschwindigkeit zu steigern, .attr() hat eine viel zusätzliche Arbeit intern, letztlich aufrufen .getAttribute() sich in diesem Fall sowieso.

    • Dies ist noch immer das abrufen der attribute für jedes element. Gibt es eine Möglichkeit, damit ich nicht haben, um das Attribut für jeden Vergleich?
    • Sie könnte in einer Schleife durch und speichern Sie jeden in ein Objekt anzeigen, ja...aber ist das effizienter? Sie müssten, um zu testen, dass die iteration über die Elemente würden nicht frei sein, man müsste vergleichen Sie die Kosten...immer testen!
    • Gnade Sie nur Ihre eigene Frage beantwortet. Holen Sie sich die Attribute einmal, speichern Sie Sie als Teil eines array-von {timestamp, jquery}, Sortierung nach dem Zeitstempel.
    InformationsquelleAutor Nick Craver
  2. 4

    Wenn Sie brauchen, um zu tun, viele Sortier-immer wieder, würde es gut sein, hin zu einem mehr einheitlichen Ansatz, der nicht um jQuery. Ansonsten gibt es wirklich nicht viel, der ist gehen, um einen spürbaren Unterschied.

    Hier sind einige tests, versuchen ein paar verschiedene Ansätze -> http://jsperf.com/jquery-sort-by-numerical-property/2

    • Meinst du einen einheitlichen Ansatz, wie die Lösung Nick Craver gepostet?
    InformationsquelleAutor Mike Grace
  3. 3

    Mit jQuery 1.6 Daten() viel schneller.

    Erste:

    Die Daten - Attribute gezogen werden, in der ersten Zeit der data-Eigenschaft zugegriffen wird und dann nicht mehr eingesehen oder mutiert (alle Daten Werte werden dann intern gespeichert in jQuery).

    Bedeutet dies den Zugriff auf die spezifischen Daten, Wert nach dem ersten ist intern, so dass keine DOM-lookup noch das Parsen der Wert muss getan werden.

    Zweite:

    Jeder versucht zu konvertieren den string in eine JavaScript-Wert (dies beinhaltet booleans, zahlen, Objekte, arrays und null). Der string-Wert "100" umgewandelt, um die Zahl 100.

    Nun, dass der Wert wird intern gespeichert als Zahl, es muss nicht analysiert werden, jedes mal entweder.

    Html

    <div id="original">
  <div data-timestamp="99">99</div>
  <div data-timestamp="999">999</div>
  <div data-timestamp="12">12</div>
  <div data-timestamp="11">11</div>
  <div data-timestamp="10">10</div>
  <div data-timestamp="9">9</div>
  <div data-timestamp="8">8</div>
  <div data-timestamp="7">7</div>
  <div data-timestamp="6">6</div>
  <div data-timestamp="5">5</div>
  <div data-timestamp="4">4</div>
  <div data-timestamp="3">3</div>
  <div data-timestamp="2">2</div>
  <div data-timestamp="1">1</div>
  <div data-timestamp="9999">9999</div>
</div>

    Javascript

    //sort based on timestamp attribute
myArray.sort(function (a, b) {

    //convert to integers from strings
    a = $(a).data("timestamp");
    b = $(b).data("timestamp");
    count += 2;
    //compare
    if(a > b) {
        return 1;
    } else if(a < b) {
        return -1;
    } else {
        return 0;
    }
});

    Update jsFiddle Beispiel

    Sicher, dass Ihre loops sind die gleichen, aber viel weniger Bearbeitung pro Schleife.

    • Cool! Vielen Dank für Ihre Antwort und Erklärung.
    InformationsquelleAutor Erik Philips
  4. 2

    Für was es Wert ist, ich glaube nicht, dass Sie aufrufen müssen, die langsam parseInt:

    a = parseInt($(a).attr("timestamp"), 10);
a = +$(a).attr("timestamp");

    Wenn Ihr Attribut timestamp ist wirklich nur eine Zahl, ich denke, diese ergeben den gleichen Wert.

    InformationsquelleAutor sdleihssirhc
  5. 1

    Wenn Ihr Vergleich-Funktion ist teurer, als die standard-Methode ist die schwartzian-Transformation (gesehen in einigen Kommentaren, aber ohne ein Tatsächliches Beispiel):

    1. extrahieren Sie die Sortierschlüssel in [key, object] Paare
    2. Sortieren, indem Sie mit dem extrahierten Schlüssel
    3. extrahieren Sie die ursprünglichen Objekte

    Beispiel:

    Array.prototype.schwartzian_sort = function (key_of) {
   var i;

   for (i = 0; i < this.length; ++i)
      this[i] = [key_of (this[i]), this[i]];

   this.sort (function (a, b) {
      a = a[0];
      b = b[0];

      return a < b ? -1
           : a > b ?  1
           :          0;
   });

   for (i = 0; i < this.length; ++i)
      this[i] = this[i][1];

   return this;
}

    Statt eines Vergleichs-Funktion übergeben Sie eine Funktion, die Extrakte srings oder zahlen:

    myArray.sort(function (e) {
   return parseInt ($(a).attr ("timestamp"), 10);
});

    Dies ruft parseInt und attr, die nur einmal pro element, das ist immer weniger, als wenn aufgerufen, eine Vergleich-Funktion.

    InformationsquelleAutor Marc Lehmann
Schreibe einen Kommentar