So reduzieren Sie die Speicher- und CPU-Auslastung von Webseiten

<br />Einige Webseiten sehen nicht groß aus, lassen sich aber nur sehr langsam öffnen, während andere zwar sehr lange brauchen, aber reibungslos zu bedienen sind. Dies hängt vom Arbeitsspeicher und der CPU-Auslastung des Computers des Benutzers ab.
Browserprobleme werden durch die Speicherverwaltungsprobleme jedes Browsers beeinflusst, aber es gibt fast keine Möglichkeit, dies zu steuern. Unter Windows: IE-Reihe ist die Menge an Aktualisierungsrecycling nicht groß, aber durch Minimieren wird Speicher freigegeben. Firefox 2 soll auch beim Minimieren recyceln, aber ich habe noch nie so viel Müll gesehen. Es nutzt so viel wie möglich und recycelt im Grunde nicht. Es wird gesagt, dass der Ajax-Prototyp den Speicherbedarf weiter erhöhen wird. Oper ist das Beste. Immer gut unter Kontrolle. Es gibt kein Problem. .
Der Speicherzuweisungsmechanismus von Linux unterscheidet sich von dem von Win. Es wird so viel Speicher wie möglich verwendet. Wenn der Browser den gesamten Speicher belegt, kann das System abstürzen.
Seitenproblem: Der Browser verbraucht beim Rendern der Seite Speicher und CPU. Reduzieren Sie dies daher so weit wie möglich.
Verwenden Sie DocType strukturell, um dem Browser mitzuteilen, was Sie verwenden. HTML4 hat auch DTD. Vielleicht ist Transitional für Sie besser geeignet. Wenn Sie XHTML verwenden und eine gute Struktur beibehalten können, denken Sie daran, die entsprechenden MIME- und XML-Header1 auszugeben. Dadurch kann die Codeprüfung des Browsers reduziert werden, die Struktur bleibt intakt und der Browser muss Ihnen nicht beim Vervollständigen des Codes helfen. Um die Dateigröße der Seite zu kontrollieren, können Sie den Code mithilfe des Programms einrücken, um ihn angenehmer lesbar zu machen. Die Größe beträgt ebenfalls 2–3 KB. Iframe generiert eine neue Seite. Tatsächlich gibt es viele Möglichkeiten, Iframe zu ersetzen. Das eingeführte JS und CSS können ordnungsgemäß zusammengeführt werden. Das Hintergrundbild kann ebenfalls zusammengeführt werden. Manche Leute führen sogar Flash zusammen. Das Hinzufügen des Breitenattributs zum Inhaltsbild/-objekt mit bekannter Breite und Höhe kann das teilweise erneute Rendern der Seite reduzieren.
In den meisten Fällen ist die Dateigröße der einzige Unterschied zwischen einem JPG mit 99 % und 70 % Qualität. Dasselbe gilt für GIF, insbesondere kleine Symbole. Der Unterschied zwischen 256 Farben und 128 Farben ist die Dateigröße. Flash bewegt sich zu schnell und verbraucht viel CPU. Die Anzahl der Bilder pro Sekunde und der Animationseffekt können reduziert werden. Wenn die Qualität auf mittel oder niedrig eingestellt ist, werden viele Ressourcen gespart, aber der Effekt geht auf Kosten. . Manchmal ist es sinnvoller, Autolow2 oder Autohigh als Qualitätsattribut auszuwählen. Es ist nicht immer notwendig, „low“ oder „best“ zu verwenden. Flash verwendet Vektorgrafiken, um Dateigröße zu sparen, verwendet jedoch die CPU, um komplexe Grafiken und Animationen zu berechnen. Zu viele komplexe Filter verbrauchen viel Speicherplatz. Weichzeichnerfilter können diesen Aufwand reduzieren. IE-Filter beanspruchen außerdem viel Speicher und weisen zudem Kompatibilitätsprobleme auf. Die Vollbildtransparenz ist sehr ressourcenintensiv. Ein 2 x 2-Bild hat ungefähr die gleiche Größe wie ein 8 x 8-Bild, aber ein 2 x 2-gekachelter Hintergrund nimmt viel mehr Platz ein. Auch GIF-Animationen beinhalten das Konzept von Frames. Behandeln Sie GIF daher nicht als Flash.
Importieren Sie nicht den gesamten Pretotyp oder jQuery, nur um ein $() -Verhalten zu verwenden, sie haben mehr Funktionen. AJAX ist cool. Für die Verwendung von XML ist jedoch ein XML-Parser erforderlich. Einige empfehlen die Verwendung von JSON, aber hierfür sind Evaluierungsdaten erforderlich. Tatsächlich können Sie das Skript, das bereits ein Objekt ist, direkt importieren. Sie müssen nur einen zusätzlichen Objektnamen übergeben oder den Objektnamen fest codieren oder ihn direkt als Funktion verwenden, wie es Flickr tut, jsonFlickrApi({"xxx":"xxx"}), haha. Verwenden Sie „display:none“ nicht, wenn „visibility:hidden“ bestimmte Effekte lösen kann. Es macht nicht viel Sinn, hier zu betonen, dass bei JS-Variablen auf globale und lokale Variablen usw. geachtet werden sollte. Die Komplexität von JS kann nicht in nur ein oder zwei Sätzen erklärt werden. Achten wir auf Yueyings neues Buch, das veröffentlicht wird. ^^
Tatsächlich ähneln viele der hier aufgeführten Inhalte dem Thema „Wie man schnell seine Webseiten präsentiert“, aber dieser Artikel konzentriert sich auf die Verarbeitung des Servers. In vielen Fällen führt die Einsparung von Serverressourcen jedoch auch zu einer Einsparung von Clientressourcen.
Tatsächlich liegt dieser Artikel schon seit langer Zeit im Entwurfsordner und ich hatte keine Zeit, ihn zu ordnen. Was ich Ihnen jetzt gebe, ist nicht vollständig, weil es noch nicht vollständig ist. Ich werde es nach und nach ergänzen.
------------------------------------------------------------------------

<<: HTML-Selbststudium (I) Grundlegende Elemente und Attribute üben (Schreiben Sie Ihren eigenen Code)

>>: VMware ESXi 5.5 Bereitstellungs- und Konfigurationsdiagrammprozess

Lösung für das Problem des Sitzungsverlusts bei Nginx

Eine kurze Erläuterung der Concat-Funktion in MySQL. So fügen Sie in MySQL vor oder nach einem Feld eine Zeichenfolge hinzu

Artikel

So reduzieren Sie die Speicher- und CPU-Auslastung von Webseiten

Lösung für das Problem des Sitzungsverlusts bei Nginx

So beheben Sie Dateisystemfehler in Linux mit „fsck“

React Router 5.1.0 verwendet useHistory, um die Seitensprungnavigation zu implementieren

Tutorial zur Installation und Konfiguration der Version MySQL 5.7.23

Ideen und Codes zur Implementierung von Iframes in HTML, um die Aktualisierung der übergeordneten Seite zu steuern

Eine kurze Erläuterung der Concat-Funktion in MySQL. So fügen Sie in MySQL vor oder nach einem Feld eine Zeichenfolge hinzu

HTML-Code für Multiheader-Tabellen

Lösung für den Fehler beim Importieren von MySQL Big Data in Navicat

Countdown-Effekt mit Javascript implementieren

Informationsübertragung und Funktionsaufrufe zwischen WeChat-Miniprogrammseiten und -Komponenten

Artikel empfehlen

Installieren von MySQL 8.0.12 basierend auf Windows

HTML-Grammatik-Enzyklopädie_HTML-Sprachgrammatik-Enzyklopädie (unbedingt lesen)

HTML+CSS zum Erstellen von Herzschlag-Spezialeffekten

uni-app implementiert NFC-Lesefunktion

Callback-Funktionen in JavaScript verstehen und verwenden

Verwenden Sie „overflow: hidden“, um Seiten-Bildlaufleisten zu deaktivieren

Analysieren Sie, wie eine SQL-Abfrageanweisung in MySQL ausgeführt wird

Detaillierte Erklärung der Unterschiede und Anwendungen von {{}}, v-text und v-html in Vue

So implementieren Sie die Fernzugriffskontrolle in Centos 7.4

Über die Rolle von Metadaten in HTML (aus dem Internet gesammelt und sortiert)

Verwendung des Linux-Befehls usermod

MySQL verwendet SQL-Anweisungen zum Ändern von Tabellennamen

Ubuntu 18.04 Ein-Klick-Upgrade aller Python-Pakete von Drittanbietern und Installation von Python-Paketen

Schritte zum Kauf eines Cloud-Servers und zur Installation des Pagoda Panels in der Alibaba Cloud

Analyse und Anwendung des Wasserfallflussprinzips unregelmäßiger Bilder