webentwicklung-frage-antwort-db.com.de

Langsame Antwort, wenn die HTML-Tabelle groß ist

Ich arbeite an einer Webapp für das Produktdatenmanagement, in der die Produktdaten in einer Tabelle mit 4 Spalten (Indexnummer, Artikelnummer, Produktbeschreibung und Lagerbestand) angezeigt werden.

Das Problem, vor dem ich stehe, ist, dass die Seite sehr verzögert ist, als die Tabelle sehr groß wurde (> 1000 Zeilen), besonders wenn ich über einer Zeile schwebe (ich habe tr:hover im CSS definiert).

Ich habe versucht, dieses Problem zu beheben, indem ich die Daten teilweise anzeigte und mehr lud, wenn der Benutzer einen Bildlauf nach unten durchführte, indem ich Javascript verwendete:

if (tablesDIV.scrollTop> = tablesDIV.scrollHeight - (tablesDIV.clientHeight + 80)) {
  /*...*/
}

Es gab gute Ergebnisse, aber dies verhindert das Erreichen der letzten Reihe durch Drücken von Endund wenn eine signifikante Anzahl von Zeilen geladen wurde, war die Seite erneut verzögert.

Gibt es eine Lösung für dieses Problem?

EDIT: Der CSS-Code für die Tabelle.

#tables thead th{border-bottom:1px solid #CCC;background-color:#F5F5F5;background-image:-webkit-gradient(linear,left top,left bottom,from(#F5F5F5),to(#F1F1F1));background-image:-moz-linear-gradient(top,#F5F5F5,#F1F1F1);background-image:-o-linear-gradient(top,#F5F5F5,#F1F1F1);background-image:linear-gradient(top,#F5F5F5,#F1F1F1);font-weight:700;cursor:default}
#tables tbody th{font-weight:700;text-overflow:none}
#tables tbody tr{background:#FFF;cursor:pointer}
#tables tbody tr:nth-child(even){background:#F8F9FC}
#tables tbody tr:hover{background:#CDE}

EDIT2: Demo.

Demo: http://jsfiddle.net/4dpGz/

20
Fong-Wan Chau

Das Erste, was die Schleife verlangsamt, ist .insertRow(). Sie tun dies oben in Ihrer Schleife und fügen dann Zellen hinzu. Nachdem die Zeile hinzugefügt und jede Zelle hinzugefügt wurde, führt der Browser Layoutberechnungen durch. Verwenden Sie stattdessen .createElement() und dann .appendChild() am Ende Ihrer Schleife.

Demo: http://jsfiddle.net/ThinkingStiff/gyaGk/

Ersetzen:

row = tableContent.insertRow(i);

Mit:

row = document.createElement('tr');

Und füge dies am Ende deiner Schleife hinzu:

tableContent.tBodies[0].appendChild(row);

Dadurch wird das Problem mit der Ladegeschwindigkeit gelöst. Für den Hover gibt es viel zu viele CSS-Regeln, die Ihre tr- und td-Elemente mit Tag-Selektoren beeinflussen. Ich habe einige entfernt und bei einigen Klassen verwendet, und das Hervorheben des Schwebefluges ist viel schneller. Insbesondere habe ich festgestellt, dass overflow: hidden auf den td-Elementen ihn erheblich verlangsamt hat. Erwägen Sie, einige Ihrer Regeln zu kombinieren, einfachere Selektoren zu verwenden und den Elementen Klassen hinzuzufügen, um die CSS-Verarbeitung zu beschleunigen. Im Hover-Modus müssen viele Dinge von der Layout-Engine neu berechnet werden, und je weniger CSS-Regeln, desto besser. Ein Beispiel, das ich in Ihrem Code sah, war #tables tbody tr, wenn sich nur eine tbody in der Tabelle befand. #tables tr hätte ausgereicht. Besser als beide ist eine Klasse. Ich habe .row in meiner Demo verwendet.

Best Practices aus Google Page Speed ​​

  • Vermeiden Sie Nachkommen-Selektoren: table tbody tr td
  • Vermeiden Sie redundante Vorfahren: body section article (body wird nie benötigt)
  • Vermeiden Sie universelle (*) Selektoren: body *
  • Vermeiden Sie Tag-Selektoren als Schlüssel (ganz rechts): ul li
  • Vermeiden Sie untergeordnete oder benachbarte Selektoren: ul > li > a
  • Vermeiden Sie übermäßig qualifizierte Selektoren: form#UserLogin (# ist bereits spezifisch)
  • Machen Sie Ihre Regeln so genau wie möglich (Klasse oder ID).
20
ThinkingStiff

Wie in jedem HTML-Element in Chrome, fügen Sie "transform: rotateX (0deg);" Das Tabellenelement zwingt die Hardwarebeschleunigung zum Einschwingen, wodurch das Scrollen erheblich beschleunigt wird (wenn dies der Fall ist).

5
Javier Guerrero

wenn Ihre Tabelle reguläre Spalten enthält (ohne Colspan und/oder Rowspan), können Sie die Renderzeit etwas verbessern, indem Sie die table-layout:fixed-Eigenschaft verwenden:

MDN: https://developer.mozilla.org/de/CSS/table-layout

Bei der "festen" Layoutmethode kann die gesamte Tabelle gerendert werden, nachdem die erste Tabellenzeile heruntergeladen und analysiert wurde. Dies kann die Renderzeit bei der "automatischen" Layoutmethode beschleunigen, der nachfolgende Zelleninhalt passt jedoch möglicherweise nicht in die angegebenen Spaltenbreiten.

4
fcalderan

Tabellen müssen heruntergeladen und vollständig gerendert werden, bevor sie angezeigt werden. Die Anzeige scheint länger zu dauern. Dieser Ablauf ist abhängig von der Rechenleistung:

Sind große HTML-Tabellen langsam?

Für die Anzahl der Reihen, die Sie haben, bin ich überrascht, dass Sie eine spürbare Verzögerung feststellen, obwohl Sie von hier aus ein paar Dinge ausprobieren können, die uns helfen, Ihnen zu helfen:

  • farbverlaufshintergründe entfernen (da sie vom Browser gerendert werden)
  • formulardaten paginieren
  • ausgabeformzeilen in Blöcken (z. B. jeweils 200 Zeilen)
  • hilft das Entfernen aller CSS-Dateien?
  • geben Sie eine genaue Breite + Höhe für Tabellenzeilen und Zellen an
2
paulcol.

Wenn Sie mit sehr großen Tabellen arbeiten (z. B. 5000 oder sogar 500.000 Zeilen), empfehle ich ein kleines Plugin mit dem Namen Clusterize . Sie brauchen nicht einmal jQuery, um es zu benutzen. Die Idee ähnelt lazy loading images und funktioniert in der Praxis sehr gut.

2
thdoan

Ich finde, wenn man eine große Tabelle in ein div setzt, ist es am besten, setTimeout zu verwenden. Dies scheint es in Chrome erheblich zu beschleunigen, wenn die Tabelle zuerst in einer globalen Variable gespeichert und dann in einem setTimeout aufgerufen wird. 

setTimeout("setTable(tdata)",1);

function setTable(d) {
        $("#myDiv").html(d);
}

Prost! B55

0
b55