Was kann getan werden, um die IE8-Leistung für große Datenmengen zu verbessern?

Question

Ich habe eine Seite, die ca. 300 Seiten Tabellendaten anzeigt. Firefox, Chrome, Safari funktionieren alle gut, aber IE 7, 8 und 8 Compatibility view all wrech. Es dauert einige Sekunden, wenn ich versuche, einen Bildlauf durchzuführen oder die Seite nach oben/unten zu drücken.

Seitenumbruch, kleinere Datensätze und andere Vorschläge zur Benutzerfreundlichkeit funktionieren auf dieser Seite nicht. Angenommen, ich habe absolut keine andere Wahl, als all diese Daten auf einmal anzuzeigen ... Was kann ich tun, um es zu optimieren?

Die Daten werden über jQuery/Ajax geladen und das scheint zumindest teilweise hier verdächtig zu sein, denn wenn ich eine Testseite zum Rendern der Ergebnisse erstellt habe, ist es nicht langsam, aber immer noch nicht fast so bissig wie andere Browser.

Ich habe erfolgreich jQuery Plugins wie SlickGrid verwendet, um ähnliche Probleme in der Vergangenheit anzugehen, aber aus Gründen, die eine lange Zeit zu erklären, sie sind keine Option, auch mit den Micro Template Rendering-Funktionen. Ich bin hauptsächlich daran interessiert, welche Verbesserungen ich vornehmen kann, um die Leistung zu verbessern, ohne die gesamte Seite zu überarbeiten oder Lösungen von Drittanbietern einzuführen.

Wird ein vereinfachtes DOM einen großen Unterschied machen? Oder behandelt IE keine Daten, die über JavaScript/Ajax bereitgestellt werden?

Answer 1

Schwierig zu sehen ohne mehr Details oder ein Beispiel ... Wie bauen Sie den Inhalt? Es gibt einige kleine Fänge mit dem Erstellen von Tabellen-Inhalt: insbesondere Einstellung innerHTML direkt auf <table> funktioniert nicht in IE, so jQuery html() wird wahrscheinlich tun es eine lange, langsame Runde, wenn das ist, was Sie verwenden.

Aber ein Universalspitze für etwas mit Tischen, vor allem größere: den Stil table-layout: fixed auf das <table> Element gesetzt, das Setzen von Spalt width Stile auf entweder der ersten Reihe von Zellen, die nur oder auf einer Reihe von <col> s. (Spalten ohne eine explizite width teilen die verbleibende Breite gleichmäßig zwischen ihnen in einem flüssigen Layout-Situation.)

Da es nicht auf die Menge des Inhalts in jeder Zelle abhängt, fixed Tabellenlayout ist schneller und viel besser vorhersehbar als die Standard auto Tabellenlayout-Algorithmus.

Answer 2

Ich habe festgestellt, dass IE beim dynamischen Einfügen großer, komplexer Inhalte in eine vorhandene Seite viel (viel) schneller bei der Einstellung innerHTML ist als bei der programmgesteuerten Erstellung von Dutzenden oder Hunderten von DOM-Knoten und deren Einfügen Verwenden Sie eine clientseitige Bibliothek oder nicht. Wenn Sie Ihre HTML-Server-Seite rendern und als Zeichenfolge senden, anstatt JSON-Daten zu senden und Client-Seite zu rendern, verwenden Sie mehr Bandbreite, aber Ihre IE-Benutzer werden wahrscheinlich eine bessere Erfahrung haben.

IE Javascript Leistung ist derzeit ziemlich schrecklich, also, wenn Sie Ihre Website im IE schneller machen möchten, Minimierung groß angelegte DOM-Manipulation ist ein guter Anfang. Es sollte nicht zu schwierig sein, einen einfachen Testfall für einen Vergleich zu erstellen, um zu sehen, ob eine solche Änderung für Ihre besondere Situation von Vorteil ist.

Answer 3

Verwenden Sie innerHTML und minimieren Sie die js/dom-Interaktion. Js ist im IE nicht so langsam, aber die js/dom Bridge ist sehr langsam. Vermeiden Sie auch, Elemente in dem HTML-Code auszuwählen, den Sie einfügen möchten. Wenn Sie dies tun, muss jQuery jedes Element durchlaufen und mit dem Attribut id oder css testen. Das ist sehr langsam.

In sich selbst einfügen ein paar tausend Elemente im DOM in IE ist machbar.Wenn Sie jedoch Änderungen an diesem HTML-Code vornehmen, können schwerwiegende Probleme auftreten.

Darüber hinaus wird Ihr Code benötigt, um zu sagen, wie Sie es schneller machen können. Auch eine Testseite, die profiliert werden kann, wäre großartig.

FYI, das einzige Leistung Profiling-Tool für IE verfügbar ist Dynatrace Ajax-Version. Seine kostenlose und eine ausgezeichnete Qualität Software. Benutze es !

Answer 4

Achten Sie auf jQuery .find() in IE8. Wenn es nicht sorgfältig geschrieben ist, könnte es sein, dass der IE8 eine ziemlich lächerliche Gymnastik macht. Ich wünschte, ich wüsste mehr über warum, etc etc, aber wenn Sie Ihre .find() in Ihrem jQuery auskommentieren und es ausführen, obwohl Ihr Skript vorübergehend kaputt ist, sehen Sie möglicherweise, dass die Seite plötzlich schnell geladen wird.

Nur eine Vermutung, aber einfach zu versuchen.

Answer 5

1. Avoid using script that going to make changes in DOM specially inside a loop. 
     eg. 

for (var i = 0; i < rownodes.length; i++) { 
    curRow = document.createElement("tr"); // this is a direct operation to DOM 
    for(j=0 ;j <colLenth;j==){ 
    cell = document.createElement("td"); 
    } 
} 
// instead use.. 
var table = '<table>'; 
for (var i = 0; i < rownodes.length; i++) { 
    table = table + '<tr>'; // don't use DOM operation if not needed. 
    for(j=0 ;j <colLenth;j==){ 
     table = table + '<td> my text </td>'; 
    } 
} 
table = table + '</table>';// simple string operations will be much faster 
('#myDiv').append($(table));// at the end you can add it to the DOM. 

[Building High Performance HTML Pages][1] 

    [1]: http://msdn.microsoft.com/en-us/library/ms533002%28v=vs.85%29.aspx 

Answer 6

1. können auch Ihre Wiedergabe der Tabelle verbessern, indem es die Präsentation zu verbessern. Durch das Hinzufügen von colgroup wird das Rendern der Tabelle schnell (kann den Unterschied beim Arbeiten mit großen Tabellen sehen), da die Browser-Engine nicht nach einzelnen Spaltenbreiten suchen muss.

<table style="table-layout: fixed" width="600"> 
    <colgroup> 
     <col width="100"><col width="300"><col width="200"> 
    </colgroup> 
    <tr height="20"> 
     <td>ss</td> 
     <td>ss</td> 
     <td>ss</td> 
    </tr> 
    <tr></tr> 
    .... 
    ... 
</table> 

see the below link for detailed discription 

http://msdn.microsoft.com/en-us/library/ie/ms533002(v=vs.85).aspx