Wie beschleunigt man die Seite mit vielen Tabellenzellen?

In meinem Projekt habe ich eine Tabelle mit 24 * 6 * 300 Zellen auf einer Seite (es ist Skript zum Rendern der Statistiken) - 24 Spalten für Stunden * 6 Spalten für 10 Minuten * 300 Zeilen. Jede Zelle hat ein angeheitertes Popup mit zusätzlichen Informationen. Das Problem ist, es ist sehr, sehr langsam. Nicht nur das Rendering, sondern auch die Arbeit mit der Seite. Was empfehlen Sie, wenn ich es beschleunigen möchte? (Ersetzen von Zellen mit divs mit ul die Tabelle als Bild-Rendering und imagemap für Hover-Effekt zu benutzen???)Wie beschleunigt man die Seite mit vielen Tabellenzellen?

Quelle

2012-04-05 Mejmo

Wie zerreißt du es? in einer Schleife –

Ja. Aber das Rendering ist nicht das größte Problem. Nach dem Rendern reagiert der Browser sehr langsam. – Mejmo

Wie werden die Popups realisiert? Meine Vermutung ist, dass nicht die Tablecells als solche, sondern gebundenes javaScript für jede Zelle das Problem ist – cypherabe

Hier ist mein Rat:

1. Paginate und/oder entfernen Unordnung

Vielleicht könnten Sie pro Seite nur eine Stunde Daten anzeigen? Vielleicht könnten Sie nur grundlegende Informationen auf dem Bildschirm vereinfachen und anzeigen und ein umfassenderes Ergebnis liefern, wenn der Benutzer es speziell anfordert?

2. Entfernen CSS3 Styling

Text Schatten, Transformationen, usw. viel CPU nehmen. Entfernen Sie sie, wenn sie einen wesentlichen Einfluss auf die Leistung haben. Meiner Meinung nach eine bessere Seite ist die eine, die schnell und hässlich ist als die, die ist schön und extrem sllllloooooooowwwww ...

3. JavaScript auf Seite ??

Pinpoint Lecks, optimieren, Refaktor.

Hmmm ... noch etwas?

Quelle

2012-04-05 12:49:39 Oleg

'Meiner Meinung nach ist eine bessere Seite die, die schnell und hässlich ist als die, die schön ist und extrem sllllloooooooowwwww ...': +1 dass! – DaveRandom

Ich erwarte, dass Sie keine 43200 Objekte im sichtbaren Bereich des Browsers anzeigen. Ziehen Sie in Betracht, Zeilen auf dem Benutzer-Scroll-Ereignis hinzuzufügen und zu entfernen, die sich momentan nicht im sichtbaren Bereich befinden.

Quelle

2012-04-05 12:50:09

Keine schlechte Idee, solange Sie die entfernen, die ebenfalls verschwunden sind. Möglicherweise sehr kompliziert zu schreiben, aber es könnte funktionieren ... – DaveRandom

Sie können riesige Datentabellen auf sympatische Weise machen jqGrid

Quelle

2012-04-05 12:58:55 skafandri

Es verwenden scheint, wie Sie besorgt über bestimmte DOM-Elemente sind mehr Speicher/Prozessor intensiv. Es kann in Ihrem Fall wahr sein, dass Sie mit einem oder zwei extra Elementen enden können, indem Sie Tabellen anstelle von div verwenden. Aber um das gleiche funktional und visuell zu erreichen, würden Sie am Ende in ein Durcheinander geraten, das schnell unhaltbar wird. Sie würden ein ganzes Durcheinander von CSS und vielleicht etwas JavaScripting benötigen, um es zum Laufen zu bringen. Ganz zu schweigen davon, dass es semantisch bedeutungslos wäre. Tabellen sind für Tabellendaten, wie das, was Sie haben.

Jetzt könnten Sie verrückt werden und versuchen, von Grund auf neu zu programmieren, oder Sie könnten eines der vielen Tools verwenden, um die Arbeit zu erledigen. Ich schlage vor, die harte Arbeit anderer Leute zu nutzen und ein frei verfügbares Werkzeug zu verwenden. Erwägen Sie die Verwendung von Data Tables. Sie werden wahrscheinlich eine Art Paginierung oder "unendliches Scrollen"/Lazy-Loading-Lösung benötigen. Data Tables wird mit einem zusätzlichen 'Scroller' geliefert, der das unendliche Scrollen für Sie übernimmt.

Viel Glück.

Quelle

2012-04-05 13:22:07 hradac

Wie beschleunigt man die Seite mit vielen Tabellenzellen?

Antwort

Verwandte Themen