Was Entwickler über HTML5-Leistungsanalyse wissen müssen: HTML5-Tutorial-Fähigkeiten

Aus Leistungssicht reduziert HTML5 zunächst das HTML-Dokument, um es einfacher zu machen.
Erstens gibt es in Bezug auf die Benutzerlesbarkeit zunächst viele Dinge, die Anfänger nicht verstehen konnten, als sie sie zum ersten Mal sahen, aber die HTML5-Deklarationsmethode ist offensichtlich benutzerfreundlicher.
Zweitens ist die Deklaration der Dokumentkodierung mit HTML5 sehr einfach. Viele Leute fragen, was HTML5 ist? Wir sagen, dass die erste Möglichkeit, HTML5 zu verwenden, darin besteht, zuerst den DOCTYPE zu ändern, da derzeit viele Seiten noch die traditionelle Methode verwenden. Die HTML5-Methode selbst ist mit IE-Browsern von IE6 bis IE10 kompatibel, einschließlich fortgeschrittener Browser. Der einfachste Weg, HTML5 zu übernehmen, besteht also darin, den DOCTYPE zu ändern.

1. Prägnantere Tags
Das nächste ist vielleicht nicht sehr verbreitet, aber ich empfehle es und es ist einfacher zu verwenden . Beschriftungsmethode. Wie Sie am Namen erkennen können, ist HTML5 von HTML4 abgeleitet. HTML4 verfügt über einen strikten Modus und einen Übergangsmodus. HTML5 unterstützt diesen Übergangsmodus, das heißt, Sie können einige Tags nicht schließen. Ich empfehle jedoch nicht alle Tags. Wenn beispielsweise das BODY-Tag nicht geschlossen ist, empfehlen wir dies nicht. Das am häufigsten verwendete P-Tag ist jedoch das Listen-Tag LI. Warum sagen Sie das? Erstens ist diese Methode aus visueller Sicht einfacher. Der Schlüssel liegt dann darin, dass während des Dokumentübertragungsprozesses der Inhalt geringer ist.
Die HTML5-Tag-Attributdeklaration unterstützt drei Methoden: einfache Klammern, doppelte Klammern und keine Klammern. Um die Dokumentgröße zu reduzieren, wähle ich die Methode ohne doppelte Anführungszeichen oder die Methode mit einfachen Anführungszeichen. Bitte beachten Sie jedoch, dass es sich bei der Annahme um eine Deklaration eines Klassenattributs handelt, da das Attribut mehrere Klassen umfassen kann und bei mehreren Klassen in Klammern eingeschlossen werden muss. Lassen Sie mich Ihnen in diesem Zusammenhang eine Praxis von Google zeigen. Google selbst verfügt über eine Seite, die das oben Genannte vollständig umsetzt, wodurch die Größe des Dokuments um 20 % reduziert und die Übertragung von HTML-Dokumenten um 20 % reduziert wird. Wenn man das Ganze in die Tat umsetzt, kann man eine Reduzierung zwischen 5 % und 20 % erreichen. Dies ist der erste Schritt, nämlich die Reduzierung der Größe des HTML-Dokuments.
　2. Bildoptimierung
Als nächstes kommt die Optimierung von Bildern. Denn wenn viele Bilder vorhanden sind, wird die Ladegeschwindigkeit der gesamten Seite erheblich verlangsamt. In Bezug auf die Optimierungsmethoden von Bildern gibt es viele Einführungen im Buch „High Performance Website“. Zusammenfassend gibt es drei Hauptpunkte: Verwendung von Sprites, Optimierung der Bildgröße und Verwendung von DATA URI .
Eine weitere Idee zur Bildoptimierung ist: No-Image. Vergessen Sie Bilder und nutzen Sie CSS3. Ursprünglich war es notwendig, ein Bild mit einem abgerundeten Eckeneffekt festzulegen, und jetzt wurde in CSS3 ein Rahmenradius verwendet. Ursprünglich war es erforderlich, ein Bild mit einem Schatteneffekt festzulegen, und jetzt wird in CSS3 ein Rahmenschatten verwendet sei ein Hintergrundbild, das einen Farbverlauf festlegen musste und jetzt in CSS3 verwendet wird.
　3. Prefetching
Als nächstes sprechen wir über Prefetching, eine weitere Idee zur Optimierung. Unsere aktuellen Optimierungsideen sind nichts weiter als wenige. Viele davon dienen der Reduzierung, z. B. der Reduzierung der Dokumentgröße und der Bildgröße. Viele Bilder werden in ein Sprite-Bild umgewandelt, um die Anzahl der gesendeten Anfragen zu reduzieren. Prefetching ist eine andere Denkweise. Ressourcen werden im Voraus geladen, wenn der Benutzer darauf klickt, was definitiv schneller ist.
Prefetching besteht aus zwei Teilen: Der eine ist der Ressourcen-Prefetch und der andere die DNS-Vorauflösung.
Beim Vorladen von Ressourcen sind mehrere Punkte zu beachten:
Das Vorladen erfolgt nur, wenn der Browser inaktiv ist, es gibt jedoch keine Garantie dafür, dass dies geschieht. Da der Browser selbst über einen globalen Listener verfügt, bei dem es sich um eine interne Schnittstelle handelt, führt er im Leerlauf Dinge aus, die der Browser im Leerlauf ausführen sollte. Dieser Leerlaufrückruf wird jedoch möglicherweise nicht ausgelöst. Es gibt also keine Garantie dafür Es wird eine Vorladung durchgeführt.
Chrome unterstützt das Vorladen von HTTPS-Ressourcen nicht. Wenn es sich bei Alipay beispielsweise um eine HTTPS-Seite handelt, lädt Chrome diese nicht vor.
Obwohl eine vorab abgerufene Seite nach ihrer Existenz nicht sichtbar ist, wird sie tatsächlich normal analysiert. Angenommen, ich rufe die Anmeldeseite vorab ab. Die Anmeldeseite enthält viele Ressourcen, z. B. Bilder, CSS-Dateien und JS-Dateien. Es wird normal von oben nach unten analysiert. Während des Analysevorgangs wird diese Seite nicht angezeigt, sie existiert jedoch tatsächlich. In HTML5 kann der aktuelle Seitenstatus über document.visibilityState abgerufen werden. Normalerweise hat die Seite zwei Status, sichtbar und unsichtbar, aber jetzt gibt es einen neuen Status, der als vorgerenderter Status bezeichnet wird. Sie können direkt feststellen, ob sich die Seite im vorgerenderten Zustand befindet, indem Sie prüfen, ob document.visibilityState gleich prerender ist.
　4.DNS-Analyse
Als nächstes folgt die Analyse von DNS. Manchmal ist es auf unserer Anmeldeseite relativ schwierig, die Stellen zu erkennen, auf die Benutzer klicken können. Manchmal recherchieren wir natürlich, um herauszufinden, dass die meisten nächsten Aktionen des Benutzers nach innen gerichtet sind. In manchen Fällen wissen wir jedoch nicht, welche Seite der Benutzer als Nächstes aufrufen wird, aber wir wissen, zu welcher Domain er wechseln wird. Zu diesem Zeitpunkt kann ich DNS vorab auflösen. Denn tatsächlich gibt es im gesamten Seitenanforderungsprozess einen langen DNS-Auflösungsprozess. Wenn wir dies im Voraus tun, können wir Benutzern weiterhin ermöglichen, diese Seite anzuzeigen.
Das Folgende ist ein Beispiel für ein Q-Hintergrundbild. Q Wallpaper ist ein bestimmtes System von Q. Erstens basiert die gesamte Architektur von Q auf dem WEB-Client. Was wir jetzt sehen, ist eine WEB-Seite. Obwohl es sich äußerlich um eine Client-Shell handelt, ist ihr Herzstück das WEB. Als wir den gesamten Prozess zum ersten Mal abgeschlossen haben, wurden aufgrund der vielen Bilder alle statischen Ressourcen mehr als einem Dutzend statischer Server zugewiesen. Mit anderen Worten: Wenn ich ziehen möchte, muss ich 10 DNS auflösen. Im langsamsten Fall kann es zu einer Verzögerung von einigen Sekunden kommen, was wir mit bloßem Auge spüren können. Wenn wir eine DNS-Vorauflösung durchführen, weiß ich nicht, um welche Ressource es sich handelt, und alle Bilder sind zufällig. Daher können wir nur sagen, dass wir hart an der DNS-Vorauflösung arbeiten sollten, um die Geschwindigkeit zu verbessern. In diesem Fall kann es 2 Sekunden dauern, aber es dauert 1 Sekunde.
Als Nächstes sprechen wir über die Anwendung in Q. Wir werden wie in QQ sein. Es gibt viele Textlinks in QQ und Q, das heißt, es gibt einen Text-Push mit APP-Informationen in der unteren linken Ecke des Fensters. Hier wird das Backend von Zeit zu Zeit durch das WEB gezogen und das Backend wird darüber gezogen und im Vordergrund angezeigt. Aber zu einem bestimmten Zeitpunkt sind die von allen Apps übertragenen Betriebsinformationen festgelegt. Wenn wir das Array analysieren, das jedem Textlink für eine bestimmte APP entspricht, handelt es sich um eine sehr große Datenmenge. Denn jede einzelne hier ist etwa drei- bis vierhundert Byte groß. Aus Optimierungsgründen speichern wir diese Dateien jedes Mal lokal. Speichern Sie es dann lokal in localStorage. Wir befinden uns in derselben Domäne und alle Informationen zwischen APPs können voneinander abgerufen werden. Dann werden nicht alle gezogenen IDs noch einmal gezogen.
Hier gibt es auch einen Punkt, der Aufmerksamkeit erfordert. Die aktuelle Implementierung von localStorage durch viele Hersteller ist synchron. Wenn Sie die localStorage-Schnittstelle häufig aufrufen, wird Ihr Rendervorgang tatsächlich blockiert. Wenn der Benutzer zu diesem Zeitpunkt die Seite nach unten zieht und Sie zu diesem Zeitpunkt Daten speichern und die Daten relativ groß sind, hat der Benutzer das Gefühl, dass Ihre Seite sehr feststeckt. Sie haben dieses Problem bereits besprochen. Das Schnittstellendesign des IE ist asynchron, während ihr Design synchron ist. Dies führt zu der Annahme, dass Sie beim Anpassen dieser Schnittstelle viele Programme haben, da es einen Serialisierungsprozess gibt, der auf der Festplatte serialisiert wird. In diesem Fall erscheint der gesamte Vorgang langsamer. Darüber hinaus kann localStorage selbst diese Daten zwischen verschiedenen Fenstern teilen und diese Daten sperren. Wenn eine große Datenmenge diese lokale Schnittstelle aufruft, scheint sie hängenzubleiben. Daher gibt es im Moment keine besonders gute Lösung, aber es ist etwas, das man im Hinterkopf behalten sollte. Selbst wenn das aktuelle Maximum mehr als fünf Megabyte beträgt, wird es den Benutzern unangenehm sein, wenn Sie mehr als fünf Megabyte verwenden. Denn wenn Sie diese Ausrede aufrufen und der Benutzer die Maus zieht, fühlt es sich sehr festgefahren an.
　5. Offline-Speicher
Als nächstes sprechen wir über die Vorteile, die der Offline-Speicher den Benutzern in Bezug auf die Leistung bringt. Die erste ist die Definitionsdatei für die Offline-Speicherung. Für alle Systemmodule in Q ist die Offline-Unterstützung definiert. Dies bedeutet, dass alle Anwendungen weiterhin genutzt werden können, auch wenn die Netzwerkverbindung getrennt ist. Fügen Sie dem Dokument eine MANIFEST-Datei hinzu, die angibt, welche Teile der aktuellen Seite lokal gespeichert werden müssen. Welche sollten durch neue Bilder oder ähnliches ersetzt werden, wenn die Anfrage fehlschlägt? ? Auf diese Weise in drei Teile unterteilt:
Erstens CACHE, der lokal gespeichert werden muss.
Zweitens wird NETWORK nicht jedes Mal zurückgerufen und angefordert. Es muss jedoch darauf hingewiesen werden, dass lokaler Speicher und Browserspeicher zwei verschiedene Orte sind . Selbst wenn NETWORK der APP mitteilen muss, dass ich sie jedes Mal abrufen muss, da der Speichercache wie bei Chrome sehr hasserfüllt und schwer zu löschen ist, muss er manuell geleert werden, um seine volle Wirkung zu erzielen. Selbst wenn Sie also festlegen, dass die Daten nicht lokal gespeichert werden, speichert der Browser sie möglicherweise selbst, da er sie an zwei verschiedenen Orten speichert.
Drittens, FALLBACK. Wenn auf einem Bild steht, dass die Anfrage fehlgeschlagen ist, ist es 404. Welches Bild sollte ich stattdessen verwenden? Ich denke, das macht mehr Spaß.
Wie stellt man MAEIFEST ein? Hier sind drei Punkte zu beachten:
MANIFEST-Same-Origin-Einschränkung;
Der MIME-Typ muss text/cache-manifest sein Formate, es wird nicht funktionieren.
CHROME, wenn Sie sehen möchten, ob dieses Ding effektiv ist, können Sie es über das Pseudoprotokoll CHROME, chrome://appcache-internals, in den Browser eingeben.
Informationen zum Aktualisieren des Anwendungscaches. Warum Offline-Speicher? Wenn der Browser erkennt, dass Sie über Offline-Speicher verfügen, greift er zunächst auf das Offline-Speicherverzeichnis zu, um herauszufinden, ob die Ressource zwischengespeichert wurde. Sobald sie zwischengespeichert wurde, erhält er die Ressource direkt von hier und sendet keine weitere Anfrage. Da die Anfrage des Browsers so lautet, wird bei Offline-Speicher nicht einmal die Anfrage gesendet, sodass sie schneller ist. Wenn wir manchmal ein Update durchführen müssen, was sollten wir bei der Aktualisierung tun?
Benutzer können den Cache des Browsers manuell löschen, und der lokale Speicher wird zu diesem Zeitpunkt automatisch gelöscht.
Ändern Sie alle Inhalte von MANIFEST. Dies ist die empfohlene Methode und auch die Methode, die wir online verwenden. Das heißt, wir können die spezifischen Elemente darin ändern, aber es ist am besten, die Kommentare hier zu ändern, da wir bei jeder Veröffentlichung über einen automatischen Veröffentlichungsmechanismus verfügen. Ändern Sie beim Veröffentlichen einfach die obigen Kommentare. In diesem Fall wird der Inhalt jedes Mal, wenn er veröffentlicht wird, in Echtzeit mit dem lokalen Client synchronisiert.
Die Ausführung erfolgt über das Programm, und das Programm lautet window.applicationCache.update(). Das heißt, ich möchte Offline-Speicher betreiben. Tatsächlich nenne ich ihn manchmal Anwendungsspeicher, weil seine Semantik Anwendungsspeicher ist. Lassen Sie uns den Anwendungsspeicher manuell aktualisieren.
　6.Web Worker
　 Als nächstes kommt der Web Worker. Web Worker ist ein Multithread-JS-Prozess. Tatsächlich haben wir keine Anwendungsszenarien online, daher werde ich nicht darauf eingehen. Aber ich kann über die konkreten Anwendungsszenarien sprechen, die ich gesehen habe.
Lassen Sie uns zunächst vorstellen, was WEBWORK ist. Es ist ein Thread auf Betriebssystemebene. Bevor wir Multithreading nachgeahmt haben, haben wir tatsächlich noch ein Fenster geöffnet. Aber jetzt stellt es der Browser selbst bereit. Dies erhöht den Bedienkomfort und macht unser gesamtes Dokument schwerer, was keine sehr empfehlenswerte Methode ist.
Dann sind die Zugriffsmöglichkeiten von WebWorker eingeschränkt und er kann nicht auf viele globale Objekte zugreifen. Beispielsweise kann nicht auf das Documentnet-Objekt zugegriffen werden. Das am besten geeignete Szenario für WebWorker sind CPU-intensive Rechenvorgänge. Als wir früher Spiele entwickelten, verwendeten wir BOX2D. Viele Leute müssen gehört haben, dass es viele Berechnungen gibt, das heißt, dass auf der gesamten Seite alle unten aufgeführten Objekte ihre Kollisionsbeziehungen berechnen müssen. Wenn es jedoch im aktuellen JS-Prozess ausgeführt wird, ist der Berechnungsaufwand enorm. Nach der Berechnung bleibt die gesamte Seite sehr hängen. Wenn Sie dafür jedoch WebWorker verwenden, handelt es sich um einen asynchronen Prozess, der in Echtzeit gesendet wird, und Sie können während des Berechnungsprozesses andere Dinge tun. Dies ist Multithreading.
　7. Geräte-API
Lassen Sie uns über die Geräte-API sprechen. Ich denke, dass die Geräte-API hinsichtlich der Leistung am wichtigsten ist und auch die früheste derzeit implementierte API ist. Eine davon ist CONNECTION, also die Netzwerkbandbreite. Was bewirkt das? In diesem Szenario in China müssen wir bedenken, dass die Internetgeschwindigkeit vieler Benutzer immer noch sehr niedrig ist. Wir hoffen, Benutzern ein automatisches Downgrade auf einen niedrigeren Tarif zu ermöglichen, wenn ihre Netzwerkgeschwindigkeit niedrig ist. Mit der vorhandenen Technologie können wir das nicht schaffen. Aber wir können die Geräte-API verwenden. Denn wir wissen, dass diese Informationen vom Gerät abgerufen werden können. Wie groß ist die Bandbreite und was können wir mit dieser Bandbreite machen? Wenn beispielsweise die Breitbandverbindung gut ist, verwende ich hochauflösende Bilder. Wenn die Bandbreite relativ gering ist, werden Bilder mit geringerer Auflösung verwendet.
　8. Batterie
　Im nächsten Punkt geht es um die Batterie. Ich denke, aus Performance-Perspektive geht es vor allem um Leistung. Wenn die Akkuleistung des Benutzers relativ niedrig ist, sollte er meiner Meinung nach so wenig wie möglich tun. Es gab noch nie einen Durchbruch in der Akku-Technologie von Mobiltelefonen. Ich denke, dass es auch ein Werbe-Highlight ist, die APP leistungsstärker aussehen zu lassen.
　9.LEINWAND
　Als nächstes kommt LEINWAND. Lassen Sie uns über mehrere Leistungsoptimierungspunkte von CANVAS sprechen. Mit diesen Dingen wird die Leistung um das Zehnfache verbessert.
Erstens ist jedes CANVAS eine Leinwand. Wenn wir eine Grafik rendern möchten, können wir sie überlagern. Genau wie bei PS gibt es eine Schicht, zwei Schichten und drei Schichten. Wenn viele Benutzer Spiele erstellen, legen sie alles direkt auf einer Ebene ab und alles wird aktualisiert, wenn es aktualisiert wird. Wenn Sie es jedoch schichten, platzieren Sie den Hintergrund auf der Hintergrundebene und die Zeichen auf der Zeichenebene. Wenn ich in diesem Fall den Charakter aktualisieren möchte, wird nur der Charakter aktualisiert und die Hintergrundebene muss nicht geändert werden. Lassen Sie die CPU weniger arbeiten und die Leistung wird sich auf natürliche Weise verbessern.
Zweitens context.drawImage. Skalieren Sie das Bild nicht. Wir haben am Anfang einen Fehler gemacht. Das Bild, das unser Künstler gemacht hat, stimmte immer nicht mit unserem überein. Da die Bildgröße des Geräts selbst so ist, müssen wir das Bild proportional skalieren. Nach dem Zoomen des Bildes stellten wir fest, dass es auf Low-End-Geräten wie dem iPad oder iPhone sehr hängen bleiben würde. Wir haben uns gefragt, warum die Codeanalyse viel Zeit kostet.
Drittens requestAnimationFrame. Dies ist eine speziell für das Rendern optimierte Methode. Das Prinzip lautet: Jedes Mal, wenn der Browser einen Frame durchläuft, wird diese Methode ausgelöst. Wenn ich sie auslöse, erhält Canvas, dass der Browser für den nächsten Frame bereit ist. Wenn Sie die herkömmliche Methode verwenden, werden nicht mehr Ihre Dinge berücksichtigt. Sie wissen nur, wie viel Zeit vergangen ist, und ich werde sie ausführen. Wenn der Benutzer zuvor blockiert wurde und diese Methode alle 10 Sekunden ausgeführt wird, ist seine vorherige Arbeit innerhalb von 10 Sekunden noch nicht abgeschlossen und diese Arbeit wird verzögert. Es ist so optimiert, dass die Animation flüssiger aussieht, da es Ihnen bei jedem Frame mitteilt, dass Sie etwas tun können. (Text: infoq)