1. Das Problem der langsamen Ladegeschwindigkeit des ersten Bildschirms von SPA (Single Page Application)
First Contentful Paint bezeichnet den Zeitraum von der Antwort des Browsers auf die vom Nutzer eingegebene URL-Adresse bis zur Darstellung des Inhalts auf dem ersten Bildschirm, zu diesem Zeitpunkt muss nicht unbedingt die gesamte Webseite komplett gerendert werden, aber sie muss um den vom aktuellen Fenster benötigten Inhalt anzuzeigen. Das Laden des ersten Bildschirms ist wohl der wichtigste Teil der Benutzererfahrung.
Wir können die Zeit des ersten Bildschirms durch DOMContentLoad oder performance.timing berechnen.
// 方案一：
document.addEventListener('DOMContentLoaded', (event) => {
console.log('first contentful painting');
});
// 方案二：
let 白屏时间 = firstPaint - performance.timing.navigationStart;
Gründe für langsames Laden
Beim Rendern von Seiten können die folgenden Faktoren zu einer langsamen Ladegeschwindigkeit führen:
- Problem mit Netzwerkverzögerung
- Ob die Größe der Ressourcendatei zu groß ist
- Ob die Ressource wiederholt Ladeanforderungen gesendet hat
- Beim Laden des Skripts wird der Rendering-Inhalt blockiert
Es gibt viele Möglichkeiten, die Renderzeit des ersten Bildschirms zu reduzieren, die im Allgemeinen in zwei Teile unterteilt werden kann: Ressourcenladeoptimierung und Seitenrendering-Optimierung
Mehrere gängige SPA-First-Screen-Optimierungsmethoden
- Reduzieren Sie die Größe der Eintragsdatei
Verwenden Sie Lazy Loading von Routen, um Routen in Form von Funktionen zu laden. Die Komponenten, die verschiedenen Routen entsprechen, werden in verschiedene Codeblöcke unterteilt.Wenn die Route angefordert wird, wird die Route separat gepackt, so dass dieEingabedatei kleiner wird und die Ladegeschwindigkeit stark erhöht wird.
Komponente: () => import('./components/header.vue')
- Lokaler Cache für statische Ressourcen
Back-End-Rückgabe: HTTP-Cache verwenden, Cache-Control, Last-Modified, Etag und andere Antwortheader festlegen, Service Worker-Offline-Cache verwenden und
localStorage sinnvoll am Front-End verwenden
- UI-Framework wird bei Bedarf geladen
Zum Beispiel: import { Button, Input} from 'element-ui';
- Komprimierung von Bildressourcen
Obwohl die Bildressource nicht im Codierungsprozess enthalten ist, stellt sie den größten Einfluss auf die Leistung der Seite dar. An der Bildressource kann eine geeignete Komprimierung durchgeführt werden.
Für die auf der Seite verwendeten Symbole können Sie Online-Schriftartsymbole oder Sprite-Bilder verwenden, um viele kleine Symbole in demselben Bild zu kombinieren, um den Druck von HTTP-Anforderungen zu verringern.
- Komponenten werden neu verpackt
Angenommen, die A.js-Datei ist eine häufig verwendete Bibliothek. Jetzt gibt es mehrere Routen, die die A.js-Datei verwenden, was zu wiederholten Downloads führt.
Ändern Sie in der Konfigurationsdatei von Webpack die CommonsChunkPlugin-Konfiguration minChunks: 3, um anzugeben, dass dies der Fall sein wird Pakete, die dreimal und mehr verwendet werden, werden extrahiert und in öffentliche Abhängigkeitsdateien abgelegt, wodurch ein wiederholtes Laden von Komponenten vermieden wird
- Aktivieren Sie die GZip-Komprimierung
Lassen Sie uns nach dem Entpacken gzip verwenden, um das Komprimierungs-Webpack-Plugin zu komprimieren und zu installieren, cnmp i compression-webpack-plugin -D auszuführen und die Webpack-Konfiguration zu ändern.
Auch auf dem Server sollte eine entsprechende Konfiguration vorgenommen werden.Wenn der Browser, der die Anfrage sendet, gzip unterstützt, senden Sie ihm eine Datei im gzip-Format.
const CompressionPlugin = require('compression-webpack-plugin')
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 为生产环境修改配置...
config.mode = 'production'
return {
plugins: [new CompressionPlugin({
test: /\.js$|\.html$|\.css/, //匹配文件名
threshold: 10240, //对超过10k的数据进行压缩
deleteOriginalAssets: false //是否删除原文件
})]
}
}
- SSR verwenden
SSR (serverseitig), d. h. serverseitiges Rendering, Komponenten oder Seiten generieren HTML-Strings über den Server und senden sie dann an den Browser.
Das Erstellen eines serverseitigen Renderings von Grund auf ist sehr kompliziert. Es wird empfohlen, Nuxt.js zu verwenden, um serverseitiges Rendering für Vue-Anwendungen zu implementieren
Probleme mit dem weißen Bildschirm
White-Screen-Time: Es bezieht sich auf die Zeit von dem Zeitpunkt, an dem der Bildschirm leer ist, bis der erste Bildschirm angezeigt wird, nachdem der Benutzer auf einen Link geklickt oder den Browser geöffnet und die URL-Adresse eingegeben hat. Je kürzer die Seitenwiedergabezeit ist, desto kürzer wartet der Benutzer und desto schneller nimmt der Benutzer die Seite wahr. Dies kann die Benutzererfahrung erheblich verbessern,
White-Screen-Prozess. Der Prozess von der Eingabe der URL bis zur Anzeige des Bildschirms der Seite
1. Geben Sie zuerst die URL in die Adressleiste des Browsers ein
2. Der Browser überprüft zunächst den Browser-Cache-System-Cache-Router-Cache Wenn einer im Cache vorhanden ist, zeigt er den Seiteninhalt direkt auf dem Bildschirm an. Wenn nicht, wird eine HTTP-Anforderung initiiert.
3. Vor dem Senden einer HTTP-Anfrage ist eine Domänennamenauflösung (DNS-Auflösung) erforderlich, um die entsprechende IP-Adresse zu erhalten.
4. Der Browser initiiert eine TCP-Verbindung zum Server und richtet einen TCP-Dreiwege-Handshake mit dem Browser ein.
5. Nach erfolgreichem Handshake sendet der Browser eine http-Anfrage an den Server, um ein Datenpaket anzufordern.
6. Der Server verarbeitet die empfangene Anforderung und gibt die Daten an den Browser zurück
7. Der Browser empfängt die HTTP-Antwort
8. Liest den Inhalt der Seite, stellt ihn im Browser dar und analysiert den HTML-Quellcode
9. Analysiert die HTML-Datei und erstellt einen DOM-Baum. Parsen von CSS, Konstruieren von CSSOM-Baum (CSS-Regelbaum)
10. Zusammenführen von DOM-Baum und CSSOM-Baum, Konstruieren von Render-Baum (Rendering-Baum),
Reflow ( Rearrangement ): Berechnen Sie Knoteninformationen (Layout) gemäß dem Renderbaum, auch bekannt als Reflow, wenn sich der Renderingbaumknoten ändert, wirkt sich dies auf die geometrischen Eigenschaften des Knotens aus (wie Breite, Höhe, Innenrand, Außenrand, oder float, position, display: none usw.), wodurch sich die Position des Knotens ändert.Zu diesem Zeitpunkt wird der Browser zum Reflow (Reflow) ausgelöst, und der Rendering-Baummuss neu generiert werden. Beispielsweise fügt JS einen neuen Stil für einen p-Tag-Knoten hinzu: „display:none;“. Als Ergebnis wird das p-Tag ausgeblendet und die Positionen aller Knoten nach dem p-Tag ändern sich. Zu diesem Zeitpunkt muss der Browser den Rendering-Baum und das Layout neu generieren.
neu zeichnen ( neu zeichnen ): Zeichnen Sie die gesamte Seite (Malerei) gemäß den berechneten Informationen. Der Rendering-Baumknoten ändert sich, wirkt sich jedoch nicht auf die räumliche Position und Größe des Knotens auf der Seite aus. Wenn sich beispielsweise die Hintergrundfarbe, die Schriftfarbe usw. eines div-Label-Knotens ändern, aber die Breite, die Höhe sowie die inneren und äußeren Ränder des div-Label-Knotens sich nicht ändern, löst dies eine Neuzeichnung (repaint) des Browsers aus.
Jede Dom-Änderung oder Änderung der geometrischen CSS-Eigenschaften führt zu einem Neuanordnungs-/Neuzeichnungsprozess des Browsers, und wenn es sich um eine nicht geometrische Eigenschaftsänderung von CSS handelt, führt dies nur zu einem Neuzeichnungsprozess. Eine Neuanordnung führt also definitiv zu einem Neuzeichnen, und ein Neuzeichnen führt nicht unbedingt zu einer Neuanordnung.
Nachdem der Browser den HTML-Code heruntergeladen hat, parst er zuerst den Header-Code, lädt das Stylesheet herunter und fährt dann damit fort, den HTML-Code abwärts zu parsen, erstellt einen DOM-Baum und lädt gleichzeitig das Stylesheet herunter. Wenn der DOM-Baum erstellt ist, beginnen Sie sofort mit dem Erstellen des CSSOM-Baums. Idealerweise ist die Download-Geschwindigkeit des Stylesheets schnell genug und der DOM-Baum und der CSSOM-Baum treten in einen parallelen Prozess ein.Wenn die beiden Bäume aufgebaut sind, wird der Rendering-Baum aufgebaut und dann gezeichnet.
Tipps: Die Auswirkungen der Browser-Sicherheits-Parsing-Strategie auf das Parsen von HTML:
Beim Analysieren von HTML blockiert die Begegnung mit Inline-JS-Code die Konstruktion des DOM-Baums, und der JS-Code wird zuerst ausgeführt; wenn die CSS-Stildatei nicht heruntergeladen wird , wird die Browser wird Wenn beim Parsen von HTML auf Inline-JS-Code gestoßen wird, unterbricht der Browser die Ausführung von JS-Skripts und das HTML-Parsing. Bis der Download der CSS-Datei abgeschlossen ist, ist die Konstruktion des CSSOM-Baums abgeschlossen und die ursprüngliche Analyse wird fortgesetzt.
JavaScript blockiert die DOM-Generierung und Stildateien blockieren die Ausführung von JavaScript. Daher müssen Sie sich in tatsächlichen Projekten auf JavaScript-Dateien und Stylesheet-Dateien konzentrieren. Eine unsachgemäße Verwendung beeinträchtigt die Seitenleistung.
Weißer Bildschirm - Leistungsoptimierung
- Optimierung der DNS-Auflösung
DNS (Domain Name System) ist die englische Abkürzung für Domain Name System. Es ist die Systemverwaltungsagentur einer Organisation, die die Korrespondenz zwischen der IP jedes Hosts im System und dem Hostnamen (Domänennamen) aufrechterhält.
Optimieren Sie die DNS-Auflösung für den DNS-Lookup-Link.
1. DNS-Cache-Optimierung
2. DNS-Preloading-Strategie
3. Stabiler und zuverlässiger DNS-Server
-
Optimierung der TCP-Netzwerkverbindung
-
Serverseitige Verarbeitungsoptimierung
Backend-Optimierung -
Browser-Download, Parsing, Rendering-Seitenoptimierung
1) Optimieren Sie den HTML-Code und die Struktur so weit wie möglich
2) Optimieren Sie die CSS-Datei und die Struktur so weit wie möglich
3) Achten Sie darauf, den JS-Code vernünftig zu platzieren, versuchen Sie, keinen Inline-JS-Code zu verwenden
4) Inlining Das kritische CSS, das zum Rendern von „above the fold“-Inhalten in HTML benötigt wird, macht den CSS-Download viel schneller. Es kann gerendert werden, nachdem der HTML-Download abgeschlossen ist, und die Seitenrenderzeit wird vorgezogen, wodurch die Renderzeit des ersten Bildschirms verkürzt wird; 5) Verzögern des Ladens
unnötiger Bilder für den ersten Bildschirm und Priorisieren des Ladens von erforderlichen Bildern der erste Bildschirm
Da JavaScript die DOM-Generierung blockiert und Style-Dateien die Ausführung von JavaScript blockieren, müssen wir uns im eigentlichen Projekt also auf JavaScript-Dateien und Stylesheet-Dateien konzentrieren, eine unsachgemäße Verwendung beeinträchtigt die Seitenleistung.
lange Listendaten
Wenn 10.000.000 Datenelemente angezeigt werden sollen, welche Optimierung sollte vorgenommen werden, um die Benutzererfahrung zu verbessern?
(1) Paging der Daten Nach dem Paging-Prinzip liefert der Server jedes Mal nur eine bestimmte Menge an Daten zurück und der Browser lädt jedes Mal nur einen Teil davon.
(2) Verwenden Sie die Lazy-Loading -Methode, um jedes Mal einen Teil der Daten zu laden, und laden Sie den Rest der Daten bei Bedarf.
(3) Unter Verwendung der Array-Block-Technologie besteht die Grundidee darin, eine Warteschlange für die zu verarbeitenden Elemente zu erstellen, dann den Timer so einzustellen, dass er von Zeit zu Zeit einen Teil der Daten abruft, und dann den Timer zu verwenden, um den nächsten abzurufen zu verarbeitendes Element für die Verarbeitung, und stellen Sie dann einen anderen Timer ein.
(4) Virtuelle Liste , jedes Mal, wenn nur der Teil gerendert wird, der das Ansichtsfenster benötigt