Sorgen Sie für eine schnelle Website

Sorgen Sie für eine schnelle Website

Ist Leistung wirklich wichtig?

Leistung ist wichtig, und jeder weiß das. Warum wollen wir immer noch langsame Websites erstellen und den Benutzern ein schlechtes Erlebnis bieten? Oh, kommen wir zur Sache.

HTML

1. Vermeiden Sie Inline-/eingebetteten Code:

1) Inline: Definieren Sie den Stil im Style-Attribut des HTML-Tags und definieren Sie den Javascript-Code in Attributen wie onclick;
2) Eingebettet: Verwenden Sie das Tag <style>, um den Stil auf der Seite zu definieren, und verwenden Sie das Tag <script>, um den Javascript-Code zu definieren.
3) Auf externe Dateien verweisen: Definieren Sie das href-Attribut im <style>-Tag, um auf die CSS-Datei zu verweisen, und definieren Sie das src-Attribut im <script>-Tag, um die Javascript-Datei zu importieren.

Obwohl 1 und 2 die Anzahl der HTTP-Anforderungen verringern, erhöhen sie die HTML-Größe. Im Vergleich zu 3 ist die Gesamtgröße viel kleiner, was für die Arbeitsteilung und Wartung praktisch ist.

2. Oben Stil, unten Schrift:

 <html>
  <Kopf>
      <meta charset="UTF-8">
      <title>Browser-Diät</title>
      <!-- CSS -->
      <link rel="stylesheet" href="style.css" media="alle">
  </Kopf>
  <Text>
     <a>Hallo</a>
     <!-- JS -->
     <script async src="script.js"></script>
  </body>
</html>

1) Der Stil befindet sich im Kopf und die Seite wird schnell gerendert, sodass der Benutzer das Gefühl hat, dass die Seite schnell geladen wird. Im Gegenteil, Sie werden zunächst ein unordentliches Seitenlayout sehen, das bei den Leuten ein ungutes Gefühl hinterlässt.
2) Wenn Sie das Skript oben platzieren, wirkt sich dies auf das Rendern oder parallele Laden des HTML aus. Wenn der erste Bildschirm geladen wird, müssen Benutzer die Funktion im Allgemeinen nicht sehen. Daher ist es besser, das Skript unten zu platzieren. Versuchen Sie, das Skript asynchron mit dem Attribut „async“ zu laden:

3. HTML komprimieren

Um die Lesbarkeit Ihres Codes zu gewährleisten, fügen Sie am besten Kommentare hinzu und verwenden Sie Einrückungen in Ihrem Code.

Für den Browser spielt das alles jedoch keine Rolle. Aus diesem Grund ist es sehr nützlich, Ihr HTML mithilfe automatisierter Tools zu minimieren.

Durch das Entfernen überflüssiger Leerzeichen, Kommentare und einiger unnötiger Zeichen, die für die Inhaltsstruktur nicht relevant sind, können einige Bytes gespart werden. Versuchen Sie, die GZIP-Komprimierung zu verwenden.

4. Reduzieren Sie die Anzahl der DOM-Knoten

Verwenden Sie semantische Tags anstelle von universellen Divs.

5. Der Einfluss des HTML-Schreibens auf die GZIP-Komprimierungsrate

Beim Schreiben von Tag-Attributen ist es am besten, mehrere identische Tag-Attributwerte in derselben Reihenfolge beizubehalten. Kann die GZIP-Komprimierung beschleunigen.

CSS

1. CSS komprimieren

Komprimieren Sie CSS mit automatisierten Tools, ähnlich wie beim Komprimieren von HTML. Lernen Sie, sich wiederholenden Code zu verfeinern.

2. Mehrere CSS zusammenführen

Die Zusammenführung erfolgt im Allgemeinen über eine CDN-Zusammenführung oder die Zusammenführungstools des Unternehmens, um die Anzahl der HTTP-Anfragen effektiv zu reduzieren.

3. Sinnvoller Einsatz von CSS-Ausdrücken

Nicht jeder kann CSS-Ausdrücke sinnvoll verwenden. Überlassen Sie also alle Funktionen Javascript. cssWir machen eine Pause.

BILDER

1. CSS-Sprite verwenden

Integrieren Sie die kleinen Ebenen im PSD zu einer Ebene und das Layout ist fertig. Das Layout sollte kompakt sein. Bei manchen Bildern mit Ecken und Kanten können Sie die Farbe der Ecken und Kanten einstellen. Sie können auch png-8 auf png-24 einstellen (IE6-Filterverarbeitung)

2. Verwenden Sie die Base64-Bildcodierung, um gewöhnliche CSS-Sprite-Bilder zu ersetzen

Vor dem Gebrauch:

 .img {
  Hintergrundbild: URL('Bild.png');
}

Nach Gebrauch:

 .img {
  Hintergrundbild: url('data:image/png;base64,iVBORw0KGgo');}

Die Base64-Bildkodierung ist nur für einzelne Bilder, nicht für CSS-Sprite-Bilder, und unterstützt gängige Browser sowie IE8 und höher. Die Anzahl der HTTP-Anfragen kann reduziert werden. Für HTML und CSS ohne GZIP-Komprimierung ist es jedoch nicht ratsam, die durch HTTP-Anfragen erhaltenen großen Dateien zu reduzieren.

3. Bilder optimieren

Das Bildformat sollte gut kontrolliert werden. Wenn die Bildqualität in Ordnung ist, können je nach Situation die Formate PNG, JPG und GIF verwendet werden. Im Allgemeinen verwenden CSS-Sprites das PNG-Format, animierte Bilder das GIF-Format und farbenfrohe Werbebilder das JPG-Format.

Die Bildgröße sollte kontrolliert werden und die Website kann die Bilder zwischenspeichern. Im Allgemeinen sollte ein Werbebild etwa 100 KB groß sein. Wenn das Bild zu groß ist, können Sie es in mehrere Teile schneiden und diese zusammenfügen.

Auf einer Front-End-CSS-Website wurde erklärt, dass jeder, der für das Layout Bilder verwenden muss, ein Betrüger sei. Mit der zunehmenden Popularität von CSS3 wird dieser Satz zum Motto.

4. „Progressive JPEG-Analyse“

Zusammenfassend lässt sich sagen, dass das kontinuierliche JPG-Format die Leistung verbessert.

JAVASCRIPT

1. Asynchrones Laden von Dateien

 var vst = document.createElement('Skript');
    vst.type = "Text/Javascript";
    vst.async = wahr;
    vst.src = Quellindex;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(vst, s);

Wenn der Download mancher Drittanbieterdateien problematisch ist oder die Ladezeit der Seite lang ist. Wir müssen diese Dateien asynchron laden, asynchron ist ein guter Weg.

2. Aufbewahrung der geloopten Objekte

Vor dem Gebrauch:

 var str = "nanananana"; 
für (var n = 0; n < str.length; n++) {}

Nach Gebrauch:

 var str = "nanananana", 
strLgth = str.Länge; 
für (var n = 0; n < strLgth ; n++) {}

Schleifen verbrauchen viel Leistung. Durch das Speichern der Objekte in der Schleife kann die Notwendigkeit verringert werden, in jeder Schleife Objektberechnungen durchzuführen.

3. Reflow und Neuzeichnen minimieren

Vor dem Gebrauch:

 var coored = document.getElementById("ctgHotelTab");
    document.getElementById("ctgHotelTab").style.top = coored.offsetTop + 35 + "px";

Nach Gebrauch:

 var coored = document.getElementById("ctgHotelTab"),
    offsetTop = coored.offsetTop + 35;
    document.getElementById("ctgHotelTab").style.top = offetTop + "px";

Wenn das Layout eines Elements unverändert bleibt, sich jedoch das Erscheinungsbild ändert, wird ein Neuanstrich erforderlich.

Wenn Sie style.top festlegen, muss der Browser das Layout neu berechnen. Jedes Mal, wenn wir offsetTop anfordern, berechnet der Browser das Layout neu. Das Ändern eines Layouts führt zu einem Neufluss.

4. JavaScript komprimieren

Komprimieren Sie JS mit automatisierten Tools. Dasselbe wie HTML und CSS.

5. Mehrere JS-Dateien zusammenführen

Die Zusammenführung erfolgt im Allgemeinen über eine CDN-Zusammenführung oder die Zusammenführungstools des Unternehmens, um die Anzahl der HTTP-Anfragen effektiv zu reduzieren.

6. Im Vergleich zu nativem JS und Framework-JS sind For-Schleifen und For jeweils besser.

Tools für Leistungstests

Dasjenige, das ich häufig verwende, ist YSLOW. Auch die Seitengeschwindigkeit ist gut. Ich gebe Ihnen einige Leistungsvorschläge.

Zusammenfassen

Leistung ist wichtig, daran besteht kein Zweifel. Ich gebe meine Arbeit nur als Referenz weiter. Weitere Informationen finden Sie unter: http://browserdiet.com/zh/

<<:  HTML implementiert Double 11-Coupon-Erfassung (Zeit zum Öffnen der Coupon-Erfassungsseite festlegen)

>>:  Implementierung des CSS Fantastic Border Animation-Effekts

Artikel empfehlen

Lösung für das Problem, dass die Anzahl der MySQL-Verbindungen in CentOS 7 auf 214 begrenzt ist

Finden Sie das Problem Vor kurzem ist bei mir ein...

Installieren Sie den Quellcode der MySQL-Datenbank 5.6 unter Linux und ändern Sie das Anmeldebenutzerkennwort

In diesem Artikel wird hauptsächlich die Installa...

Analyse des Quellcodes des React-Ereignismechanismus

Inhaltsverzeichnis Prinzip Quellcodeanalyse Deleg...

Detailliertes Tutorial zur Installation des PHP-FPM-Dienstes/der PHP-FPM-Erweiterung/-Konfiguration in Docker

Als ich php56 mit brew auf mac installierte, stie...

So verwenden Sie JSX zum Implementieren von Karussellkomponenten (Front-End-Komponentenbildung)

Bevor wir JSX zum Erstellen eines Komponentensyst...

Nginx-Zugriffssteuerungs- und Parameteroptimierungsmethoden

Globale Nginx-Variablen Es gibt viele globale Var...

Detaillierte Erläuterung der WordPress-Multisite-Konfiguration in der Nginx-Umgebung

Mit der Multisite-Funktion von WordPress können S...

Detaillierte Erklärung dieses Zeigeproblems in JavaScript

Vorwort Glauben Sie mir, solange Sie sich an die ...

Detaillierte Erklärung zur Installation von Redis im Docker und zum Starten als Konfigurationsdatei

Update: Vor Kurzem wurde festgestellt, dass der S...

Zusammenfassung der Dockerfile-Maven-Plugin-Nutzungsanleitung

Inhaltsverzeichnis POM-Konfiguration Setting.xml-...

MySQL ändert die Standard-Engine und Zeichensatzdetails

Inhaltsverzeichnis 1. Datenbankmodul 1.1 Datenban...

So installieren Sie Elasticsearch und Kibana in Docker

Elasticsearch erfreut sich derzeit großer Beliebt...

Ein möglicher Fehler, wenn MySQL die Summenfunktion auf der Fensterfunktion ausführt

Beim Verwenden der MySql-Fensterfunktion zum Samm...

Drei Möglichkeiten zum Weiterleiten des Linux-SSH-Ports

ssh ist eines der beiden Befehlszeilentools, die ...

MySql 8.0.11 Installations- und Konfigurationstutorial

Offizielle Website-Adresse: https://dev.mysql.com...