Wie kann die Front-End-Leistung optimiert werden?

Wie optimiert man die Frontend-Leistung?

Inhaltlich

1, HTTP-Anfragen reduzieren: Dateien zusammenführen, CSS-Sprites, Inline-Bild

2. DNS-Abfragen reduzieren: Der Browser kann keine Dateien von diesem Host herunterladen, bevor die DNS-Abfrage abgeschlossen ist. Methoden: DNS-Caching, Ressourcen auf die richtige Anzahl von Hostnamen verteilen, parallele Downloads und DNS-Anfragen ausgleichen

3, Weiterleitungen vermeiden: redundante Zwischenzugriffe

4, Ajax zwischenspeicherbar machen

5, Laden nicht wesentlicher Komponenten verzögern

6, Erforderliche Komponenten in Zukunft vorladen

7. Reduzieren Sie die Anzahl der DOM-Elemente

8. Platzieren Sie Ressourcen in verschiedenen Domänen: Der Browser lädt gleichzeitig Ressourcen von einer Domäne herunter Die Anzahl ist begrenzt. Durch die Erhöhung der Domänen kann die Anzahl paralleler Downloads erhöht werden

9, die Anzahl der Iframes verringert werden

10 und 404 vermieden werden

Serveraspekt

1, CDN verwenden

2, Expires- oder Cache-Control-Antwortheader hinzufügen

3, Gzip-Komprimierung für Komponenten verwenden

4, ETag konfigurieren

5, Puffer früh leeren

6, Ajax verwendet GET für Anfragen

7, Leer vermeiden src img tags

Cookie-Aspekt

1, Cookie-Größe reduzieren

2. Der Domainname importierter Ressourcen sollte keine Cookies enthalten

CSS

1. Platzieren Sie das Stylesheet oben auf der Seite

2. Verwenden Sie keine CSS-Ausdrücke

3. Verwenden Sie @import, ohne es zu verwenden

4, verwenden Sie nicht den IE-Filter

Javascript-Aspekt

1, Skript am Ende der Seite platzieren

2, Javascript und CSS von außen einführen

3, Javascript und CSS komprimieren

4, unnötige Skripte löschen

5, DOM-Zugriff reduzieren

6. Event-Listener vernünftig gestalten

Bildaspekte

1. Bilder optimieren: Farbtiefe und Komprimierung entsprechend den tatsächlichen Farbanforderungen auswählen

2, CSS-Sprites optimieren

3, strecken Sie Bilder in HTML nicht

4, stellen Sie sicher, dass favicon.ico klein und zwischenspeicherbar ist

Mobiler Aspekt

1, stellen Sie sicher, dass die Komponenten weniger als 25.000 sind

2, Komponenten in ein mehrteiliges Dokument packen

Das Obige ist, was ich zusammengefasst habe Front-End-Leistungsoptimierungsplan, wenn Sie andere gute Pläne haben, hinterlassen Sie bitte eine Nachricht!

Das obige ist der detaillierte Inhalt vonWie kann die Front-End-Leistung optimiert werden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!