Heim > Artikel > Web-Frontend > 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.