Optimierung der mobilen HTML5-Leistung

HTML5-Leistungsoptimierung für mobile Endgeräte
[Einleitung] Dank der Beliebtheit von Smartphones und der Internet+-Bewegung in allen Lebensbereichen ist der Marktanteil mobiler Endgeräte stark gewachsen. Im Januar 2016 veröffentlichte E-Commerce-Daten für das Jahr 2015 zeigten, dass Chinas mobiles Online-Shopping-Transaktionsvolumen im Jahr 2015 im Jahresvergleich um 123,2 % anstieg und damit erstmals 55 % des gesamten Online-Shopping-Transaktionsvolumens ausmachte PC-Seite.
Technisch gesehen ist HTML5 sehr beliebt:
1: Daten zeigen, dass im Jahr 2015 80 % der Apps ganz oder teilweise auf HTML5 basieren.
2: Ab dem 1. September unterstützt Google Chrome die automatische Wiedergabe von Flash nicht mehr.
3: Alle Anzeigen auf den Websites von Amazon (einschließlich des Amazon.com-Portals) verwenden kein Flash mehr. In absehbarer Zeit werden Flash-Anzeigen durch HTML5-Anzeigen ersetzt.
Mobiles Endgerät + HTML5, diese Kombination stellt eine große Herausforderung für Front-End-Ingenieure dar: Wie kann man dafür sorgen, dass die entwickelten Seiten ein besseres Erlebnis bieten? Dies ist das Thema, über das wir heute sprechen: Optimierung der Front-End-Leistung mobiler HTML5-Seiten.
PHP Chinesische Website-HTML5-Schulung, wie man die Leistung von HTML5 auf Mobilgeräten optimiert, muss zunächst die folgenden Prinzipien klären:
1. PC-Optimierungsmethoden sind auch auf der Mobilseite anwendbar.
2. Auf der mobilen Seite schlagen wir eine dreisekündige Rendering-Abschlussanzeige für den ersten Bildschirm vor.
3. Basierend auf dem zweiten Punkt sollte der erste Bildschirm in 3 Sekunden geladen werden oder Loading verwenden.
4. Basierend auf den durchschnittlichen 338 KB/s (2,71 Mbit/s) des 3G-Netzwerks von China Unicom sollte die erste Bildschirmressource 1014 KB nicht überschreiten.
5. Aufgrund der mobilen Konfiguration des Mobiltelefons steht neben der Ladegeschwindigkeit auch die Rendering-Geschwindigkeit im Fokus der Optimierung.
6. Basierend auf dem fünften Punkt muss der Code angemessen verarbeitet werden, um den Rendering-Verlust zu reduzieren.
7. Basierend auf dem zweiten und fünften Punkt sollten alle Codes, die das Laden und Rendern des ersten Bildschirms beeinflussen, hinter der Verarbeitungslogik platziert werden.
8. Nach Abschluss des Ladevorgangs müssen Benutzer auch bei der interaktiven Verwendung auf die Leistung achten.
Wir diskutieren mehrere repräsentative Lösungen:
Ladeoptimierung
Bei mobilen Webseiten ist der Ladevorgang der zeitaufwändigste Prozess und kann 80 % der Gesamtzeit ausmachen Natürlich darf die Optimierung anderer Frontend-Elemente der mobilen Website nicht außer Acht gelassen werden.
1. HTTP-Anfragen reduzieren
Da der mobile Browser auf 4 Anfragen gleichzeitig reagiert (Android unterstützt 4, iOS 5 kann 6 unterstützen), ist es notwendig, die Anzahl zu minimieren Seitenanfragen. Die Anzahl der gleichzeitigen Anfragen für den ersten Ladevorgang darf 4 nicht überschreiten. Es werden folgende Optimierungspunkte empfohlen:
1. Kleine Bilder zusammenführen, Sprite-Bilder verwenden 🎜>
2. Cache
Die Verwendung von Caching kann die Anzahl der Anfragen an den Server reduzieren und Ladezeit sparen, daher müssen alle statischen Ressourcen auf der Serverseite zwischengespeichert werden und es sollten ebenso viele lange Caches verwendet werden wie möglich (Zeitstempel können verwendet werden, um lange Cache-Ressourcen zu aktualisieren). 1. Alle zwischenspeicherbaren Ressourcen zwischenspeichern
2. Verwenden Sie einen langen Cache (verwenden Sie einen Zeitstempel, um den Cache zu aktualisieren)

3

Eine Reduzierung der Ressourcengröße kann die Anzeige von Webseiten beschleunigen, daher sollte die Codekomprimierung für HTML, CSS, Java usw. durchgeführt werden und GZip sollte auf der Serverseite eingestellt werden. 1. Komprimierung (z. B. zusätzliche Leerzeichen, Zeilenumbrüche und Einzüge)
4. Nicht blockierend

Java im HTML-Header geschrieben (Kein asynchrones). ), und in HTML-Tags geschriebener Style blockiert das Rendern der Seite, daher wird CSS am Kopf der Seite platziert und mit Link eingeführt, um das Schreiben von Style in HTML-Tags zu vermeiden, und Java wird am Ende der Seite platziert oder geladen asynchron
5. Verwenden Sie das Laden des ersten Bildschirms
Die schnelle Anzeige des ersten Bildschirms kann die Wahrnehmung der Seitengeschwindigkeit durch den Benutzer erheblich verbessern, daher sollten Sie Ihr Bestes geben, um die schnelle Anzeige des ersten Bildschirms zu optimieren Bildschirm.
6. Laden bei Bedarf
Stellen Sie Ressourcen, die sich nicht auf den ersten Bildschirm auswirken, und Ressourcen, die derzeit nicht auf dem aktuellen Bildschirm verwendet werden, so ein, dass sie nur dann geladen werden, wenn der Benutzer sie benötigt, was möglich ist Verbessern Sie die Anzeigegeschwindigkeit wichtiger Ressourcen erheblich und reduzieren Sie den Gesamtfluss.
1. LazyLoad 2. Laden durch Medienabfrage Darüber hinaus möchte ich alle daran erinnern: Das Laden bei Bedarf führt zu einer großen Anzahl von Neuzeichnungen und beeinträchtigt die Rendering-Leistung .

7. Vorabladen

Große ressourcenintensive Seiten (z. B. Spiele) können die Lademethode verwenden. Die Seite wird jedoch nach dem Laden angezeigt Ist die Länge zu lang, führt dies zu Benutzerverlusten.
1. Wahrnehmbares Laden (z. B. Laden in ein Weltraumspiel)
2. Unsichtbares Laden (z. B. Laden der nächsten Seite im Voraus) 3. Zur Analyse des Benutzerverhaltens können Sie die nächste Seite laden die aktuellen Seitenressourcen, um die Geschwindigkeit zu erhöhen.
8. Komprimierte Bilder

Bilder sind die Ressource, die den meisten Verkehr ausmacht. Vermeiden Sie daher deren Verwendung (je nach Bedarf). (Bedürfnisse, Beurteilung anhand der Größe), die geeignete Größe ist, und verwenden Sie dann Smart Map, um sie zu komprimieren, und verwenden Sie Srcset im Code, um sie bei Bedarf anzuzeigen.
1. Verwenden Sie intelligente Bilder
2. Verwenden Sie andere Methoden, um Bilder zu ersetzen (verwenden Sie CSS3; verwenden Sie IconFont) 3. Wählen Sie geeignete Bilder (webP ist besser als JPG ; PNG8 ist besser als GIF) 5. Wählen Sie die entsprechende Größe (der erste Ladevorgang sollte nicht größer als 1014 KB sein; basierend auf dem Bildschirm des Mobiltelefons ist die Breite im Allgemeinen nicht breiter als 640)
Erinnern Sie alle daran: Eine übermäßige Komprimierung der Bildgröße beeinträchtigt die Bildanzeige Wirkung.
9. Reduzieren Sie Cookies, vermeiden Sie Weiterleitungen und asynchrones Laden von Ressourcen Dritter.
Cookies wirken sich auf die Ladegeschwindigkeit aus, daher verwenden statische Ressourcendomänen keine Cookies. Darüber hinaus wirkt sich die Umleitung auf die Ladegeschwindigkeit aus. Stellen Sie sie daher auf dem Server richtig ein, um eine Umleitung zu vermeiden. Außerdem wirken sich unkontrollierbare Ressourcen von Drittanbietern auf das Laden und Anzeigen der Seite aus, sodass Ressourcen von Drittanbietern asynchron geladen werden müssen.
Optimierung der Skriptausführung
Eine unsachgemäße Handhabung von Skripten blockiert das Laden und Rendern von Seiten, daher müssen Sie bei der Verwendung auf die folgenden Punkte achten:
1 CSS ist in geschrieben Head und Java werden im Tail oder asynchron geschrieben.
2. Vermeiden Sie leere Src für Bilder, iFrames usw. Leere Src lädt die aktuelle Seite neu, was sich auf Geschwindigkeit und Effizienz auswirkt.
3. Vermeiden Sie die Größenänderung des Bildes, wenn Sie die Größe des Bildes mehrmals auf der Seite, in CSS, in Java usw. ändern. Die mehrfache Größenänderung des Bildes führt dazu, dass das Bild mehrmals neu gezeichnet wird, was sich auf die Leistung auswirkt. .
4. Vermeiden Sie die Verwendung von DataURL für Bilder, die den Bildkomprimierungsalgorithmus nicht verwenden. Sie werden größer und müssen vor dem Rendern dekodiert werden, was das Laden langsam und zeitaufwändig macht.
CSS-Optimierung
1 Versuchen Sie, das Style-Attribut in das HTML-Tag zu schreiben.
2. Vermeiden Sie CSS-Ausdrücke. Die Ausführung von CSS-Ausdrücken muss aus dem Rendering des CSS-Baums herausspringen. Vermeiden Sie daher bitte CSS-Ausdrücke.
3. Leere CSS-Regeln entfernen. Leere CSS-Regeln erhöhen die Größe von CSS-Dateien und wirken sich auf die Ausführung des CSS-Baums aus. Daher müssen leere CSS-Regeln entfernt werden.
4. Verwenden Sie das Anzeigeattribut korrekt. Das Anzeigeattribut wirkt sich auf die Darstellung der Seite aus. Es wird empfohlen, dass Webmaster es sinnvoll verwenden.
(1), width, height, margin, padding und float sollten nicht nach display:inline verwendet werden
(2), float sollte nicht nach display:inline-block
(3) verwendet werden, display Vertical-align sollte nicht nach :block
(4) verwendet werden, margin oder float sollten nicht nach display:table-*
5 verwendet werden. Float erfordert beim Rendern keinen großen Rechenaufwand. Versuchen Sie daher, den Verbrauch so weit wie möglich zu reduzieren.
6. Web-Schriftarten dürfen nicht missbraucht werden. Sie müssen auf der aktuellen Seite so wenig wie möglich heruntergeladen, analysiert und neu gezeichnet werden.
7. Deklarieren Sie nicht zu viel Schriftgröße, da eine zu große Schriftgröße die Effizienz des CSS-Baums beeinträchtigt.
8. Wenn der Wert 0 ist, ist aus Gründen der Browserkompatibilität und Leistung keine Einheit erforderlich, wenn der Wert 0 ist.
9. Standardisieren Sie verschiedene Browser-Präfixe
(1) Es sollte kein Präfix an letzter Stelle stehen.
(2) Es können nur zwei Arten von CSS-Animationen (-webkit- ohne Präfix) verwendet werden.
(3), andere Präfixe sind „-webkit- -moz- -ms-no prefix“ (-o-Opera-Browser verwendet stattdessen den Blink-Kernel, daher wird er eliminiert).
10. Vermeiden Sie es, Selektoren wie reguläre Ausdrücke aussehen zu lassen.
Die Ausführung erweiterter Selektoren dauert lange und ist schwer zu verstehen. Vermeiden Sie daher deren Verwendung.
Java-Ausführungsoptimierung
1. Reduzieren Sie Neuzeichnen und Reflow
(1), vermeiden Sie unnötige Dom-Operationen
(2), versuchen Sie, Klasse anstelle von Stil zu ändern, verwenden Sie classList anstelle von className
( 3) Vermeiden Sie die Verwendung von document.write
(4) Reduzieren Sie drawImage
2. Dom-Auswahl und -Berechnung zwischenspeichern Jedes Mal, wenn Dom ausgewählt wird, muss es berechnet und zwischengespeichert werden.
3. Cache-Liste .length, .length muss jedes Mal berechnet werden und eine Variable verwenden, um diesen Wert zu speichern.
4. Versuchen Sie, Ereignis-Proxys zu verwenden, um eine Stapelbindung von Ereignissen zu vermeiden.
5. Versuchen Sie, den ID-Selektor zu verwenden. Der ID-Selektor ist am schnellsten.
6. TOUCH-Ereignisoptimierung: Verwenden Sie aufgrund der schnellen Auswirkung Touchstart und Touchend anstelle von Klicken. Beachten Sie jedoch, dass die Touch-Reaktion zu schnell ist, was leicht zu Fehlbedienungen führen kann.
Rendering-Optimierung
HTML-Dokumente werden zwischen Netzwerken in einem Datenstrom übertragen, der Dokumentkodierungsinformationen enthält. Die Kodierungsinformationen der Seite werden im Allgemeinen in den Header-Informationen der HTTP-Antwort oder im HTML-Markup innerhalb des Dokuments angegeben Client Der Browser kann die Seite erst korrekt rendern, nachdem er die Seitenkodierung ermittelt hat. Daher puffern die meisten Browser (außer ie6, ie7 und ie8) eine bestimmte Anzahl von Datenbytes, nach denen gesucht werden soll Aufgrund der Codierungsinformationen ist die Anzahl der vorgepufferten Bytes in verschiedenen Browsern unterschiedlich.
1. HTML verwendet Viewport
Viewport kann das Rendern der Seite beschleunigen, bitte verwenden Sie den folgenden Code:
2. Dom-Knoten reduzieren
Zu viele Dom-Knoten wirken sich auf das Rendern der Seite aus Reduzieren Sie Dom-Knoten so weit wie möglich.
3. Animationsoptimierung
(1) Versuchen Sie, CSS3-Animationen zu verwenden.
(2) Verwenden Sie sinnvollerweise die Animation „requestAnimationFrame“ anstelle von „setTimeout“.
(3) Verwenden Sie die Canvas-Animation entsprechend für 5 Elemente und verwenden Sie die Canvas-Animation für mehr als 5 Elemente (WebGL kann für iOS8 verwendet werden).
4. Hochfrequenz-Ereignisoptimierung
Touchmove- und Scroll-Ereignisse können zu mehreren Renderings führen.
(1) Verwenden Sie requestAnimationFrame, um Frame-Änderungen zu überwachen, damit das Rendern zum richtigen Zeitpunkt durchgeführt werden kann.
(2) Erhöhen Sie das Zeitintervall für die Reaktion auf Änderungen und reduzieren Sie die Anzahl der Neuzeichnungen.
5. GPU-Beschleunigung

Die folgenden Eigenschaften in CSS (CSS3-Übergänge, CSS3-3D-Transformationen, Deckkraft, Canvas, WebGL, Video) lösen das GPU-Rendering aus. Bitte verwenden Sie sie sinnvoll. (PS: Übermäßige Nutzung führt zu einem übermäßigen Stromverbrauch von Mobiltelefonen.)

Verwandte Artikel:

Entfernen Sie den weißen Hintergrund und Rand des Eingabefelds auf der mobilen HTML5-Seite (kompatibel). mit Android und iOS)

Wie entwickelt man mobiles HTML5? Was ist der Unterschied zur PC-Version?

Benötigen Benutzer wirklich mobile HTML5-Anwendungen? Wenn ja, welche Nachfrageszenarien gibt es?