Heim >Web-Frontend >HTML-Tutorial >HTML-Optimierungstechniken, die Sie kennen müssen
HTML-Optimierungstechniken, die Sie kennen müssen
- php中世界最好的语言Original
- 2018-01-24 10:10:081516Durchsuche
Dieses Mal stelle ich Ihnen HTML-Optimierungstechniken vor, die Sie kennen müssen. Welche Vorsichtsmaßnahmen Sie bei der HTML-Optimierung beachten müssen. Schauen wir uns die folgenden praktischen Fälle an.
Um die Leistung von Webseiten zu verbessern, gehen viele Entwickler von vielen Aspekten aus, wie zum Beispiel JavaScript, Bildoptimierung, Serverkonfiguration, Dateikomprimierung oder Anpassung von CSS.
Es ist klar, dass HTML einen Engpass erreicht hat, obwohl es eine wesentliche Kernsprache für die Entwicklung von Webschnittstellen ist. Auch die Belastung durch HTML-Seiten wird immer größer. Die meisten Seiten benötigen durchschnittlich 40 KB Speicherplatz. Einige große Websites enthalten beispielsweise Tausende von HTML-Elementen und die Seitengröße ist größer.
Wie man die Komplexität von HTML-Code und die Anzahl der Seitenelemente effektiv reduziert. Dieser Artikel löst hauptsächlich dieses Problem. Er stellt vor, wie man aus vielerlei Hinsicht prägnanten und klaren HTML-Code schreibt, der das Laden der Seite beschleunigen kann . und kann auf einer Vielzahl von Geräten gut ausgeführt werden.
Die folgenden Grundsätze müssen während des Design- und Entwicklungsprozesses befolgt werden:
Strukturelle Trennung: Verwenden Sie HTML, um Struktur hinzuzufügen, nicht den Stil des Inhalts.
Halten Sie es sauber: Fügen Sie Tools zur Codeüberprüfung hinzu zum Workflow; Codestruktur und Formatierung mithilfe von Tools oder Stilassistenten beibehalten
Eine neue Sprache lernen: Elementstruktur und semantisches Markup abrufen.
Sorgen Sie für Barrierefreiheit: Verwenden Sie ARIA-Attribute, Fallback-Attribute usw.
Test: Stellen Sie sicher, dass die Website auf mehreren Geräten gut läuft, verwenden Sie Emulatoren und Leistungstools.
Die Beziehung zwischen HTML, CSS und JavaScript
HTML ist eine Auszeichnungssprache, die zur Anpassung der Struktur und des Inhalts der Seite verwendet wird. HTML kann nicht zum Ändern von Stilinhalten verwendet werden, und Sie können auch keinen Textinhalt in den Header-Tag eingeben, wodurch der Code langwierig und komplex wird. Stattdessen ist es sinnvoller, CSS zum Ändern von Layoutelementen und Erscheinungsbild zu verwenden. Das Standard-Erscheinungsbild des HTML-Elements wird durch das Standard-Stylesheet des Browsers definiert. In Chrome wird das h1-Tag-Element beispielsweise in einer 32px-Fettschrift dargestellt.
Drei allgemeine Designregeln:
Verwenden Sie HTML zum Erstellen der Seitenstruktur, CSS zum Ändern der Seitendarstellung und JavaScript zum Implementieren der Seitenfunktion. CSS ZenGarden demonstriert die Verhaltenstrennung sehr gut.
Verwenden Sie weniger HTML-Code, wenn dieser mit CSS oder JavaScript implementiert werden kann.
Speichern Sie CSS- und JavaScript-Dateien getrennt von HTML. Dies kann beim Caching und Debuggen hilfreich sein.
Die Dokumentstruktur kann auch wie folgt optimiert werden:
1. Verwenden Sie den HTML5-Dokumenttyp:
<!DOCTYPE html> <html> <head> <title>Recipes: pesto</title> </head> <body> <h1>Pesto</h1> <p>Pesto is good!</p> </body> </html>
2 Zitieren Sie die CSS-Datei am Anfang des Dokuments wie folgt:
<head> <title>My pesto recipe</title> <link rel="stylesheet" href="/css/global.css"> <link rel="stylesheet" href="css/local.css"> </head>
Mit diesen beiden Methoden bereitet der Browser die CSS-Informationen vor, bevor er den HTML-Code analysiert. Dies trägt dazu bei, die Leistung beim Laden von Seiten zu verbessern.
Geben Sie den JavaScript-Code vor dem schließenden Body-Tag am Ende der Seite ein. Dies trägt dazu bei, die Ladegeschwindigkeit der Seite zu verbessern, da der Browser die Seite lädt, bevor er den JavaScript-Code analysiert 🎜> Werden Seitenelemente einen positiven Einfluss haben?
Verwenden Sie Defer- und Async-Attribute. Es ist nicht garantiert, dass Skriptelemente mit Async-Attributen in der richtigen Reihenfolge ausgeführt werden.<body> ... <script src="/js/global.js"> <script src="js/local.js"> </body>
Handler können im JavaScript-Code hinzugefügt werden. Fügen Sie es niemals zum HTML-Inline-Code hinzu. Beispielsweise kann der folgende Code leicht zu Fehlern führen und ist schwer zu warten:
index.html:
js/local.js:<head>
...
<script src="js/local.js">
</head>
<body onload="init()">
...
<button onclick="handleFoo()">Foo</button>
...
</body>Überprüfeninit();
var fooButton =
document.querySelector('#foo');
fooButton.onclick = handleFoo();Eine Möglichkeit, Ihre Webseiten zu optimieren, besteht darin, dass Ihr Browser illegalen HTML-Code verarbeitet. Legaler HTML-Code lässt sich leicht debuggen, benötigt weniger Speicher, verbraucht weniger Ressourcen, lässt sich leicht analysieren, rendern und wird schneller ausgeführt. Unzulässiger HTML-Code erschwert die Umsetzung von Responsive Design enorm.
Bei der Verwendung von Vorlagen ist der legale HTML-Code äußerst wichtig. Es kommt häufig vor, dass Vorlagen bei der Integration mit anderen Modulen gut funktionieren. Daher muss die Qualität des HTML-Codes gewährleistet sein die folgenden Maßnahmen:
Fügen Sie Ihrem Workflow Validierungsfunktionen hinzu: Verwenden Sie Validierungs-Plug-Ins wie HTMLHint oder SublineLinter, um Codefehler zu erkennen.
HTML5-Dokumenttyp verwenden Stellen Sie sicher, dass die hierarchische Struktur von HTML leicht zu verwalten ist, und vermeiden Sie die Verschachtelung von Elementen in einem links geöffneten Zustand.
Achten Sie darauf, das schließende Tag jedes Elements hinzuzufügen.
Unnötigen Code entfernen; es ist nicht erforderlich, schließende Tags für selbstschließende Elemente hinzuzufügen; ihnen muss kein Wert zugewiesen werden und sie sind wahr, wenn sie vorhanden sind;
Codeformat
Durch die Formatkonsistenz ist HTML-Code leicht zu lesen, zu verstehen, zu optimieren und zu debuggen.
Semantische Tags
Semantik bezieht sich auf bedeutungsbezogene Dinge. HTML kann die Semantik aus dem Inhalt der Seite erkennen: Die Benennung von Elementen und Attributen drückt die Rolle und Funktion des Inhalts für einen bestimmten Zweck aus Ausmaß. HTML5 führt neue semantische Elemente wie 1aa9e5d373740b65a0cc8f0a02150c53, c37f8231a37e88427e62669260f0074d ein.
Die Auswahl der richtigen Elemente zum Schreiben Ihres Codes stellt die Lesbarkeit Ihres Codes sicher:
Verwenden Sie 4a249f0d628e2318394fd9b75b4636b1(c1a436a314ed609750bd7c7d319db4da,684271ed9684bde649abda8831d4d355...), um den Titel darzustellen, ff6d136ddc5fdfeffaf53ff6ee95f185 oder c34106e0b4e09414b63b2ea253ff83d6 ;article>-Tag,
Wählen Sie geeignete HTML5-Semantikelemente wie 1aa9e5d373740b65a0cc8f0a02150c53, 15221ee8cba27fc1d7a26c47a001eb9b; Um den Text zu beschreiben, können semantische HTML5-Elemente Inhalte bilden, und das Gegenteil ist nicht der Fall.
Verwenden Sie die Tags 907fae80ddef53131f3292ee4f81644b anstelle der Tags 5a8028ccc7a7e27417bff9f05adf5932
Verwenden Sie 2e1cf0710519d5598b1f0f14c36ba674-Elemente, Eingabetypen, Platzhalter und andere Attribute, um die Validierung zu erzwingen.
Das Mischen von Text und Elementen als untergeordnete Elemente eines anderen Elements führt zu Layoutfehlern.
Ich glaube, dass Sie die Methoden beherrschen, nachdem Sie diese Fälle gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!
Verwandte Lektüre:
So legen Sie die horizontale und vertikale Zentrierung von HTML-Elementen festTitel-Tags und Absätze in XHTML Welche Möglichkeiten gibt es, Tags zu verwendenWie man HTML und CSS verwendet, um klare Wörter zu bildenDas obige ist der detaillierte Inhalt vonHTML-Optimierungstechniken, die Sie kennen müssen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!