Wie vermeidet man die Performance-Kosten von Überlauf: versteckt?

Zu Ihrer Information: Ich habe auf dem iPad / iOS auf dieses Problem gestoßen, was zu Leistungsproblemen bei einer Seite mit ungefähr hundert Zeilen in einer Tabelle mit Tabellenlayout führte: behoben.

Sobald eine Zelle oder ein div in einer Zelle ein Attribut erhält, das sie dazu zwingt, die Zelle einzeln zu zeichnen, dauert es etwa 300 ms anstatt 100 ms zu zeichnen (was dazu führt, dass sich die Benutzeroberfläche für meine Situation abgrundtief verlangsamt) ).

Eine der beiden Eigenschaften ( position:relative oder overflow:hidden ) verursachte das Problem für mich, das Entfernen der Dateien optimierte die Geschwindigkeit, verursachte aber einen Textüberlauf, wenn der Zellentext zu breit für die Spalten mit fester Breite war.

Die Verlangsamung trat auch nach dem Zeichnen von Tabellen auf, weil ich dynamisch ein absolutes div über den Tisch platziere. Beim Profiling des Javascript (mit (new Date).getTime() ), die Verlangsamung gemessen an Orten im Javascript, die nichts mit der Tabelle zu tun haben.

[edit: Folgende als Teillösung hinzugefügt]

1. Setzen Sie den gesamten Zelleninhalt in ein span -Element (also kann offsetWidth des Inhalts und nicht die Breite des enthaltenen Blockelements gemessen werden).
2. Nachdem Sie die Zeile in das Dokument eingefügt haben, prüfen Sie, ob jede span.offsetWidth größer als die Spaltenbreite ist. Wenn dies der Fall ist, fügen Sie dem Stil (oder über eine Klasse) des umgebenden Blocks den "overflow: hidden" hinzu >
3. Kann bei einigen Spalten 1 und 2 überspringen (wenn bekannt ist, dass der Zelleninhalt niemals abgeschnitten werden muss).

Vorbehalte:

1. Messungen nur für iOS5 Safari gemacht (ich habe keinen anderen Browser profiliert).
2. Funktioniert für uns, weil wir Tabellenzeilen dynamisch erstellen (die Verarbeitung Ihres Beispiels mit JavaScript wäre langsam?).
3. Die meisten Zellen für unsere Daten sind nicht überlaufen (Clipping ist nur spärlich erforderlich - nur eine begrenzte Anzahl von Zellen).
4. Kompromittierte anfängliche Seitenladung (die Generierung der Tabelle in der Seite ging von 80 ms bis 800 ms).
5. Aber beschleunigtes dynamisches Combo-Popup (340ms bis 130ms), was eine wesentlich bessere Reaktion der Tastatur ermöglicht.

Für Ihre Situation könnte es schnell sein, zunächst Spalten mit variabler Breite zu verwenden, offsetWidth aller Spalten zu messen, Spaltenbreiten auf Pixelbreiten zu setzen und Überlauf zu setzen: nur in Spalten versteckt, in denen offsetWidth der Spalte größer ist als die Pixelbreite Verwenden für die Spalte.

Sie könnten versuchen, einen gekachelten Ansatz zu verwenden. Es ist ein ziemlich typischer Ansatz, Dinge wie unendlich side-scrollbare Spiele effizient zu machen.

Legen Sie alle Ihre Daten in ein Javascript-Array und dann N + 1 Zeilen in einer Tabelle, die N Zeilen sichtbar hat. Wenn Sie nach unten scrollen, wird das letzte Element in die Ansicht verschoben. In dem Moment, in dem Sie weit genug geblättert haben, dass das erste Objekt aus der Sicht verschoben wird, verschieben Sie alle Daten eine Zeile nach oben und setzen die Bildlaufposition zurück an die Stelle, an der sie begonnen hat. Richtig ausgeführt, wäre die Verschiebung für den Benutzer vollständig transparent. Sie würden immer nur mit N + 1 Zeilen in einer N-Zeilen-sichtbaren Tabelle arbeiten.

Ich habe das schon vorher gemacht, aber unter sehr spezifischen Einschränkungen für die Benutzeroberfläche. Ich verschließe den Gedanken, dies mit den eingebauten Browser-Bildlaufleisten und dergleichen konsistent zu machen.