Wie H5+C3 die Front-End-Schnittstelle optimiert

Dieses Mal zeige ich Ihnen, wie Sie die Frontend-Schnittstelle mit H5+C3 optimieren. Was sind die Vorsichtsmaßnahmen für die Optimierung der Frontend-Schnittstelle mit H5+C3? , lass uns einen Blick darauf werfen.

Die Optimierung des Frontends der Website ist mittlerweile für viele Menschen ein wichtiges Anliegen und für viele auch eine notwendige Aufgabe. Wie nutzen wir also HTML und CSS für eine bessere Frontend-Optimierung? Der folgende Artikel gibt Ihnen einige Tipps zur Frontend-Optimierung. Wenn Sie interessiert sind, lassen Sie uns gemeinsam mehr darüber erfahren.

Webinhalte

Reduzieren Sie die Anzahl der HTTP-Anfragen

Der Großteil der Reaktionszeit einer Website wird für das Herunterladen von Webressourcen aufgewendet. Die Ressourcen beziehen sich hier auf: Bilder, CSS, JS und Flash usw. Die Reduzierung der Anzahl der Anfragen, über die wir hier sprechen, ist der Schlüssel zur Verkürzung der Reaktionszeit.

Im Allgemeinen kann es in zwei Typen unterteilt werden:

Eine besteht darin, die Anzahl der Anfragen durch Vereinfachung des Seitendesigns zu reduzieren.

Zweitens können komplexere Skripte oder CSS-Dateien auf Webseiten mehrere Skripte verwenden oder sie in einer Datei packen. Bilder verwenden CSS Sprites (Bildspleißtechnologie), um mehrere Bilder zu einem Bild zu kombinieren und dann mithilfe von CSS zu steuern, wo sie angezeigt werden sollen Sie können sich für diesen Inhalt auf die CSS-Positionierung im Abschnitt unten auf JD.com beziehen.

Vermeiden Sie Seitensprünge

Was ist der Zweck, Seitensprünge zu vermeiden? Das heißt, wenn der Client die Sprungantwort vom Server erhält, sendet der Client die Anfrage erneut gemäß der durch den Standort in der Serverantwort angegebenen Adresse. Mit anderen Worten, die 301-Umleitung

, die häufig in der Suchmaschinenoptimierung verwendet wird Zum Beispiel:

Jetzt möchte ich, dass Studenten, die die Quellcode-Ära besuchen, das Quellcode-Forum betreten. So implementieren Sie die serverseitige 301-Umleitung

RewriteEngine Ein

RewriteCond %{HTTP_HOST} !^www.itsource.cn$ [NC]//Dies ist die vom Client angeforderte Adresse

RewriteRule ^(.*)$ http://bbs.itsource.cn/$1 [R=301,L]//Dies ist die Webseite, die der Client tatsächlich gesehen hat

Lazy Loading

Das verzögerte Laden, über das wir hier sprechen, erfordert, dass wir zunächst wissen, welcher kleinste Inhalt zunächst auf der Webseite geladen wird, und der verbleibende Inhalt kann mithilfe des verzögerten Ladens implementiert werden.

Das typischste ist, dass Javascript das Laden von Inhalten verzögern kann. Bei dieser Methode wird zunächst sichergestellt, dass die Webseite beim Entwickeln der Webseite den normalen Seiteneffekt gut anzeigen kann, und dann wird ein Teil davon verzögert Ladeskript. Erweiterte funktionale Effekte.

Wird geladen

Diese Methode ist genau das Gegenteil der oben genannten Methode, was bedeutet, dass einige Ressourcen auf der Webseite im Voraus geladen werden. Sie ist in drei Kategorien unterteilt:

1. Unbedingt frühes Laden

Bei dieser Methode werden unmittelbar nach dem Laden der Webseite einige andere Inhalte geladen. Beispielsweise lädt Taobao einige kombinierte Bilder, nachdem der Ladevorgang abgeschlossen ist

2. Bedingtes Laden

Leiten Sie den Inhalt ab, der geladen werden muss, basierend auf den vom Benutzer eingegebenen Informationen, z. B. der Baidu-Suche.

Wird wie erwartet geladen

Dies ist etwas fortgeschrittener. Diese Situation tritt normalerweise auf, wenn eine Webseite aufgrund des Zugriffsverhaltens des Benutzers neu gestaltet wird. Der Designer kann dies jedoch nicht tun Ein Teil des Caches der alten Webseite kann in der neuen Website verwendet werden. In diesem Fall lädt die neue Webseite zunächst einige Ressourcen in den lokalen Bereich herunter.

Reduzieren Sie die Anzahl der DOM-Elemente

Wenn die Webseite zu viele Elemente enthält, wirkt sich dies auch auf die Leistung der Webseite aus und erhöht auch die Auslastung der Webseite und die Ausführung des Skripts. Sie können darüber nachdenken, wann wir es normalerweise verwenden JS, wenn wir einige Effekte erzielen möchten, müssen wir zuerst die relevanten DOM-Elemente finden und dann entsprechende Vorgänge ausführen? Wenn unsere Webseite zu viele Elemente enthält, wird es dann einen sehr deutlichen Zeitunterschied geben? Daher wirkt sich die Reduzierung der Anzahl der DOM-Elemente immer noch auf die Leistung der Webseite aus.

Teilen Sie den Inhalt nach Domainnamen auf

Wenn wir uns andere große Websites ansehen, unterscheidet sich die Adresse des Bildes häufig vom Hauptdomänennamen der Website, und zum Speichern verwandter Ressourcen werden mehrere Domänennamen verwendet. Tatsächlich unterliegen Browser im Allgemeinen Beschränkungen hinsichtlich der Anzahl der Download-Verbindungen für denselben Domänennamen. Die Aufteilung von Download-Inhalten nach Domänennamen kann indirekt die Anzahl paralleler Download-Verbindungen im Browser erhöhen. Verbessert die Gesamtkapazität der Download-Ressourcen der Website erheblich. Dadurch wird der Effekt einer Leistungsoptimierung erzielt.

Reduzieren Sie die Anzahl der Iframes

Zuvor haben wir über die Verwendung von iframe gesprochen. Achten Sie jedoch bei der Verwendung in tatsächlichen Projekten auf die Vor- und Nachteile.

Vorteile:

Kann zum Laden langsamerer Inhalte verwendet werden, Skripte können parallel heruntergeladen werden

Nachteile:

Die Verwendung eines Iframes mit leerem Inhalt verbraucht ebenfalls Ladezeit und verhindert, dass die Seite geladen wird

Vermeiden Sie 404

404 ist eine häufige nicht gefundene Serverressource. Erstens beeinträchtigt sie die Benutzererfahrung und öffnet eine Seite, die nutzlose Informationen zurückgibt. Zweitens muss ein externes Skript in die Webseite geladen werden und ein 404 wird zurückgegeben. Dadurch wird nicht nur das Herunterladen anderer Skripte blockiert, sondern der Client analysiert auch den heruntergeladenen Inhalt (404) als Javascript.

CSS

Stylesheet oben anpinnen

Da Webinhalte von oben nach unten geladen werden, versuchen wir unser Bestes, CSS-Stile in den Kopf der Webseite einzufügen, um das Laden der Webseite zu beschleunigen. Dies ist zumindest für Webseiten mit viel Inhalt sehr wichtig Lassen Sie Benutzer nicht auf eine Seite warten. Auf einem weißen Bildschirm ist dieses Benutzererlebnis ebenfalls recht gut.

Wenn wir das Stylesheet unten platzieren, verweigert der Browser möglicherweise das Rendern der heruntergeladenen Webseite, da die meisten Browser versuchen, bei der Implementierung ein Neuzeichnen zu vermeiden. Das ist also auch ein wichtiger Punkt.

Vermeiden Sie CSS--Ausdrücke

Einige Freunde, die mit grundlegendem CSS3 vertraut sind, haben seine leistungsstarken Öffnungsfähigkeiten immer bewundert und verwenden gerne einige CSS-Ausdrücke, um CSS-Eigenschaften dynamisch festzulegen. Es wird in IE5 ~ IE8 unterstützt, und Ausdrücke werden in anderen Browsern ignoriert.

Das Problem bei anderen CSS-Ausdrücken besteht darin, dass sie viel häufiger neu berechnet werden, als wir denken. Deshalb versuchen wir, sie nicht zu verwenden, um übermäßigen Leistungsaufwand durch unsachgemäße Verwendung zu vermeiden.

Verwenden Sie den Link-Tag anstelle von @import

Versuchen Sie beim Entwerfen von Webseiten, Link-Tags zu verwenden, um auf CSS zu verweisen, und vermeiden Sie die Verwendung von @import. Der Grund dafür ist sehr einfach. Sie können verstehen, dass es nur darum geht, den CSS-Stil am Ende des Inhalts einzufügen .

Bild

Bilder optimieren

Bei der Erstellung von Webseiten werden wir feststellen, dass Bilder wie Banner sehr langsam geladen werden und sich auch auf die Geschwindigkeit der Website auswirken, die zwischen einigen hundert KB und einigen Megabyte liegt. Gibt es also Raum für eine Optimierung solcher Bilder? ?

Heute stelle ich Ihnen eine Plattform zur Bildoptimierung vor, nämlich Zhitu.com

, die Designer häufig nutzen. Wie Sie sehen, beträgt der Unterschied zwischen dem Originalbild und dem optimierten (Smart Image) Bild mehr als 500 KB. Wenn wir für eine Website mit vielen Bildern alle Bilder auf der gesamten Website optimieren, können Sie sich vorstellen, dass dies der Fall ist Es wird viel Verkehr eingespart! Daher kann ich diese Bildoptimierungen wärmstens empfehlen.

Vermeiden Sie leere Bildquelle

Wenn wir das img-Tag verwenden, vermeiden Sie die Verwendung einer leeren Bildquelle, da eine leere Bildquelle immer noch dazu führt, dass der Browser eine Anfrage an den Server sendet, was eine völlige Verschwendung von Zeit und Serverressourcen darstellt . Besonders wenn Ihre Website täglich von vielen Menschen besucht wird, ist der Schaden, der durch solche leeren Anfragen entsteht, nicht zu vernachlässigen

Optimieren Sie CSS Sprite

Ordnen Sie Bilder in Spirite horizontal an, während die vertikale Anordnung die Dateigröße erhöht

In Spirite kann die Kombination von Farben, die nahe beieinander liegen, die Anzahl der Farben reduzieren. Die ideale Situation liegt bei weniger als 256 Farben, um sich an das PNG8-Format anzupassen Lassen Sie keine großen Lücken in der Mitte des Geistesbildes. Dadurch erhöht sich die Dateigröße nicht wesentlich, aber der Benutzeragent benötigt weniger Speicher, um das Bild in eine Pixelkarte zu dekomprimieren.

Skalieren Sie Bilder nicht in HTML

Vermeiden Sie die Verwendung großer Bilder, um das Bild an die Seite anzupassen. Wenn Sie ein kleines Bild benötigen, verwenden Sie einfach ein kleines Bild. Der Grund dafür ist sehr einfach. Es kann den besten Effekt für verschiedene Geräte erzielen, anstatt große Bilder zu laden. Wenn es sich um einen Mobiltelefonbenutzer handelt, ist dieser Aufwand immer noch recht hoch. fokussierte Website-Ära.

Verwenden Sie das kleine und zwischenspeicherbare favicon.ico

Im Allgemeinen fügen Unternehmenswebsites oder Webmaster gerne eine Symboldatei favicon.ico hinzu. Unabhängig davon, ob Ihr Server darüber verfügt oder nicht, wird der Browser versuchen, dieses Symbol anzufordern. Daher müssen wir sicherstellen, dass dieses Symbol vorhanden ist und die Datei so klein wie möglich ist, vorzugsweise weniger als 1 KB. Legen Sie eine lange Ablaufzeit fest

Zusammenfassung:

Schließlich richtet sich dieser Artikel hauptsächlich an Webdesigner der Einstiegsklasse. Der Inhalt dieses Artikels umfasst nur HTML, CSS, Javascript, Bilder usw. Natürlich gibt es noch einige andere Methoden, auf die wir im nächsten Artikel hinweisen werden.

Haben Sie natürlich einige der oben genannten allgemeinen Tipps zur Front-End-Optimierung erhalten? Bitte haben Sie keine ähnlichen Fehler auf Ihrer Webseite, da dies sonst die Benutzererfahrung beeinträchtigt. Schließlich ist dies die Ära von WEB2.0 Negativ für Entwickler. Um bessere und herausragendere Webseiten zu erstellen, schenken wir diesen kleinen Details so viel Aufmerksamkeit wie möglich.

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

H5-Links verwenden

So verwenden Sie die H5-Textformatierung

H5+C3+JS realisiert Bodensprungeffekte

Das obige ist der detaillierte Inhalt vonWie H5+C3 die Front-End-Schnittstelle optimiert. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!