Reagieren Sie Homepage langsames Laden Problem Leistungsoptimierung Fall detaillierte Erklärung

Nachdem ich React eine Weile studiert habe, möchte ich es in die Praxis umsetzen. Deshalb habe ich meine persönliche Blog-Website neu strukturiert. Es dauerte etwa eine Woche, bis die Website erfolgreich wiederhergestellt war. Als sie dann jedoch online war, war die Zugriffsgeschwindigkeit wirklich langsam, so langsam, dass ich es nicht ertragen konnte. Es war eine so kleine Website mit nur wenigen Artikeln und sie war so langsam, dass es inakzeptabel war. Ich bin kein Perfektionist, aber das geht nicht. Später habe ich einige Zeit mit Leistungsforschung verbracht. Ich habe herausgefunden, dass es einen Grund für die Langsamkeit gibt.

Frameworks wie React?

Die derzeit gängigen Front-End-Frameworks React, Vue und Angular verwenden alle clientseitiges Rendering (serverseitiges Rendering fällt nicht in den Rahmen dieses Artikels). Dadurch wird der Druck auf den Server natürlich erheblich verringert. Der relative Druck auf die Browser hat zugenommen. Dies bedeutet, dass eine große Anzahl von JS-Dateien lokal ausgeführt werden muss. Und das Herunterladen dieser großen JS-Dateien vom Server dauert eine Weile. Es dauert eine Weile, diese JS erneut auszuführen. Dies ist der Hauptgrund dafür, dass die Homepage langsam geladen wird. Natürlich handelt es sich dabei nur um die Startseite, aufgrund des nachfolgenden Caches ist diese aber vergleichsweise schnell. Wie kann man also die Geschwindigkeit erhöhen? Es gibt zwei Möglichkeiten, um zu beginnen

• Verbessern Sie die Geschwindigkeit beim Herunterladen statischer Ressourcen
• Optimieren Sie den Code, um die Laufgeschwindigkeit zu verbessern

Bevor ich auf die konkrete Optimierung eingehe, möchte ich kurz über die Serverkonfiguration meiner Blog-Website sprechen.

• Alibaba Cloud Server ECS
• System: Ubuntu 16.04
• CPU: 1 Kern
• Speicher: 1 GB
• MySQL-Datenbank
• Nginx Version 1.16.1

Die Testumgebung verwendet den Firefox-Browser und die Zugriffsgeschwindigkeit vor der Optimierung ist wie folgt

Ist es nicht sehr langsam? So langsam, dass es mich an meinem Leben zweifeln lässt. Das Laden eines Blogbeitrags mit mehr als 2.000 Wörtern dauert 6 Sekunden. Lassen Sie uns das anhand meines eigenen Blogs Schritt für Schritt optimieren.

Verbessern Sie die Geschwindigkeit beim Herunterladen statischer Ressourcen

Es gibt viele Möglichkeiten, die Geschwindigkeit beim Herunterladen statischer Ressourcen zu erhöhen. Die effektivsten Möglichkeiten zur Erhöhung der Geschwindigkeit sind ein Upgrade von HTTP1.1 auf HTTP2.0, die Aktivierung der GZIP-Datenkomprimierung, die Verwendung von CDN usw. Auch meine eigene Website wird hauptsächlich unter diesen Gesichtspunkten nach und nach optimiert, um die Geschwindigkeit zu verbessern.

Upgrade von HTTP1.1 auf HTTP2

So war es vor dem Upgrade

Nach dem Upgrade auf HTTP2.0 sieht es so aus

Wie kann man also ein Upgrade durchführen? Auch für ein Upgrade gelten Bedingungen.

• openssl 1.0.2+ (OpenSSL 1.0.2 unterstützt ALPN)
• Nginx 1.9.5+

Ich weiß nicht, ob die Nginx- und OpenSSL-Versionen weitergegeben werden können
nginx -V
Überprüfen Sie, ob die oben genannten Bedingungen erfüllt sind. Dies ist ganz einfach: Fügen Sie einfach http2 zur Nginx-Konfigurationsdatei hinzu.

Server {
   hören Sie 443 ssl http2
   .
   .
   .
}

Das ist alles. Ist das nicht ganz einfach? Starten Sie dann den Nginx-Server neu. (Dieses Upgrade verbessert die Zugriffsgeschwindigkeit nicht wesentlich.)

GZIP-Datenkomprimierung aktivieren

Wie aus der obigen Abbildung ersichtlich ist, sind die Daten in der Übertragungsspalte und der Größenspalte gleich, d. h. die Größe der Datei entspricht der Größe der Datei und es erfolgt überhaupt keine Komprimierung. Bei großen Dateien wie 1,4 MB ist eine Komprimierung sehr wichtig. Darüber hinaus ist dies nur eine einfache Blog-Site. Dies ist einer der Hauptgründe für die Verlangsamung. Daher ist es für uns notwendig, eine GZIP-Komprimierung durchzuführen. Wie schalten wir also gzip ein? Ist es sehr schwierig? Eigentlich ist es ganz einfach. Nginx unterstützt es bereits und wir brauchen nur eine einfache Konfiguration. Ändern Sie die nginx-Konfigurationsdatei auf die gleiche Weise

Server {
    hören Sie 443 ssl http2
    #...viele gzip-Dateien werden in der Mitte weggelassen;
    gzip_puffer 32 4k;
    gzip_comp_level 6;
    gzip_min_länge 200;
    gzip_types Text/CSS-Text/XML-Anwendung/JavaScript-Anwendung/JSON;
}

In

• gzip on bedeutet, dass die Gzip-Komprimierung aktiviert ist.
• gzip_buffers 32 4k gibt die Anzahl und Größe der Puffer an, die zur Verarbeitung der Anforderungskomprimierung verwendet werden. Sie müssen diesen Parameter nicht festlegen und können einfach den Standardwert verwenden.
• gzip_comp_level Gzip-Komprimierungsstufe. Nach Stufe 6 ist eine Erhöhung schwierig.
• gzip_min_length verwendet die GZIP-Komprimierung nur, wenn der zurückgegebene Inhalt größer als dieser Wert in K ist. Wenn der Wert 0 ist, werden alle Seiten komprimiert.
• gzip_types Komprimierungstyp

Starten Sie auf ähnliche Weise den Nginx-Server neu.

Wie aus der Abbildung ersichtlich, wird die Geschwindigkeit erheblich verbessert. Wenn man die Spalten „Übertragen“ und „Größe“ betrachtet, ist der Größenunterschied enorm. Nach Abschluss dieser beiden Schritte wurde die Geschwindigkeit von 6 Sekunden auf etwa 2 Sekunden reduziert.
(Dieses Upgrade hat den größten Einfluss auf die Zugriffsgeschwindigkeit.)

Hinweis: Besser ist natürlich die Verwendung einer CDN-Beschleunigung. CDN der statischen Ressourcen. Kann die Geschwindigkeit erheblich verbessern.

Optimieren Sie den Code, um die Laufgeschwindigkeit zu verbessern

Beim Testen mehrerer Anfragen. Wir haben festgestellt, dass es immer noch viele kleine Dateien gibt, deren Ausführung jedoch recht zeitaufwändig ist. Dies hängt natürlich mit Vorgängen wie der Erstellung eines DOM-Baums durch React zusammen. Wir können jedoch immer noch sehen, ob im Code noch weiterer Optimierungsspielraum besteht. Für eine so kleine Website war es zu langsam. Ich dachte, der von mir geschriebene Code müsse einige zeitaufwändige Vorgänge enthalten, und das war auch der Fall. Dieser Code auf der Website

const markdownHtml = markiert(content_mark || '');

Die Konvertierung von Markdown in HTML dauert einige Zeit. Wenn der Artikel sehr groß ist, kann diese Zeit nicht ignoriert werden.
Ich habe diese Methode zur Implementierung eines JS-Arrays in einen String getestet, um einen Artikel mit vielen Wörtern zu analysieren, und es hat mehr als 100 ms gedauert, was gemäß Konvention unerträglich ist.

In diesem Fall können wir beim Speichern von Markdown direkt zwei Kopien der Daten speichern, eine sind die ursprünglichen Markdown-Daten und die andere sind die Daten, nachdem Markdown in HTML konvertiert wurde. Beim Rendern der Seite wird der konvertierte HTML-Code direkt abgerufen, was Konvertierungszeit spart.

Wir können auch das懶加載von React nutzen, um den Code beim Verpacken mit Webpack aufzuteilen und so die Größe des Ladens des ersten Bildschirms zu reduzieren.

Natürlich ist auch die Verbesserung des Benutzererlebnisses während des Ladevorgangs ein wichtiger Aspekt. Auch wenn dies die Laufgeschwindigkeit nicht effektiv erhöhen kann, kann es die Benutzerzufriedenheit steigern. Wie das Sprichwort sagt: Die Zeit vergeht wie im Flug, wenn man glücklich ist.

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung der Leistungsoptimierung des langsamen Ladeproblems der React-Homepage. Weitere relevante Inhalte zur Leistungsoptimierung des langsamen Ladeproblems der React-Homepage finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!