IE6 Performance-Probleme mit dem Hinzufügen von Klassennamen auf mehreren Elementen (jQuery tableHover Plugin)

StackOverflow https://stackoverflow.com/questions/1402617

Frage

In einer Anwendung schreibe ich, dass verwendet eine große HTML-Tabelle von Zahlen das Design erfordert, dass die Zeile und Spalte der Zelle hovered werden hervorgehoben.

ich für dieses Projekt mit jQuery 1.3.x alle JS entwickeln, und ich fand die tableHover Plugin, das tut genau das, was ich brauche.

Aber:

auf IE6 die Leistung dieses Plugin abfällt als die Anzahl der Zellenelemente zu einem Punkt ansteigen, wo die Seite fast nicht reagiert.

dachte ich, dass die Probleme im Plugin liegt und ich schrieb es tatsächlich von Grund auf neu gesamte Funktionalität ist, nur um zu entdecken, dass ich die gleichen Performance-Probleme haben.

Nach dem Debuggen von Code Ich weiß jetzt, dass eine große Menge von Elementen der Auswahl und Anwendung von classname ( jQuery.addClass () ) ist extrem langsam auf IE6.

Ich habe versucht, zu verwenden jQuery.css () , anstatt nur mit background-color , die Leistung ist besser, aber wieder, wenn die Anzahl der Tabellenzellen steigen die Leistung einen unbrauchbaren Zustand fällt auf, und auf allen anderen Browsern die Leistung von jQuery.css () ist viel langsamer als jQuery.addClass () .

Das Hauptproblem hier ist, dass es zu einer Tabellenspalte keine gemeinsame Mutter ist, so um eine Spalte braucht man, um Stil die gesamte Tabelle zu durchlaufen, jede Zeile auswählen und dann das Recht finden n-Kind td . meine jQuery-Code für diese sieht wie folgt aus: 

//col_num is the current td element
//table is the parent table    
var col_num = cur_cell.prevAll().length + 1;
var this_col = $('tr td:nth-child(' + col_num + ')', table);

Ich werde nicht meinen gesamten Code hier einfügen, weil es für die Frage irrelevant ist. Die einzige Antwort, die ich bin auf der Suche nach ist: Gibt es ein bekanntes Verfahren zu tun, was ich in einem besseren Performance-Marge muß? Ich bin nicht auf der Suche nach „Chrome“ Leistung und Geschwindigkeit, nur etwas schneller als „nicht ansprechbar“.

Thnaks

Tom.

War es hilfreich?

Lösung

Ich habe mit Leistung komplexen jquery auf sehr große Tabellen in IE6 behandelt. Hier ist, was ich Ihnen in Bezug auf die Hilfe anbieten können:

  • kodieren so viel Daten im html wie möglich. beispielsweise kodieren die Zeilennummer und Spalte Zahlen in der TDs Klasse oder Attribut name
  • eine Maus Zuhörer auf die gesamte Tabelle hinzufügen und dann event.target verwenden, um die TDs zu bekommen
  • analysieren, die Position der Zelle, die Sie bilden Punkt # schweben 1
  • wieder, werden Sie wahrscheinlich eine Tonne Klassen hinzufügen müssen, aber eine Klasse für jede Spalte und jeder Zeile, dass die Art und Weise Sie sowohl ganze Zeile und ganze Spalte mit 2 Klassen-Selektoren wählen können, und fügen Sie CSS ihnen
  • Cache so viel wie möglich . wenn der Benutzer von einer Zelle zur anderen bewegt, überprüfen, ob seine in einer Reihe haben Sie bereits markiert. Ich denke, das so ziemlich garantiert passieren, so dass Sie 1/2 der Wähler Operationen haben
  • Cache ganze Spalten, die Sie ausgewählt haben, so dass Sie nicht zweimal wählen, gleiche für die Zeilen
  • Aktivieren Sie diese Ansprechbarkeit out Plugin ich schrieb, können Sie es benutzen.
  • auch, gibt es eine andere Post schrieb über das Thema schnell jQuery Plugins zu schreiben.

Andere Tipps

Reduzieren Sie die Anzahl der Klassenname Änderungen und anschließender Rückflüsse durch die CSS-Matching-Engine des Browsers lassen die Arbeit für Sie tun. Zum Beispiel für eine 3x3 Tabelle: 

<style type="text/css">
    .sel-row-0 .row-0 td, .sel-row-1 .row-1 td, .sel-row-2 .row-2 td,
    .sel-col-0 .col-0, .sel-col-1 .col-1, .sel-col-1 .col-1 {
        background: red;
    }
</style>

<table id="foo">
    <tr class="row-0">
        <td class="col-0">a</td>
        <td class="col-1">b</td>
        <td class="col-2">c</td>
    </tr>
    <tr class="row-1">
        <td class="col-0">d</td>
        <td class="col-1">e</td>
        <td class="col-2">f</td>
    </tr>
    <tr class="row-2">
        <td class="col-0">g</td>
        <td class="col-1">h</td>
        <td class="col-2">i</td>
    </tr>
</table>

Alles was Sie jetzt tun müssen, ist gesetzt classname auf der äußeren Tabelle „sel-Reihe- (num) sel-COL- (num)“ und alle Zellen auf einmal aktualisieren, die viel schneller sein wird als Looping und Einstellung Klassen.

Für eine sehr große Anzahl von Spalten / Zeilen der Datenmenge im Stylesheet können unhandlich. Sie können dynamisch, um dies ein wenig erhalten, indem die Regeln im Stylesheet durch die document.styleSheets Liste zu ändern, aber dies dauert einige Cross-Browser-Arbeit, die jQuery werden Ihnen nicht helfen. Oder für eine Tabelle mit, sagen wir, viele Zeilen, aber nur wenige Spalten können Sie die ausgewählte Reihe Klasse setzen direkt auf die Zeile, und nur die Spalte tun, um diese Art und Weise hervorheben, die nach wie vor nur 2-3 Klassenänderungen.

(Es wäre schön, wenn wir den CSS3 n-te-Kind-Selektor verwenden könnten, wie Sie in dem jQuery-Selektor tun, aber Browser-Unterstützung ist noch nicht da.)

Ich frage mich, ob für eine bessere Ansprechbarkeit von jQuery bei der Suche, die Sie nicht den Wald vor lauter Bäumen nicht sehen?

Warum Sie kein <colgroup> Element an der Spitze der Tabelle enthalten (entweder explizit oder, falls erforderlich, durch sie dynamisch mit jQuery Hinzufügen) und dann eine Hintergrundfarbe Wert der Spalte zuweisen Ihrer ausgewählten Zelle Sions

IE6 funktioniert das <colgroup> Element unterstützen, aber nur in begrenzten Eigenschaften. Allerdings Hintergrund-Farbe ist einer von denen getragen, so sollte dies eine deutliche Verbesserung Ihrer Leistung sehen.

Ich hätte dies bemerkt - ich bin eine viel bessere CSS / HTML-Entwickler als ein Javascript ein, habe ich versucht, alle nicht-Skript Methode, die ich kenne, bevor sie in JS Graben

.

Ich begann tatsächlich von colgroup , ich benutze es auch für Spaltenbreiten auf derselben Tabelle, aber die colgroup und col Elemente sind so eingestellt visuell hinter den Tabellenelementen, so dass, wenn tbody , tr , td oder ein anderes Element in der Tabelle einen Hintergrund hat (was in meinem Fall, viele von ihnen hat), colgroup werden diese Elemente nicht zeigen über, und es reagierte nicht auf die Positionierung oder andere erweiterte CSS-Manipulation ich auf sie anzuwenden versucht.

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top