Ich habe ein Modul bei meiner Arbeit in JQuery entwickelt, es ist im Grunde eine Tabelle mit der folgenden Funktionalität
alles funktioniert gut auf den neuesten Browsern wie FF9.0, IE9 und Chrome, aber in älteren Browsern wie IE8 und FF3.6 wie die Anzahl der Zeilen in der Tabelle erhöht sich die Leistung der Seite erheblich reduziert . Ich habe viele Optimierung aus jQuery und DOM-Manipulation versucht, aber immer noch keinen Effekt auf die Leistung. Irgendeine Idee, wenn ich etwas oder einen Tipp verpasse, um die Leistung besser zu machen, d. H. Auf ein akzeptables Niveau.
Ich habe kein Plugin verwendet, alles ist meine benutzerdefinierte Implementierung. Die Javascript-Datei ist ziemlich groß und ich suche nach einigen allgemeinen guten Praktiken und Tipps.
Es gibt zwei Möglichkeiten, die Leistung mit großen HTML-Seiten zu verbessern: Reduzieren Sie die Anzahl der Seitenumbrüche und reduzieren Sie die Anzahl der Handler.
1. Verringern Sie die Anzahl der Seitenumbrüche
Jedes Mal, wenn Sie das DOM ändern, muss es sich neu zeichnen. Dies ist ein Reflow. Halten Sie diese auf ein Minimum, indem Sie ein String- oder DOM-Fragment mit all Ihren DOM-Manipulationen erstellen und dieses dann in Ihre Seite einfügen. Dies löst nur einen Reflow aus. Wenn Sie beispielsweise eine Tabelle hinzufügen, erstellen Sie die gesamte Tabelle mit Text und fügen Sie diese dann in einem einzigen Vorgang ein.
Mit JQuery können Sie ein DOM-Fragment wie folgt erstellen:
%Vor%Sie können Ihr Fragment auf die übliche Weise bearbeiten:
%Vor%Wenn das Fragment fertiggestellt ist, fügen Sie es zum DOM in einem einzigen Schritt hinzu:
%Vor%Sie werden nur einen Reflow auslösen und der Prozess wird um Größenordnungen schneller sein.
2. Reduzieren Sie die Anzahl der Handler
Wenn Sie in jeder Zeile viele Steuerelemente haben, sind das viele Handler. Erstellen Sie stattdessen nur einen Handler, und hängen Sie ihn an den Dokumentstamm an. Wenn er dann aufgerufen wird, überprüfen Sie das Zielattribut, um zu ermitteln, was zu tun ist. In JQuery können Sie dazu die neuen "on" -Handler verwenden oder die alten "live" -Stil-Handler verwenden.
zum Beispiel:
%Vor%Es wird nur ein Handler erstellt, der alle td click Ereignisse behandelt.
Machen Sie beides und Sie sollten eine deutlich verbesserte Leistung sehen.
Die schlechte Nachricht ist, dass Sie nicht viel tun können, da es hauptsächlich von der JavaScript-Engine im Browser abhängt.
Wenn es eine Option für Sie ist, versuchen Sie Google Chromeframe für IE8, aber auf einer öffentlichen Website, die höchstwahrscheinlich keine sehr nette Lösung ist. Aber es kann in einer Unternehmensumgebung sein, wenn Benutzer Software einfach aktualisieren können.
Sie können auch versuchen, die Tabelle im Handumdrehen zu rendern:
Ao, du hast deinen Tisch und du hast ein Array mit Informationen in Javascript (oder über Ajax), außerdem hast du Informationen darüber wo du dich in der Tabelle (Zeile) befindest und wie lange die Tabelle ist (maxrows).
Erstellen Sie dann eine Tabelle, die nur so groß wie das Ansichtsfenster ist, vielleicht ein wenig größer. Alles über und unter dem Ansichtsfenster wird von einem großen <div> oder irgendetwas, das auf die Höhe der verbleibenden Zeilen oder Zeilen vor der obersten Zeile im Ansichtsfenster gestreckt wird, behandelt.
Auf diese Weise ist zu jeder Zeit nur eine sehr begrenzte Anzahl von Dom-Knoten vorhanden. Es könnte möglicherweise die Leistung verbessern.
Wenn der Benutzer scrollt, entferne Tabellenzellen, die sich nicht mehr im Ansichtsfenster befinden (und addiere deren Höhe zum entsprechenden Whitespace-Block dieser Seite) und füge Tabellenzellen hinzu, die gerade in das Ansichtsfenster gekommen sind (entferne die Höhe aus dem Whitespace auf dieser Seite) .
Tags und Links javascript jquery internet-explorer-8