Detaillierte Erläuterung der Leistungsoptimierung des Web-Frontends: Zusammenführung und Komprimierung von Ressourcen

Ressourcenzusammenführung und -komprimierung für zwei Zwecke

1. Reduzieren Sie die Anzahl der HTTP-Anfragen
2. Reduzieren Sie die Größe der angeforderten Ressourcen

Fallstudie zur Google-Startseite

1. HTML-Komprimierung
2. CSS-Komprimierung
3. Komprimierung von js
4. Dateizusammenführung
5. Aktivieren Sie gzip

1. HTML-Komprimierung

Abbildung 1 zeigt Sinas Homepage ohne Komprimierung, während Abbildung 2 die Homepage von Google nach der Komprimierung zeigt.

Bei der HTML-Codekomprimierung werden die Zeichen komprimiert, die in der Textdatei eine Bedeutung haben, aber nicht in HTML angezeigt werden, einschließlich Leerzeichen, Tabulatoren, Zeilenumbrüchen usw. sowie einiger Zeichen mit anderen Bedeutungen, wie z. B.
HTML-Kommentare können auch komprimiert werden.

So komprimieren Sie HTML

1. Verwenden Sie zur Komprimierung Online-Websites
2. nodejs bietet ein HTML-Minifier-Tool
3. Rendering-Komprimierung der Backend-Vorlagen-Engine

2. HTML-Komprimierung

1. Entfernung von totem Code
2. CSS-semantische Zusammenführung

So komprimieren Sie HTML

1. Verwenden Sie zur Komprimierung Online-Websites
2. Verwenden Sie html-minifier, um CSS in HTML zu komprimieren
3. Verwenden Sie clean-css, um CSS zu komprimieren

3. Js-Komprimierung und Verwirrung

1. Entfernung ungültiger Zeichen
2. Kommentare entfernen
3. Code-semantische Reduzierung und Optimierung
4. Codeschutz

So komprimieren und verwirren Sie js

1. Verwenden Sie zur Komprimierung Online-Websites
2. Verwenden Sie HTML-Minifier, um JS in HTML zu komprimieren
3. Verwenden Sie uglifyjs2, um js zu komprimieren

3. Dateizusammenführung

Vergleich zwischen Dateizusammenführung und Nichtzusammenführung

1. Zwischen den Dateien werden Upstream-Anfragen eingefügt, die die Netzwerkverzögerung um das N-1-fache erhöhen.
2. Stärker von Paketverlust betroffen
3. Möglicherweise wurde Ihre Verbindung durch einen Proxyserver getrennt.

Probleme beim Zusammenführen von Dateien:

1. Problem bei der ersten Bildschirmdarstellung
2. Cache-Ungültigkeitsproblem

Lösen Sie das Problem der Dateizusammenführung:

1. Zusammenlegung öffentlicher Bibliotheken
2. Zusammenführen verschiedener Seiten
3. Handeln Sie den Umständen entsprechend und passen Sie sich an veränderte Umstände an

So komprimieren und verwirren Sie js

1. Verwenden Sie zur Komprimierung Online-Websites
2. Verwenden Sie nodejs, um das Zusammenführen zu implementieren

Bildbezogene Optimierung
Der Unterschied zwischen png8/png24/png32

1. png8 – 256 Farben + Unterstützung für Transparenz
2. png24 – 2^24 Farben + keine Unterstützung für Transparenz
3. png32 – 2^24 Farben + Unterstützung für Transparenz

Jedes Bildformat hat seine eigenen Merkmale. Es ist wichtig, für unterschiedliche Geschäftsszenarien unterschiedliche Bildformate auszuwählen.

Gängige Geschäftsszenarien für Bilder in unterschiedlichen Formaten

1. jpg - Die meisten Geschäftsszenarien, die keine transparenten Bilder erfordern
2. png unterstützt Transparenz und ist mit Browsern kompatibel
3. Die Webp-Komprimierung ist besser und mit iOS Webview kompatibel
4. SVG-Vektorgrafiken, eingebetteter Code, relativ wenige, relativ einfache Bildstile

Gängige Geschäftsszenarien für Bilder in unterschiedlichen Formaten

1. jpg - Die meisten Geschäftsszenarien, die keine transparenten Bilder erfordern
2. png - Die meisten Geschäftsszenarien, die transparente Bilder erfordern
3. webp —— Android Alle
4. SVG-Vektorgrafiken – Geschäftsszenarien mit relativ einfachen Bildstilen

Komprimieren Sie das Bild

Bei echten Bildern werden relativ unbedeutende Farbinformationen verworfen

CSS Sprite

Kombinieren Sie mehrere auf Ihrer Website verwendete Bilder zu einem einzigen Bild

Vorteil

Reduzieren Sie die Anzahl der HTTP-Anfragen Ihrer Website

Mangel

Wenn das integrierte Bild groß ist, wird es langsam auf einmal geladen

Bild inline

Betten Sie den Bildinhalt in HTML ein, um die Anzahl der HTTP-Anfragen für Ihre Website zu reduzieren

Verwenden von webp unter Android

Der Vorteil von WebP liegt in seinem besseren Bilddatenkomprimierungsalgorithmus, der eine kleinere Bildgröße und eine Bildqualität ermöglicht, die mit bloßem Auge nicht zu unterscheiden ist. Es verfügt außerdem über verlustfreie und verlustbehaftete Komprimierungsmodi, Alpha-Transparenz und Animationsfunktionen und die Konvertierungseffekte für JPEG und PNG sind ausgezeichnet, stabil und einheitlich.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.