Methoden zur Web-Frontend-Optimierung

Gegenwärtig wird die Anwendung des Internet-BS-Modells immer weiter verbreitet, einschließlich der Entwicklung von Website-Systemen, OA-Plattformen usw. Wie kann man es also gut machen, es gut machen und den Benutzern ein gutes Erlebnis bieten? Lassen Sie mich meine Erfahrungen in der Web-Frontend-Optimierung mit Ihnen teilen. Diese Erfahrungen sind praktischere Technologien in der Arbeitspraxis
1. Minimieren Sie die Anzahl der HTTP-Anfragen – ein Kompromiss ist erforderlich

Bilder zusammenführen ( (z. B. CSS-Sprites, integrierte Bildnutzungsdaten), das Zusammenführen von CSS und JS, dies ist sehr wichtig, aber die Größe der zusammengeführten Datei muss berücksichtigt werden.

　2. Geben Sie Expires oder Cache-Control für den Dateiheader an, um den Inhalt zwischenspeicherbar zu machen.

Unterscheiden Sie zwischen statischen Inhalten und dynamischen Inhalten, um unnötige HTTP-Anfragen bei zukünftigen Seitenbesuchen zu vermeiden.

3. Vermeiden Sie leere src und href

Achten Sie auf Tags mit diesen beiden Attributen wie Link, Skript, IMG, Iframe usw.

4. Verwenden Sie gzip zum Komprimieren von Inhalten

Gzip komprimiert alle möglichen Dateitypen, um die Dateigröße zu reduzieren

5. Platzieren Sie CSS oben

, um ein ordnungsgemäßes Laden der Seiten zu erreichen, was für Seiten geeignet ist mit mehr Inhalt Es ist wichtiger für Benutzer mit langsamen Webseiten und Internetgeschwindigkeiten. Gleichzeitig besagt die HTML-Spezifikation eindeutig, dass das Stylesheet innerhalb des in der Seite enthaltenen Bereichs platziert werden muss. Setzen Sie JS ganz unten

Die HTTP/1.1-Spezifikation empfiehlt, dass der Browser nicht mehr als zwei Inhalte pro Hostnamen parallel herunterlädt. Das Problem besteht darin, dass das Skript das parallele Herunterladen der Seite verhindert, selbst wenn die Hostnamen sind unterschiedlich

　7. Vermeiden Sie die Verwendung von CSS-Ausdrücken Formel

Wir sollten auf die Berechnungshäufigkeit von CSS-Ausdrücken achten, wenn die Seite angezeigt und gezoomt, gescrollt oder sogar die Maus bewegt wird. Erwägen Sie einmalige Ausdrücke oder verwenden Sie Event-Handler anstelle von CSS-Ausdrücken.

8. Fügen Sie CSS und JS in externe Dateien ein

Wir müssen den Kompromiss zwischen der Reduzierung der HTTP-Anfragen durch den integrierten Code und den Vorteilen des Cachings durch die Verwendung externer Dateien abwägen.

9. Optimieren Sie CSS und JS

Der Zweck besteht darin, die Größe der heruntergeladenen Dateien zu reduzieren. Sie können die Komprimierungstools JSMin und YUI Compressor in Betracht ziehen.

10. Eliminieren Sie doppeltes JS und CSS

Wiederholtes Aufrufen des Skripts führt nicht nur zu zusätzlichen HTTP-Anfragen, sondern verschwendet auch Zeit bei mehreren Vorgängen. Unabhängig davon, ob das Skript im IE und Firefox zwischenspeicherbar ist oder nicht, haben sie alle das Problem, JavaScript neu zu bewerten.

11. Machen Sie AJAX zwischenspeicherbar

Mithilfe von Zeitstempeln kann die Antwort auf ausgefeiltere Weise zwischengespeichert und synchron mit den Serverdaten aktualisiert werden.

12. Aktualisieren Sie den Ausgabepuffer so früh wie möglich

Insbesondere für CSS ist das parallele Herunterladen von JS-Dateien sinnvoller

13. Verwenden Sie GET, um AJAX-Anfragen abzuschließen

Bei Verwendung von XMLHttpRequest ist die POST-Methode im Browser ein „zweistufiger“ Prozess: Zuerst wird der Dateiheader gesendet und dann werden die Daten gesendet. Es ist sinnvoller, GET zum Abrufen von Daten zu verwenden, wenn die URL weniger als 2 KB groß ist.

14. Lazy Loading

Nachdem Sie bestätigt haben, dass die Seite normal ausgeführt wird, laden Sie das Skript, um Drag & Drop und Animationen zu implementieren, oder blenden Sie einen Teil des Inhalts aus und falten Sie den Inhalt.

15. Vorladen

Achten Sie auf unbedingtes Laden, bedingtes Laden und erwartetes Laden.

16. Minimieren Sie die Anzahl der Iframes

Bedenken Sie, dass das Laden auch dann dauert, wenn der Inhalt leer ist, was das Laden der Seite verhindert und keine semantische Bedeutung hat 1- Höherer Overhead als andere DOM-Elemente, es blockiert das Onload-Ereignis auf die typische Weise und das Hauptseiten-Stylesheet in IE und Firefox blockiert seinen Download.

17. Vermeiden Sie 404

Der Zeitaufwand für HTTP-Anfragen ist sehr hoch. Einige Websites haben die 404-Fehlerantwortseite in „Suchen Sie nach *“ geändert. Dies verbessert zwar die Benutzererfahrung Außerdem werden Serverressourcen (z. B. Datenbank usw.) verschwendet.

18. Reduzieren Sie die Größe von Cookies

Entfernen Sie unnötige Cookies, machen Sie die Cookie-Größe so klein wie möglich, um die Auswirkungen auf die Benutzerreaktion zu verringern, und legen Sie eine angemessene Ablaufzeit fest. Eine frühere Ablaufzeit und das nicht zu frühe Löschen von Cookies verbessern die Reaktionszeit des Benutzers.

19. Bilder optimieren

Versuchen Sie, das GIF-Format in das PNG-Format zu konvertieren, um zu sehen, ob es Platz spart. Führen Sie pngcrush (oder andere PNG-Optimierungstools) für alle PNG-Bilder aus

20. Skalieren Sie Bilder nicht in HTML – Kompromisse

Verwenden Sie keine Verhältnisse, um Höhe und Breite in HTML festzulegen Es braucht tatsächlich große Bilder.