Fähigkeiten zur Seiten-Refaktorierung - Inhalt

Genug des Smalltalks <br />Basierend auf den zahlreichen goldenen Regeln zum Erstellen leistungsstarker Yahoo-Websites, die es im Internet gibt, möchte ich über meine eigenen Regeln sprechen.
Der Code ist in 7 Kategorien und 34 Artikel unterteilt, darunter Inhalt, Server, Cookies, CSS, Javascript, Bilder und mobile Anwendungen.

1. Versuchen Sie, die Anzahl der HTTP-Anfragen zu reduzieren . <br />Wenn ein Benutzer Ihre Seite lädt, werden 80 % der Zeit dafür verwendet, verschiedene Elemente der Seite herunterzuladen, darunter Bilder, Stile, Skripte, Flash usw. Daher kann die Reduzierung von HTTP-Anfragen die Antwortgeschwindigkeit verbessern. Zum Beispiel: Baidu, Google, da gibt es nur eine Zeile ...
Wie wir alle wissen, geht es beim Zusammenführen von Dateien, CSS Sprites usw. nicht nur darum, die Anzahl der Anfragen zu verringern, sondern auch darum, die Auswirkungen auf andere Faktoren abzuwägen.
Zusammengeführte Dateien: Die Kopplung ist groß und die Funktionsmodule sind nicht auf den ersten Blick zu unterscheiden.
CSS Sprite: Der Schwierigkeitsgrad, eine große Anzahl integrierter Bilder zu verwalten, wird exponentiell zunehmen.
Darüber hinaus wird das supergroße integrierte Bild, bis es heruntergeladen ist, nicht überall angezeigt, wo es verwendet wird.

2. Reduzieren Sie die Anzahl der DNS-Suchvorgänge. <br />Jeder unabhängige Domänenname verfügt über eine entsprechende IP-Adresse. Das heißt, wenn Sie www.baidu.com eingeben, weiß der Server nicht, dass Sie nach „baidu“ suchen, löst es jedoch in die entsprechende IP-Adresse auf und greift dann darauf zu. Genau wie beim Nachschlagen in einem Telefonbuch wartet der Browser einfach auf den Analysevorgang, der normalerweise 20 bis 120 Millisekunden dauert.
Die Anzahl der DNS-Lookups ist die Gesamtzahl der verschiedenen Domänennamen, auf die Sie zugreifen, um CSS, JS, Bilder usw. herunterzuladen, einschließlich Subdomänen. Externe Domänen, die sich von der primären Domäne unterscheiden, benötigen mehr Zeit.
Lösung: Verwenden Sie CSS, um einige Bildstile und JS-Animationen zu lösen (der NB-Teil von CSS3).
Platzieren Sie portable externe Domänenressourcen unter der Subdomäne.

3. Weiterleitungen vermeiden <br />Weiterleitungen werden mithilfe der Codes 301 und 302 implementiert, wie beispielsweise im folgenden HTTP-Anforderungsheader:
HTTP/1.1 301 dauerhaft verschoben
Standort: http://example.com/newuri
Inhaltstyp: text/html
Der Browser leitet den Benutzer zur unter „Standort“ angegebenen URL weiter. Wenn eine Zwischenspeicherung erforderlich ist, muss dort „Expires“ oder „Cache-Control“ angegeben werden.
Obwohl JS Sprünge erzielen kann, ist es dennoch erforderlich, den 3XX-Statuscode zu verwenden, um sicherzustellen, dass die Zurück-Schaltfläche ordnungsgemäß funktioniert.
Dieser Teil scheint nichts mit reinem Front-End oder wenig Kontakt zu tun zu haben, aber um zu einem echten NB-Front-End heranzuwachsen, müssen Sie diese früher oder später beherrschen.

4. Zwischenspeicherbares AJAX
Jeder weiß, wie wichtig der Cache für Benutzer ist, daher ist die Cache-Funktion in Ajax unverzichtbar.
Was ich aber sagen möchte, ist, dass Sie je nach Ihren Anforderungen entscheiden sollten, ob Sie cachen möchten.
IE fügt automatisch einen Cache hinzu, Chrome jedoch nicht.
Hier sind einige gängige Methoden zum Leeren des Cache:
Auf der Serverseite: header("Cache-Control: no-cache, must-revalidate");
Fügen Sie xmlhttpObj.setRequestHeader("If-Modified-Since","0"); hinzu, bevor Sie die Ajax-Anfrage senden
Fügen Sie xmlhttpObj.setRequestHeader("Cache-Control","no-cache"); hinzu, bevor Sie eine Ajax-Anfrage senden.
Fügen Sie nach dem Ajax-URL-Parameter ?t="Math.random()" hinzu.

5. Verzögertes Laden von Inhalten
Leistung und Verhalten einer Webseite sollten getrennt werden, zuerst die Leistung, dann das Verhalten. Daher besteht die Priorität zunächst darin, die Seite schnell darzustellen, dann einige notwendige funktionale Interaktionen und schließlich einige Animationen oder ausgefallene Effekte, um das Erlebnis zu verbessern.

6. Vorladen
Das Ziel des Vorladens besteht darin, die asynchrone oder Leerlaufzeit des Browsers zum Laden des unmittelbar bevorstehenden Inhalts zu nutzen und so schnell auf Benutzervorgänge zu reagieren.
Zum Beispiel:
Bei Webspielen werden in der Leerlaufzeit die benötigten Bilder für die nächste Szene geladen.
Das JS auf der Seite verwendet das IMG-Objekt, um das JS vorab zu laden und es dann bei Bedarf auszuführen.

7. Reduzieren Sie die Anzahl der DOM-Elemente
Eine komplexe Seite bedeutet, dass mehr Daten heruntergeladen werden müssen, was auch bedeutet, dass die JavaScript-Durchquerung des DOM langsamer ist.
Lösung: Verstehen Sie die Semantik jedes Tags genau und reduzieren Sie die große Anzahl der für das Layout aufgelisteten DIVs.

8. Seiteninhalte nach Domänennamen aufteilen
Beim Laden einer Seite werden viele externe Ressourcen heruntergeladen, z. B. CSS, JS, IMG usw. Durch die Klassifizierung und Verteilung auf verschiedene Subdomänen wird jedoch die Effizienz des parallelen DNS-Downloads verbessert.
Weil die maximale Anzahl der vom Browser zugelassenen Verbindungen und die maximale Anzahl der von jedem Server zugelassenen Verbindungen begrenzt sind.

9. Vermeiden Sie 404
Der HTTP-Overhead ist enorm und es ist völlig unnötig, ihn zum Anfordern einer 404-Antwort zu verwenden.
Ausnahmen sind auch nicht gut für die SEO der Site. Auch wenn einige Websites keine Einschränkungen für rabots.txt haben, sollten Sie eine leere Datei hochladen. Andernfalls zeichnet der Engine-Crawler eine 404 für Ihre Site auf, wodurch das Gewicht Ihrer Site verringert wird.