Ich arbeite an einer Webanwendung, die auf C # / ASP.NET entwickelt wurde. Wir verwenden Steuerelemente von Drittanbietern, um Grids, Tabs, Trees und andere komplexe Steuerelemente auf unseren Seiten anzuzeigen. Das Problem ist, dass diese Steuerelemente eine große Menge an HTML rendern. Aus diesem Grund ist die Seitengröße stark angewachsen und der Browser braucht eine Weile, um eine Seite zu laden. Ich möchte einige allgemeine Techniken finden, um HTML-Rendering in einem Browser (Internet Explorer, Firefox, etc.) schnell zu machen.
Beachten Sie, dass auf allen Seiten ViewState deaktiviert ist.
Es gibt eine Firefox-Erweiterung, YSlow ( Ссылка ), die jede Webseite analysiert und die spezifischen Änderungen auflistet Verbessere die Geschwindigkeit. Einige der Änderungen, die es vorschlägt, beziehen sich auf den Webserver, nicht auf den Inhalt des HTML, aber es ist trotzdem sehr hilfreich.
Screenshot von der YSlow Webseite:
alt text http://us.i1.yimg.com/us. yimg.com/i/rt/yslow/perfview.png
gzip das HTML - wird nicht die Rendergeschwindigkeit erhöhen, aber wird die Seitengröße massiv reduzieren.
Stellen Sie sicher, dass Sie kein tabellenbasiertes Layout verwenden, und stellen Sie sicher, dass Javascript oder CSS, das verwendet wird, minimiert, gezippt und im Kopf verlinkt ist, damit es zwischengespeichert werden kann.
Öffnen Sie Ihre normalen Seiten, geben Sie diese in die URL ein und drücken Sie die Eingabetaste:
%Vor%(Sie können es sogar als Bookmarklet speichern)
Wenn Sie über 500 Tags haben, möchten Sie wahrscheinlich nach Möglichkeit etwas von der "Tag-Suppe" entfernen.
Digg's Homepage wiegt ungefähr 1.000 Tags! daher ist es sehr langsam (erstmalig) zu rendern
MSN's Homepage wiegt ungefähr 700+ Tags ... ist also ziemlich langsam zu rendern
Yahoos Homepage wiegt etwa 600 Tags ... und rendert so schneller
Googles Homepage wiegt rund 92 Tags! ... macht also blitzartig!
Bei Steuerelementen von Drittanbietern können Sie den Support dort nur ausbremsen, um die Leistung zu verbessern.
Aber beim Codieren können Sie mehrere Techniken verwenden. Ein Schlüssel ist zu verstehen, dass JavaScript-DOM-Aufruf viel langsamer als HTML-Parsing sind. Wenn Sie also innerHTML="...." mit Tausenden von Zeilen setzen, wird es im Vergleich zum Rendern über document.createElement () -Aufrufe in einer Schleife extrem schnell sein.
Hier sind Tipps von MSDN:
Komprimieren Sie den HTML-Code mithilfe eines Drittanbieter-Tools oder mithilfe der integrierten IIS6-Komprimierungsoption ( Microsoft TechNet ).
Werten Sie die Steuerelemente von Drittanbietern aus, um festzustellen, ob sie erforderlich sind. Wenn dies der Fall ist, schreiben Sie Ihre eigenen für Ihre eigenen Bedürfnisse und / oder verwenden Sie ihre Steuerelemente, wenn sie "AJAX-fähig" sind. Die beliebtesten Steuerelemente von Drittanbietern verfügen über AJAX-Funktionen und ermöglichen das Auffüllen der Daten nach dem Laden der restlichen Seite, was dem Benutzer einen gewissen Fortschritt anzeigt.
Deaktivieren Sie ViewState , wenn es nicht benötigt wird. Wenn Sie Steuerelemente von Drittanbietern verwenden, kann ViewState sehr groß werden.
Update: Ich habe darüber bei Ссылка
Die Komprimierung beschleunigt das Rendern überhaupt nicht, es beschleunigt lediglich die Bereitstellung von Inhalten.
Ich würde empfehlen, eine Art "Profiling" zu machen - mache eine Testseite mit einer Menge von irgendwelchen deiner HTML-Objekte (wie Tabellenzeilen oder einem gewöhnlichen div-Container) - und benutze dann Plugins wie YSlow, um zu testen, wie viel Zeit, die benötigt wird, um zum Beispiel 10K solcher Elemente zu rendern. Nach dem Profiling sehen Sie den eigentlichen Rendering-Flaschenhals ..
Übrigens, das Problem besteht möglicherweise darin, Inhalte zu liefern und nicht zu rendern. YSlow wird auch zeigen, wo es ist. Sie können auch einige visuelle Tools verwenden, um die Ladegeschwindigkeit der Website zu überprüfen, z. B. Ссылка
Ich würde mir den Viewstate der Steuerelemente auf der Seite ansehen. Sie sollten es, wenn überhaupt möglich, deaktivieren, da es serialisiert (und Base64-codiert, denke ich) und in die Seite gefüllt wird. Wenn Sie die Daten in den Steuerelementen für jedes Post-Back aktualisieren, sollten Sie in der Lage sein, ViewState sicher zu deaktivieren und wahrscheinlich einen guten Teil der Bandbreite zu speichern.
Wenn das Problem bei der Steuerung selbst liegt, suchen Sie vielleicht nach einem neuen Anbieter. Ich bin mir bewusst, dass dies eine Reinvestition in Zeit und Geld bedeuten würde, aber ich muss möglicherweise für die nächste große Überarbeitung eingereicht werden, wenn Sie das gewünschte Ergebnis mit den zuvor genannten Komprimierungsmethoden nicht erzielen können.
Und denken Sie daran, setzen Sie EnableViewstate auf false, wo Sie können
Um das Rendern von Rastern zu beschleunigen, verwenden Sie den Rastersuchlauf.
Grid-Paging wird weniger Rendering durch Reduzierung der Anzahl der angezeigten Gitternetzlinien verursachen.
Wir beginnen in der Regel mit 50 Zeilen pro Seite und legen die Anzahl der Gitter als Systemparameter fest, die nach der Bereitstellung leicht verringert oder erhöht werden können.
Bei der Verwendung von ASP.NET-Standardsteuerelementen wurde außerdem festgestellt, dass sie schneller sind, wenn CSS-Steueradapter verwendet werden. CSS-Steueradapter
Ich würde dringend empfehlen, sich die Yahoo CSS & amp; JavaScript Compressor , die nicht nur Ihre CSS & amp; JavaScript-Dateigrößen, aber auch alle Fehler & amp; mögliche Duplizierung in Ihrem Code. Ein absolutes Muss in jeder Toolbox eines Webentwicklers.
