IE Rendering von dynamischem Inhalt, bis ein Stylesheet geändert wird

Question

Ich habe eine Tabelle von Daten, die dynamisch mit Javascript generiert wird. Alle paar Minuten aktualisiert die Seite die Daten, indem sie eine Ajax-Anforderung abfeuern, die Daten vom Server abrufen und die Daten in der Tabelle ersetzen. Das ist ziemlich Standard, und der Tisch endet wie folgt aussehen:.

Dies funktioniert gut, wenn ich die Daten durch das Entleeren der Tabelle erzeugen und das Hinzufügen allmählich die Zeilen wieder in jedoch diese Tabelle kann potenziell haben Tausende von Zeilen, und es kann möglicherweise so lange dauern, um die Tabelle zu generieren, die der Browser dem Benutzer ein "Dieses Skript dauert zu lange, um Fehler auszuführen". Also habe ich das behoben, indem ich die Tabellengenerierung in Stücke zerlegte und mit setInterval ein bisschen nach dem anderen tat.

Das hat gut geklappt, aber weil die Tabelle eine Weile dauern kann, um vollständig generiert zu werden, habe ich versucht, clever zu sein und eine Pseudo-Doppelpufferung durchzuführen. Ich habe eine zweite Tabelle, deren display auf none eingestellt ist, um sie zu verstecken, und wenn ich die Tabelle neu generiere, füge ich die Zeilen der versteckten Tabelle ein Stück nach dem anderen hinzu. Auf diese Weise sind die vorhandenen Daten für den Benutzer sichtbar, bis die Neugenerierung der Tabelle abgeschlossen ist. An diesem Punkt ersetzen wir sie einfach durch unseren neuen Inhalt auf einmal. Dies funktioniert gut auf Firefox, Safari und Google Chrome

ich meinen Ersatz mit der folgenden Codezeile

$("#loading_area tbody").children().appendTo($("#unplanned tbody").empty()); 

tun. Aber auf IE, erhalte ich folgendes:

Diese Zeilen sind eigentlich nicht leer - der Inhalt ist, wenn ich horizontal genug bewegen:

Es scheint, dass die erste Spalte ist über 55.000 Pixel breit! Und hier ist der wirklich komische Teil: Der Inhalt wird wieder korrekt angezeigt, sobald ich irgendetwas über den Stil des Tisches ändere. Wenn ich also die Schriftfarbe auf grün ändere, wird IE die Tabelle sofort korrekt rendern.

Aber ich kann die Änderung nicht direkt vornehmen. Also, wenn ich sage

$("#unplanned").css("color", "green"); 

dann wird es nicht richtig rendern; Die Farbe ändert sich, aber die erste Spalte bleibt 55.000 Pixel breit. Aber wenn ich die Änderung direkt in das Stylesheet übertrage, gibt es die Tabelle korrekt wieder.

So landete ich dies durch die Festsetzung oben durch einen zufälligen Stil ändern, platzieren Sie den Rand des Expand/Collapse-Taste zwischen 1px und 0px Makeln, ich jedesmal, wenn ich die Tabelle fertig Auslegen und das funktionierte.

Mein Problem ist, dass, wenn ich versuche, die Seite zu drucken, die Zeilen leer aussehen, da der Seiteninhalt nicht ordnungsgemäß auf dem Drucker gerendert wird.

Also werde ich mehr Trickerei versuchen, wahrscheinlich nur umschalten, welche Tabelle angezeigt wird und ihre id s oder was auch immer dies funktioniert zu tauschen. Meine Frage ist, was ist hier los?Dies scheint ein Fehler im IE zu sein; Ich benutze IE8, aber das Gleiche passiert bei IE6 und IE7. Ich möchte in Zukunft vermeiden, in diese Grube zu fallen, aber ich bin mir nicht sicher, was das verursacht, also bin ich mir nicht sicher, was ich vermeiden sollte. Jedes Licht, das irgendjemand auf dieses Licht werfen könnte, würde sehr geschätzt werden.

EDIT: Swapping, welche Tabelle angezeigt wird, macht das Rendering-Problem im Browser ohne einen Stylesheet-Hack verschwinden, aber das Problem mit dem Drucken ist immer noch da. Tatsächlich ist das Druckproblem auch dann vorhanden, wenn die Tabelle direkt erzeugt wird, ohne dass die Elemente angezeigt werden. Also bin ich definitiv verwirrt und nicht sicher, was ich tun kann, um dieses Problem verschwinden zu lassen. Ich muss möglicherweise eine separate, statische Seite nur zum Drucken erstellen, wenn ich das nicht herausfinden kann.

Answer 1

kann nicht sicher sagen, ohne einen Testfall, aber im Allgemeinen:

• sicher, dass Sie table-layout: fixed verwenden. IE ist schlecht im Erraten auto Spaltenbreiten, vor allem, wenn Colspans beteiligt sind. Es ist auch langsam im Erraten von Breiten, wenn es viele Reihen gibt. Nehmen Sie dies aus den Händen von IE, indem Sie explizite Größen für jede Spalte mit einem festen Tabellenlayout festlegen.

• Vermeiden Sie das Anfügen von Zeilen an große Tabellen. Wenn Sie sagen, children().appendTo() jQuery macht immer noch jedes Anhängen eines nach dem anderen, was bald sehr langsam wird. Das Beste, was Sie tun können, um Tabellenmanipulationen zu beschleunigen, besteht darin, das gesamte Los auf einmal unter Verwendung von innerHTML auf dem übergeordneten Element der Tabelle zu setzen. Natürlich kann das Vorbereiten der HTML-Zeichenkette lästig sein, wenn Sie Daten (Attributwerte und -inhalte) einfügen wollen, da sie HTML-maskiert sein müssen. Eine Problemumgehung besteht darin, alle Zeilen auf einmal mit Platzhalterwerten zu schreiben und dann bei einem zweiten Durchlauf die echten Daten über die Einstellung .data auf Textknoten usw. einzugeben. Sie müssen alle Event-Handler, die Sie auf diese Schaltflächen anwenden, auch in diesem Schritt erneut anhängen, es sei denn, Sie verwenden Live.

• Ich denke, durch die Zeilen mit innerHTML- Schreiben sollten Sie in der Lage sein, es zu beschleunigen genug des Timeout-basierter Teil Updates loszuwerden (was böse potenzielle Rennbedingungen zu haben scheint). Natürlich wäre die DOM-basierte Alternative, nur die geänderten Zeilen zu aktualisieren. Wenn Sie ein festes Layout verwenden, können Sie, da die Breiten nicht vom Inhalt abhängig sind, Ihre Tabelle nacheinander in mehrere Tabellen aufteilen.Sie sehen so aus, als wären sie eine Tabelle, aber Sie können jede Tabelle separat behandeln, indem Sie entweder innerHTML auf einmal schreiben oder die Zeilen ohne die DOM-Performance hinzufügen, die Sie durch Tausende von Zeilen in einer einzelnen Tabelle erhalten.

Answer 2

Sie könnten nur zwei tbody Elemente in Ihrer primären Tabelle haben. Einer würde für die Anzeige und der andere für die Pufferung verwendet werden. Auf diese Weise können Sie überspringen die anderen tbody und einfach display.none aus dem Puffer entfernen, um es anzuzeigen. Meine Vermutung ist, dass es ein wenig schneller sein könnte und vielleicht den Fehler im IE lösen könnte.

Eine andere Methode (Trick?) Zum Ein- oder Ausblenden von Elementen in einer Tabelle die ich gelernt habe ist position zu absolute auf einer Zeile oder tbody Einstellung, es zu verbergen, statt display zu verwenden. Das verbirgt es immer noch, aber ohne das Layout des Tisches zu verändern. Sie könnten versuchen, den Puffer zu verstecken.

Im Allgemeinen sind Tabellen eines der schrulligsten Elemente, die es gibt, sogar in den modernen Browsern. Etwas zu tun, das mit ihnen fortgeschritten ist, führt normalerweise zu diesen kleinen Kopfschmerzen, also viel Glück.

Answer 3

Haben Sie eine Breite auf dem Tisch? Es kommt mir vor, dass wenn Sie die Tabelle erzeugen, während sie ausgeblendet ist, sie nicht Dinge wie die aktuelle Browserfensterbreite aufnehmen kann, die normalerweise verwendet würde, um die Breite einer Tabelle festzulegen, so dass sie auf das Maximum zurückfällt.