Artikel Einführung von Wulin.com (www.vevb.com): Viele Leute fragen, was HTML5 ist? Wir sagen, dass die Methode, die wir zuerst HTML5 verwenden können, darin besteht, zuerst docType zu ändern, da viele Seiten derzeit immer noch auf traditionelle Weise sind. Die HTML5 -Methode ist mit dem IE -Browser kompatibel und kann von IE6 zu IE10 verwendet werden und kann von fortschrittlichen Browsern unterstützt werden.
[Anmerkung des Herausgebers] Der folgende Artikel wurde von einem IT -Techniker namens Zhang Liming verfasst, der auf der Infoq -Webseite veröffentlicht wurde. Dieses Mal analysierte er die Leistung von HTML5 aus 9 verschiedenen Aspekten im Volltext, der immer noch von entsprechenden Entwicklern gelesen wird.
Aus Perspektive der Leistung reduziert HTML5 zunächst HTML -Dokumente, was dies einfacher macht. Erstens gab es aus der Sicht der Lesbarkeit der Benutzer viele Dinge, die ursprünglich von Anfängern zum ersten Mal nicht verstanden wurden, um diese Dinge zu sehen, und die HTML5 -Deklarationsmethode ist offensichtlich freundlicher für die Benutzer. Zweitens ist die Dokumentcodierungserklärung sehr einfach, wenn sie sich in HTML5 befindet. Viele Leute fragen, was HTML5 ist? Wir sagen, dass die Methode, die wir zuerst HTML5 verwenden können, darin besteht, zuerst docType zu ändern, da viele Seiten derzeit immer noch auf traditionelle Weise sind. Die HTML5 -Methode ist mit dem IE -Browser kompatibel und kann von IE6 zu IE10 verwendet werden und kann von fortschrittlichen Browsern unterstützt werden. Der einfachste Weg, HTML5 zu nutzen, besteht darin, DocType zu ändern.
1. Ein einfacheres Etikett
Das nächste ist vielleicht keine sehr verbreitete Sache, aber es ist etwas, das ich bevorzuge, indem ich eine einfachere Etikettenmethode verwendete. Wie Sie aus diesem Namen ergeben können, wird HTML5 von HTML4 geerbt. HTML4 verfügt über einen strengen Modus und den Übergangsmodus. HTML5 unterstützt diesen Übergangsmodus, was bedeutet, dass Sie einige Tags nicht schließen können. Ich empfehle jedoch nicht alle Tags, zum Beispiel ist das Body -Tag nicht geschlossen, was wir nicht empfehlen. Das am häufigsten verwendete P-Label ist aber auch das List-Tag Li. Warum sagst du das? Erstens ist diese Methode aus visueller Sicht etwas einfacher. Dann ist der Schlüssel, dass während des Dokumentenübertragungsprozesses weniger Inhalt vorhanden ist.
Die Deklaration von HTML5 -Tag -Attributen unterstützt drei Möglichkeiten: Einzelhalterungen, Doppelklammern und unverzweigte Klammern. Um die Größe des Dokuments zu verringern, habe ich die Methode ohne doppelte Zitate oder einzelne Zitate ausgewählt. Es ist jedoch zu beachten, dass unter der Annahme, dass es sich um eine Erklärung der Klassenattribute handelt, da Attribute mehrere Klassen enthalten können und wenn mehrere Klassen in Klammern eingeschlossen sein müssen. Lassen Sie mich Ihnen in dieser Hinsicht eine Praxis von Google zeigen. Google selbst hat eine Seite, die die oben genannten vollständig ausübt und die Größe des Dokuments um 20%verringert und die Übertragung von HTML -Dokumenten um 20%verringert. Wenn das Ganze praktiziert wird, kann es einen Rückgang zwischen 5% und 20% erreichen. Dies ist der erste Schritt, der die Größe des HTML -Dokuments verringert.
2. Bildoptimierung
Als nächstes geht es um die Optimierung von Bildern, die immer Elemente sind, die lieben und hassen. Denn wenn es zu viele Bilder gibt, zieht es die Ladegeschwindigkeit der gesamten Seite ernsthaft nach unten. In Bezug auf die Optimierungsmethoden von Bildern gibt es viele Einführungen in das Buch "High Performance -Website". Zusammenfassend gibt es drei Hauptpunkte: Verwenden von Elfen, Optimierung der Bildergröße und Verwendung von Data URI. Ich werde hier nicht auf Details eingehen.
Eine weitere Idee der Bildoptimierung ist: No-Image. Gib die Bilder auf und umarme CSS3. Ursprünglich musste ich ein Bild mit einem abgerundeten Eckeffekt einstellen, aber jetzt verwendete ich Border-Radius in CSS3. Früher habe ich einen Schatteneffekt festgelegt, aber jetzt verwende ich Box-Shadow in CSS3. Früher habe ich ein Gradienten -Hintergrundbild festgelegt, aber jetzt verwende ich Gradienten in CSS3.
3.. Vorab der Abnahme
Lassen Sie uns als nächstes über Vorabsteuerung sprechen, was eine weitere Möglichkeit der Optimierung ist. Unsere aktuellen Optimierungsideen sind nichts mehr als wenige. Viele von ihnen stammen aus der Perspektive weniger Dinge, beispielsweise wurde die Dokumentgröße vorher reduziert und die Bildgröße reduziert. Viele Bilder werden zu Elfen, um die Anzahl der Sendungsanfragen zu verringern. Für das Vorabbau ist es eine andere Denkweise. Ressourcen früh beladen. Wenn der Benutzer auf den Punkt geht, hat er tatsächlich geladen, sodass er definitiv schneller sein wird.
Es gibt zwei Teile für das Vorabbau: Einer ist das Vorabbau von Ressourcen, und der andere ist vorauflösend DNS.
Es gibt mehrere Punkte zu beachten, wenn die Ressourcenvorladung vorliegt:
Das Vorladen wird nur gezogen, wenn der Browser im Leerlauf ist, aber es wird nicht garantiert, dass er ihn zieht. Dies ist ein sehr wichtiger Punkt. Weil der Browser selbst einen globalen Zuhörer hat, der eine interne Schnittstelle ist. Wenn die Browserluft im Leerlauf ist, wird der Browser im Leerlauf ausgeführt. Dieser Leerlaufrückruf wird jedoch möglicherweise nicht ausgelöst, sodass nicht garantiert wird, dass Vorspannung durchgeführt wird.
Chrome unterstützt keine Vorspannung von HTTPS -Ressourcen. Zum Beispiel ist Alipay eine HTTPS-Seite, Chrome wird nicht vor dem PULL vorgehen.
Obwohl eine vorgezogene Seite nach dem Vorkommen nicht sichtbar ist, analysiert sie tatsächlich normal. Wenn ich die Anmeldeseite vorpulliere, enthält die Anmeldeseite viele Ressourcen, z. B. Bilder, CSS-Dateien und JS-Dateien. Es wird normal von oben nach unten analysiert. Während des Parsingprozesses erscheint diese Seite nicht, aber sie existiert tatsächlich. In HTML5 können Sie den aktuellen Seitenstatus über document.visibilityState erhalten. Normalerweise hat die Seite zwei Staaten, sichtbar und unsichtbar, aber jetzt gibt es einen neuen Staat namens Vorrenderstaat. Sie können direkt feststellen, ob sich die Seite im Vorausdruck befindet.