Was Entwickler über die HTML5 -Leistungsanalyse wissen müssen

Kommentar: Der folgende Artikel wurde von einem IT -Techniker namens Zhang Siming verfasst und auf der Infoq -Webseite veröffentlicht. Dieses Mal analysierte er die Leistung von HTML5 aus 9 verschiedenen Aspekten im Volltext, was immer noch von entsprechenden Entwicklern gelesen werden sollte.

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 wir zuerst HTML5 verwenden können, um docType zuerst zu ändern, da viele Seiten 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.

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.

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. Ich habe das Bild mit einem Schatteneffekt verwendet, 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.

4.DNS -Lösung

Als nächstes kommt die Lösung von DNS. Manchmal, wenn wir uns auf der Seite anmelden, ist es relativ schwierig zu erkennen, wohin der Benutzer klicken kann. Manchmal werden wir manchmal einige Grabpunkte machen, um herauszufinden, dass das nächste Verhalten des Benutzers größtenteils eingeht. In einigen Fällen wissen wir jedoch nicht, auf welcher Seite der Benutzer als nächstes gehen wird, aber wir wissen, auf welche Domain er gehen wird. Zu diesem Zeitpunkt kann ich DNS vorab. Denn tatsächlich gibt es im gesamten Seitenanforderungsprozess einen langen DNS -Auflösungsprozess. Wenn wir dies im Voraus tun, können wir Benutzer diese Seite weiter sehen lassen.

Das Folgende ist ein Fall von Q+ Wallpaper. Q+ Wallpaper ist ein bestimmtes System. Erstens basiert die gesamte Architektur von Q+ auf Web+ Client. Was wir jetzt sehen, ist eine Webseite. Obwohl es sich um eine Client -Shell draußen handelt, ist sein Herz das Netz. Wenn wir den gesamten Prozess zum ersten Mal abgeschlossen haben, da es viele Bilder gibt, werden alle statischen Ressourcen mehr als einem Dutzend statischer Server zugewiesen. Mit anderen Worten, wenn ich ziehen möchte, muss ich 10 DNs analysieren. Diese Zeit ist ziemlich zeitaufwändig, und die langsamste Zeit kann um einige Sekunden verzögert werden, was wir mit dem bloßen Auge spüren können. Wenn Sie eine DNS-Vorauflösung ausführen, da ich nicht weiß, welche Ressource es ist, sind alle Bilder zufällig, sodass wir nur sagen können, dass wir hart an der Vorauflösung von DNS arbeiten, um die Geschwindigkeit zu verbessern. Auf diese Weise kann es 2 Sekunden dauern, und ich werde 1 Sekunde.

Lassen Sie uns als nächstes über die Anwendung in Q+sprechen. Wir werden viele Textketten in QQ und Q+haben, genau wie in QQ, was bedeutet, dass ein Text -App -Informationen in der unteren linken Ecke des Fensters vorhanden sind. Dies ist das Backend wird von Zeit zu Zeit durch das Web gezogen, und das Backend wird aus und dann im Vordergrund angezeigt. Zu einem bestimmten Zeitraum werden jedoch die gesamten betrieblichen Informationen, die von allen Apps gedrückt wurden, tatsächlich behoben. Wenn Sie das entsprechende Array jeder Textkette gemäß einer bestimmten App analysieren, ist es zu diesem Zeitpunkt sehr große Daten. Da hier einer hier etwa drei oder vierhundert Bytes hat, werden wir diese Bereiche aus der Sicht der Optimierung vor Ort ziehen. Speichern Sie dann die örtliche Lokalstorage. Wir befinden uns in derselben Domäne, und auf alle Informationen zwischen Apps können voneinander zugegriffen werden. Dann ziehen Sie nicht alle IDs, die Sie wieder gezogen haben.

Es gibt auch einen Punkt, auf den hier geachtet werden muss. Derzeit werden viele Hersteller von LocalStorage synchronisiert. Wenn Sie LocalStorage in großen Mengen anrufen, blockiert dies Ihren Rendering -Prozess tatsächlich. Wenn der Benutzer die Seite nach unten schleppt, speichern Sie zu diesem Zeitpunkt Daten und die Daten sind relativ groß. Zu diesem Zeitpunkt wird der Benutzer das Gefühl haben, dass Ihre Seite sehr festgefahren ist. Sie haben dieses Problem schon einmal besprochen. Das Design dieser Schnittstelle ist asynchron entwickelt und als synchron entwickelt. Dies führt dazu, dass Sie diese Entschuldigung vornehmen, wenn Sie mehr Apps erstellen, da ein Serialisierungsprozess, eine Sequenz zur Festplatte vorliegt. Auf diese Weise erscheint der gesamte Prozess langsamer. Darüber hinaus kann LocalStorage diese Daten zwischen verschiedenen Fenstern weitergeben und diese Daten blockieren. Wenn eine große Datenmenge diese lokale Schnittstelle aufruft, scheint sie relativ fest zu sein. Im Moment gibt es also keine besonders gute Lösung, aber das ist etwas, an das man sich erinnern kann. Selbst wenn der größte im Moment über 5 Uhr ist, wird der Benutzer, wenn Sie über 5 Uhr verwenden, sehr traurig. Denn wenn Sie diese Entschuldigung nennen und der Benutzer die Maus schleppt und benutzt, fühlt es sich sehr fest an.

Sprechen wir als nächstes über die Vorteile des Offline -Speichers für Benutzer in Bezug auf die Leistung. Zunächst wird die Definitionsdatei offline -Speicher eingegeben. Alle Systemmodule in Q+ haben Definition offline -Unterstützung. Das heißt, wenn alle Anwendungen getrennt sind, können sie weiterhin verwendet werden. Fügen Sie dem Dokument eine Manifestdatei hinzu. Manifest ist eine Definitionsdatei, die erklärt, welche Seiten lokal gespeichert werden müssen? Welche müssen nicht gespeichert werden? Welche sollten ersetzt werden, wenn die Anfrage fehlschlägt? Dies ist in drei Teile unterteilt:

Zunächst Cache, der lokal gespeichert werden muss.

Zweitens wird das Netzwerk nicht lokal gespeichert. Es wird zurückgehen und es jedes Mal anfordern. Es sollte jedoch darauf hingewiesen werden, dass lokaler Speicher- und Browserspeicher tatsächlich zwei verschiedene Dinge sind. Sie speichern zwei verschiedene Teile. Auch wenn das Netzwerk der App mitteilen muss, dass ich es jedes Mal ziehen muss, denn wie Chrome ist der Speichercache sehr hasserfüllt und schwer zu klären. Es muss manuell gelöscht werden, um wirksam zu werden. Selbst wenn Sie es nicht vor Ort einstellen, kann der Browser es selbst speichern, da er zwei verschiedene Orte speichert.

Drittens Fallback. Wenn ein Bild fehlschlägt, ist es 404. Welche Bilder sollten stattdessen verwendet werden? Ich denke, das macht mehr Spaß.

Wie setze ich Maeifest? Es gibt drei Dinge zu beachten, über das man sich manifestiert:

Offensichtliche homologe Einschränkung;

Der MIME-Typ muss Text/Cache-Manifest sein, der Standard ist und nicht wirksam wird, wenn er sich in anderen Formaten befindet.

Chrome, wenn Sie sehen möchten, ob dieses Ding wirksam wird, können Sie es in den Browser über die Pseudo-Protokoll-Chrome, Chrome: // Appcache-Internals, eingeben.

So aktualisieren Sie den Cache der App. Warum brauchen Sie Offline -Speicher? Offline vor Ort speichern. Wenn der Browser weiß, dass Sie Offline -Speicher haben, wird er zunächst in das Offline -Speicherverzeichnis gehen, um herauszufinden, ob diese Ressource zwischengespeichert wurde. Wenn es zwischengespeichert wurde, erhält er die Ressource direkt von hier aus und sendet keine andere Anfrage. Da die Anfrage des Browsers so ist, wird auch die Anfrage nicht gesendet, wenn Offline -Speicher vorhanden ist, sodass dies schneller ist. Wenn wir manchmal aktualisieren müssen, was sollten wir dann tun, wenn wir aktualisieren?

Benutzer können den Cache des Browsers manuell löschen, und der lokale Speicher wird zu diesem Zeitpunkt automatisch gelöscht.

Das Ändern des Manifestinhalts ist eine empfohlenere Art und Weise, und es ist auch die Art und Weise, wie wir ihn online verwenden. Das heißt, wir können die spezifischen Projekte im Inneren ändern, aber es ist am besten, die Kommentare hier zu ändern, denn jedes Mal, wenn ich veröffentlichen, veröffentlichen wir automatisch den Mechanismus und kommentieren und ändern sie einfach bei der Veröffentlichung. Auf diese Weise wird jedes Mal, wenn der Inhalt veröffentlicht wird, in Echtzeit mit dem lokalen Bereich des Kunden synchronisiert.

Führen Sie das Programm durch und das Programm lautet window.applicationCache.update (). Es bedeutet, dass ich Offline -Speicher betreiben möchte. Tatsächlich nenne ich es manchmal als Anwendungsspeicher, da seine Semantik die Anwendungsspeicherung ist. Wir gehen dazu, die Anwendungsspeicherung manuell zu aktualisieren.

6.Web Arbeiter

Nächster Webarbeiter. Web Worker ist ein Multi-Thread-JS-Prozess. Wenn wir online keine Bewerbungsszenarien haben, werde ich nicht darüber sprechen. Aber wir können über die spezifischen Anwendungsszenarien sprechen, die ich gesehen habe.

Lassen Sie mich zunächst vorstellen, was Webwork ist? Es ist ein Os-Level-Thread. Vorher haben wir Multi-Threading imitiert, aber tatsächlich haben wir ein weiteres Fenster geöffnet. Aber jetzt bietet der Browser selbst, was mehr Bequemlichkeit in den Betrieb bringt und ein Weg ist, unser gesamtes Dokument schwerer und nicht sehr empfohlen zu machen.

Anschließend verfügt Webworker über begrenzte Zugangsfunktionen und kann nicht auf viele globale Objekte zugreifen. Zum Beispiel kann auf das Documnet -Objekt nicht zugegriffen werden. Das am besten geeignete Szenario für Webworker sind CPU-intensive Computervorgänge. Als wir schon einmal Spiele spielten, haben wir Box2d verwendet. Viele Menschen haben davon gehört. Es beinhaltet viele Berechnungen, dh alle folgenden Objekte, die auf der gesamten Seite unten sind, müssen ihre Kollisionsbeziehung berechnen, die sehr groß ist. Wenn es jedoch im aktuellen JS -Prozess ausgeführt wird, ist die Berechnung groß, und sobald die Berechnung berechnet wird, ist die gesamte Seite sehr stottern. Wenn Sie jedoch Webworker dazu verwenden, ist es ein asynchroner Prozess, der in Echtzeit gesendet wird und während des Berechnungsprozesses andere Dinge tun kann, was Multi-Threading ist.

Sprechen wir über die Geräte -API. Ich denke, das Wichtigste an der Geräte -API ist die Leistung, und es ist auch die früheste API, die derzeit implementiert wird. Eine ist die Verbindung, die Netzwerkbandbreite ist. Was ist die Funktion davon? In diesem Szenario in China ist es notwendig, sich daran zu erinnern, dass die Internetgeschwindigkeiten vieler Benutzer immer noch sehr niedrig sind. Wir hoffen, dass die Internetgeschwindigkeit der Benutzer, wenn sie niedrig sind, automatisch auf eine relativ niedrige Lösung herabstufen. Wir können es nicht tun, wenn wir vorhandene Technologien verwenden. Aber wir können die Geräte -API verwenden. Weil wir wissen, dass diese Informationen vom Gerät erhalten werden können. Was ist das Breitband? Was ist das Breitband? Was wir tun können, wenn es so ist. Wenn Breitband beispielsweise gut ist, verwende ich hochauflösende Bilder. Wenn das Breitband relativ niedrig ist, verwenden Sie Bilder mit geringerer Klarheit.

8. Batterie

Im Folgenden handelt es sich um die Batterie. Ich denke, aus Perspektive der Leistung geht es hauptsächlich um Macht. Wenn die Batterieleistung des Benutzers relativ niedrig ist, sollte er versuchen, weniger Dinge zu tun. Die Batterie -Technologie des Mobiltelefons selbst hat noch keine Durchbrüche erzielt. Ich denke, die App aussieht leistungsfähiger, ist auch ein Highlight der Werbung.

9.Canvas

Als nächstes kommt Leinwand. Sprechen wir über mehrere Leistungsoptimierungspunkte von Leinwand. Wenn Sie diese Dinge verwenden, wird die Leistung um das 10 -fache verbessert.

Erstens ist jede Leinwand eine Leinwand. Wenn wir ein Diagramm rendern wollen, können wir es schichten. Genau wie in PS sind es ein, zwei und drei Schichten. Viele Benutzer imitieren direkt in einer Ebene bei Spielen, und alles muss aktualisiert werden, sobald sie aktualisiert werden. Wenn Sie es jedoch schichten, setzen Sie den Hintergrund in die Hintergrundschicht und den Charakter in die Rolle. Auf diese Weise werde ich die Rolle nur aktualisieren, wenn ich die Rolle aktualisieren möchte, und die Hintergrundschicht muss nicht geändert werden. Da die CPU weniger tut, verbessert sich die Leistung natürlich.

Zweitens Context.Drawimage. Skalieren Sie das Bild nicht. Wir haben am Anfang einen Fehler gemacht. Die Bilder, die unsere Künstler gemacht haben, sind immer unvereinbar mit uns, und dann wollen wir das Bild skalieren. Da die Bildgröße des Geräts selbst so ist, müssen wir das Bild nach Verhältnis skalieren. Nach dem Zoomen des Bildes stellte ich fest, dass auf niedrigen Geräten beispielsweise iPad oder iPhone sehr festgefahren sein wird. Warum? Führen Sie einfach die Codeanalyse durch. Bei Verwendung dieser Methode kostet es viel.

Drittens RequestAnimationFrame. Dies ist eine Methode, die speziell für das Rendering optimiert ist. Sein eigenes Prinzip ist Folgendes: Wenn der Browser einen Rahmen übergeht, wird diese Methode ausgelöst. Wenn ich es auslöste, erhält Canvas den Browser bereit, den nächsten Frame zu machen. Wenn Sie die traditionelle Methode anwenden, werden Sie nicht mehr von Ihren Dingen berücksichtigen. Es wird nur wissen, wie viel Zeit ich vergangen bin und ich werde es ausführen. Wenn der Benutzer zuvor blockiert ist und diese Methode alle 10 Sekunden innerhalb von 10 Sekunden ausführt, wurden die vorherigen Arbeiten nicht abgeschlossen, und dann wird die Arbeiten verschoben. Es ist optimiert, dass die Animation glatter aussieht, da Sie in jedem Rahmen sagen, dass Sie etwas tun können. (Text: infoq)