Verbessern der Leistung

Verbessern der Leistung in Hilo (Windows Store-Apps mit JavaScript und HTML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Aus: Umfassende Entwicklung einer Windows Store-App mit JavaScript: Hilo

Leitfaden-Logo

Vorherige Seite | Nächste Seite

Das Hilo-Team hat einige Zeit aufgewendet, um herauszufinden, was beim Erstellen einer dynamischen Windows Store-App sinnvoll ist und wovon abzuraten ist. Im Folgenden finden Sie einige Tipps und Codierungsrichtlinien für das Erstellen einer leistungsfähigen App mit hoher Reaktionsfähigkeit.

Download

Herunterladen des Hilo-Beispiels
Buch herunterladen (PDF)

Anweisungen zu dem heruntergeladenen Code finden Sie unter Erste Schritte mit Hilo.

Sie erfahren Folgendes:

  • Tipps zum Erstellen einer dynamischen App.
  • Die Unterschiede zwischen Leistung und wahrgenommener Leistung.
  • Empfohlene Strategien für die Erstellung eines App-Profils.

Betrifft

  • Windows-Runtime für Windows 8
  • Windows-Bibliothek für JavaScript
  • JavaScript

Tipps für die Leistung

Eine dynamische App reagiert schnell und mit der nötigen Energie auf Benutzeraktionen. Das Hilo-Team hat einige Zeit aufgewendet, um herauszufinden, was beim Erstellen einer dynamischen App sinnvoll ist und wovon abzuraten ist. Die folgenden Punkte sollten beachtet werden:

Einschränken der Startzeit

Es ist wichtig, dass der Benutzer beim Starten Ihrer App nicht lange warten muss. Sie können die Ladezeit einer App erheblich verbessern, indem Sie ihre Inhalte lokal verpacken. Außerdem ergeben sich daraus weitere Leistungsvorteile, z. B. in Bezug auf die Bytecode-Zwischenspeicherung. Die Bytecode-Zwischenspeicherung ist eine Technik, mit der das System für jede JavaScript-Datei einmalig einen Bytecode erstellt, anstatt den Bytecode bei jedem Start der App neu zu erstellen. Mit dieser Technik verbessert sich die Ladezeit von größeren Apps um ungefähr 30 Prozent. Um von der Bytecode-Zwischenspeicherung profitieren zu können, müssen Sie sicherstellen, dass alle JavaScript-Dateien in UTF8 mit einer Bytereihenfolge-Marke codiert sind. Sorgen Sie auch dafür, dass im Stamm der HTML-Startseite statisch auf alle JavaScript-Dateien verwiesen wird. Weitere Informationen finden Sie unter Verringern der App-Ladezeit.

[Oben]

Sicherstellen eines guten Reaktionsverhaltens

Blockieren Sie Ihre App nicht mit synchronen APIs, da die App dann während der Ausführung der API nicht auf neue Ereignisse reagieren kann. Verwenden Sie stattdessen asynchrone APIs, die im Hintergrund ausgeführt werden, und benachrichtigen Sie die App durch Auslösen eines Ereignisses über deren Abschluss. Zudem sollten Sie verarbeitungsintensive Vorgänge in mehrere kleinere Vorgänge unterteilen, damit die App zwischen diesen Vorgängen auf Benutzereingaben reagieren kann. Weitere Informationen finden Sie unter Ausführen von Code.

[Oben]

Verwenden von Miniaturbildern für das schnelle Rendern

Die Dateisystem- und Mediendateien sind ein wichtiger Bestandteil der meisten Apps und zudem einer der häufigsten Gründe für Leistungsprobleme. Der Dateizugriff stellt üblicherweise einen kritischen Leistungsengpass für Apps dar, in denen Galerieansichten von Dateien, z. B. Fotodateien, angezeigt werden. Der Zugriff auf Bilder kann langsam erfolgen, da Arbeitsspeicher und CPU-Zyklen zum Speichern sowie zum Decodieren und Anzeigen des Bilds benötigt werden.

Anstatt ein Bild voller Größe für die Anzeige als Miniaturansicht herunterzuskalieren, sollten Sie die Miniaturansicht-APIs der Windows-Runtime verwenden. Die Windows-Runtime stellt eine Reihe von APIs bereit, die von einem effizienten Cache unterstützt werden. Dieser ermöglicht das schnelle Abrufen einer kleineren Version eines Bilds, das als Miniaturansicht genutzt werden kann. Mit diesen APIs kann die Zeit für die Codeausführung um einige Sekunden reduziert und die visuelle Qualität der Miniaturansicht verbessert werden. Da diese APIs die Miniaturansichten zwischenspeichern, können sie zudem nachfolgende Startvorgänge der App beschleunigen. Weitere Informationen finden Sie unter Effizientes Zugreifen auf das Dateisystem.

[Oben]

Abrufen von Miniaturansichten beim Zugriff auf Elemente

Die Windows-Runtime stellt nicht nur APIs zum Abrufen von Miniaturansichten bereit, sondern enthält in ihrer API auch die setThumbnailPrefetch-Methode. Diese Methode bestimmt den Typ und die Größe von Miniaturansichten, die das System beim Zugriff auf Elemente sofort laden sollte, anstatt sie situationsabhängig abzurufen.

Die MonthPresenter-Klasse in Hilo JavaScript fragt das Dateisystem nach Fotos für die Anzeige auf der Monatsseite ab, die bestimmte Kriterien erfüllen, und gibt diese Fotos zurück. Die _getImageQueryOptions-Funktion gibt mithilfe der setThumbnailPrefetch-Methode Miniaturansichten im Abfrageresultset zurück. Hier ist der Code:

Hilo\Hilo\month\monthPresenter.js


_getImageQueryOptions: function () {
    var queryOptions = new search.QueryOptions(search.CommonFileQuery.orderByDate, [".jpg", ".jpeg", ".tiff", ".png", ".bmp", ".gif"]);
    queryOptions.setPropertyPrefetch(fileProperties.PropertyPrefetchOptions.none, [itemDateProperty]);
    queryOptions.setThumbnailPrefetch(fileProperties.ThumbnailMode.picturesView, 190, fileProperties.ThumbnailOptions.useCurrentScale);
    queryOptions.indexerOption = search.IndexerOption.useIndexerWhenAvailable;
    return queryOptions;
},


In diesem Fall ruft der Code Miniaturansichten ab, mit denen für jedes Foto eine Vorschau mit einer angeforderten Länge von 190 Pixeln für die längste Seite angezeigt wird, und erhöht die angeforderte Größe der Miniaturansicht auf Grundlage der PPI (Pixel Per Inch, Pixel pro Zoll) der Anzeige. Mit der setThumbnailPrefetch-Methode lässt sich die Zeit zum Anzeigen einer Ansicht von Fotos aus "Bilder" des Benutzers um 70 Prozent verringern.

[Oben]

Freigeben von Medien- und Datenstromressourcen, wenn sie nicht mehr benötigt werden

Aufgrund von Mediendateiressourcen kann der Speicherbedarf Ihrer App beträchtlich gesteigert werden. Daher ist es wichtig, den Handle zu den Medien unverzüglich freizugeben, sobald diese von der App nicht mehr verwendet werden. Durch das Freigegeben von nicht verwendeten Medienstreams kann der Arbeitsspeicherbedarf der App deutlich reduziert und vermieden werden, dass sie beendet wird, wenn sie angehalten wurde.

Unter Hilo werden Instanzen der InMemoryRandomAccessStream-Klasse beispielsweise freigegeben, wenn diese nicht mehr benötigt werden, indem für die Objekte die close-Methode aufgerufen wird. Hier ist der Code:

Hilo\Hilo\imageWriter.js


if (memStream) { memStream.close(); }
if (sourceStream) { sourceStream.close(); }
if (destStream) { destStream.close(); }


Weitere Informationen finden Sie unter Effizientes Zugreifen auf das Dateisystem.

[Oben]

Optimieren der ListView-Leistung

Wenn Sie ein ListView-Steuerelement verwenden, kann die Leistung anhand mehrerer Methoden optimiert werden. Sie sollten Folgendes optimieren:

  • Initialisierung. Das Zeitintervall, das mit dem Erstellen des Steuerelements beginnt und dann endet, wenn auf dem Bildschirm Elemente angezeigt werden.
  • Verschiebung mit den Fingern. Die Möglichkeit, das Steuerelement per Berührung zu verschieben und sicherzustellen, dass sich die Benutzeroberfläche den Fingerbewegungen anpasst.
  • Bildlauf. Die Möglichkeit, mit der Maus einen Bildlauf durch die Liste auszuführen und sicherzustellen, dass die Benutzeroberfläche gemäß der Mausbewegung aktualisiert wird.
  • Interaktion zum Auswählen, Hinzufügen und Löschen von Elementen.

Für das ListView-Steuerelement muss die App die Datenquellen und die Vorlagenfunktion bereitstellen, um das Steuerelement für die App anzupassen. Die Konfigurationen dieser Aktionen in der ListView-Implementierung hat großen Einfluss auf die Gesamtleistung. Weitere Informationen finden Sie unter Verwenden des ListView-Steuerelements und Verwenden von Datenquellen.

[Oben]

Beschränken von DOM-Interaktionen auf ein Minimum

In Windows Store-Apps, die eine JavaScript-Plattform verwenden, sind das DOM und das JavaScript-Modul separate Komponenten. Jeder JavaScript-Vorgang, der eine Kommunikation zwischen diesen Komponenten erfordert, ist leistungsfähiger im Vergleich zu Vorgängen, die sich allein innerhalb der JavaScript-Laufzeit abspielen. Daher ist es wichtig, die Interaktionen zwischen diesen Komponenten auf ein Minimum zu beschränken.

Verwenden Sie DOM-Objekte nur zum Speichern von Informationen, die direkten Einfluss darauf haben, wie das DOM Elemente anordnet oder einfügt. Das Verwenden von DOM-Objekten kann bei der Zugriffszeit – im Vergleich zum Zugriff auf Variablen, die nicht an das DOM gebunden sind – zu einem Anstieg in Höhe von 700 Prozent führen. Weitere Informationen finden Sie unter Schreiben von effizientem JavaScript.

[Oben]

Optimieren des Zugriffs auf Eigenschaften

Die Flexibilität, neue Eigenschaften schnell einzelnen Objekten hinzufügen bzw. daraus entfernen zu können, führt zu einer erheblichen Leistungssteigerung, weil zum Abrufen von Eigenschaftswerten Wörterbuch-Suchvorgänge erforderlich sind. Sie können den Eigenschaftszugriff für bestimmte Programmierungsmuster durch die Verwendung eines internen abgeleiteten Typsystems beschleunigen, das Objekten mit den gleichen Eigenschaften einen Typ zuweist. Gehen Sie wie folgt vor, um diese Optimierung durchzuführen:

  • Verwenden Sie Konstruktoren, um Eigenschaften zu definieren.
  • Fügen Sie die Eigenschaften den Objekten jeweils in der gleichen Reihenfolge hinzu, wenn Sie mehrere Instanzen eines Objekts erstellen.
  • Löschen Sie keine Eigenschaften, da sich dies negativ auf die Leistung der Vorgänge des Objekts auswirken kann, in denen die Eigenschaft enthalten war.
  • Definieren Sie keine Standardwerte für Prototypen oder bedingt hinzugefügte Eigenschaften. Dadurch kann zwar der Speicherverbrauch reduziert werden, Objekte dieser Art erhalten jedoch unterschiedliche abgeleitete Typen, sodass für den Zugriff auf deren Eigenschaften Wörterbuch-Suchvorgänge erforderlich sind.

Weitere Informationen finden Sie unter Schreiben von effizientem JavaScript.

[Oben]

Verwenden unabhängiger Animationen

Bei Windows Store-Apps mit JavaScript können bestimmte Animationen vom UI-Thread in einen separaten GPU-beschleunigten Systemthread abgeladen werden. Diese Abladung sorgen für fließendere Animationen, da diese nicht durch Aktionen im UI-Thread blockiert werden. Diese Art von Animation wird als unabhängige Animation bezeichnet.

In Hilo werden z. B. CSS3-Übergänge und Animationen verwendet, um die transform-Eigenschaft auf unabhängige Weise zum Drehen eines Fotos zu animieren. Weitere Informationen finden Sie unter Animieren.

[Oben]

Effizientes Verwalten des Layouts

Zum Rendern einer App muss das System komplexe Verarbeitungsschritte durchführen, bei denen die Regeln von HTML, CSS und anderen Spezifikationen auf die Größe und Position der Elemente im DOM angewendet werden. Dieser Vorgang wird als Layoutdurchlauf bezeichnet und beeinträchtigt u. U. die Leistung.

Mehrere API-Elemente lösen einen Layoutdurchlauf aus, z. B. window.getComputedStyle, offsetHeight, offsetWidth, scrollLeft und scrollTop. Eine Möglichkeit, die Anzahl der Layoutdurchläufe zu reduzieren, besteht darin, API-Aufrufe zu kombinieren, die einen Layoutdurchlauf verursachen. Je komplexer die UI Ihrer App ist, desto wichtiger ist die Befolgung dieses Tipps. Weitere Informationen finden Sie unter Effizientes Verwalten des Layouts.

[Oben]

Effizientes Speichern des Zustands

Speichern Sie Sitzungsdaten im sessionState-Objekt. Dieses Objekt ist eine speicherinterne Datenstruktur zum Speichern von Werten, die sich häufig ändern und auch dann erhalten bleiben müssen, wenn Windows die App beendet. Es wird automatisch in das Dateisystem serialisiert, wenn die App angehalten wird, und bei Reaktivierung der App automatisch neu geladen. Mithilfe dieses Objekts können Sie die Anzahl der Dateivorgänge Ihrer App verringern. Weitere Informationen finden Sie unter Effizientes Speichern und Abrufen des Zustands.

[Oben]

Sorgen Sie dafür, dass die Speicherauslastung der angehaltenen App gering ist

Wenn die App nach dem Anhalten fortgesetzt wird, wird sie fast unverzüglich wieder angezeigt. Wenn die App jedoch nach dem Beenden neu gestartet wird, kann es etwas länger dauern, bis sie wieder angezeigt wird. Indem Sie das Beenden der App nach dem Anhalten verhindern, können Sie die Wahrnehmung der Reaktionsfähigkeit der App durch den Benutzer sowie die entsprechende Toleranz optimieren. Dies erreichen Sie, indem Sie die Speicherauslastung der angehaltenen App gering halten.

Wenn das Anhalten der App beginnt, sollte sie alle großen Objekte freigeben, die beim Fortsetzen ohne Aufwand neu erstellt werden können. So lässt sich der Speicherbedarf der App gering halten, und die Wahrscheinlichkeit dafür wird verringert, dass Windows die App nach dem Anhalten beendet. Weitere Informationen finden Sie unter Optimieren des App-Lebenszyklus und Behandeln von Anhalten, Fortsetzen und Aktivierung.

[Oben]

Minimieren der von der App verwendeten Ressourcenmenge

Unter Windows müssen die Ressourcenanforderungen aller Windows Store-Apps erfüllt werden. Dabei wird mit der Prozesslebensdauer-Verwaltung (Process Lifetime Management, PLM) ermittelt, welche Apps geschlossen werden, um die Ausführung anderer Apps zu ermöglichen. Dies führt dazu, dass andere Apps möglicherweise geschlossen werden, wenn Ihre App eine große Menge an Speicher nutzt, selbst wenn die App den Speicher kurz nach dem Anfordern freigibt. Minimieren Sie den Umfang der von der App verwendeten Ressourcen, um zu verhindern, dass Benutzer wahrgenommene Verlangsamungen im System auf Ihre App zurückführen.

[Oben]

Grundlegendes zur Leistung

Benutzer habe eine Reihe von Erwartungen an Apps. Sie möchten, dass die App sofort auf Fingereingaben, Mausklicks, Gesten und das Drücken von Tasten reagiert. Sie erwarten die gleichmäßig fließende Anzeige von Animationen. Sie erwarten, dass die App immer mit der Geschwindigkeit ihrer eigenen Aktionen mithält.

Leistungsprobleme können in unterschiedlicher Form auftreten. Sie können die Akkulaufzeit verringern, dazu führen, dass das Verschieben und Bildläufe langsamer als die Bewegung des Fingers erfolgen, oder verursachen, dass die App für einen gewissen Zeitraum nicht reagiert.

Beim Optimieren der Leistung geht es nicht nur um das Implementieren von effizienten Algorithmen. Zur Leistung zählt auch die vom Benutzer wahrgenommene App-Leistung. Die App-Erfahrung des Benutzers lässt sich in drei Kategorien unterteilen – Wahrnehmung, Toleranz und Reaktionsfähigkeit.

  • Wahrnehmung. Die Wahrnehmung der Leistung durch Benutzer lässt sich als die erinnerte Dauer definieren, die zum Ausführen der Aufgaben des Benutzers in der App benötigt wurde. Wahrgenommene und reale Leistung stimmen nicht immer überein. Die wahrgenommene Leistung lässt sich verbessern, indem die Zeitspanne zwischen Aktivitäten, die der Benutzer zum Abschließen einer Aufgabe ausführen muss, verringert wird.
  • Toleranz. Das Ausmaß der vom Benutzer tolerierten Verzögerung hängt von der vom Benutzer erwarteten Dauer eines Vorgangs ab. Beispielsweise kann ein Benutzer die Funktion zum Zuschneiden eines Bilds inakzeptabel finden, wenn die App während des Zuschneidens nicht mehr reagiert, und sei dies nur für einige Sekunden. Die Toleranz eines Benutzers für Verzögerungen lässt sich erhöhen, indem Sie Aufgaben der App identifizieren, die sehr viel Verarbeitungszeit erfordern, und die Unsicherheit des Benutzers während dieser Aufgaben beschränken oder beseitigen, indem Sie eine visuelle Fortschrittsanzeige bereitstellen. Zudem können Sie asynchrone APIs verwenden, um zu verhindern, dass die App eingefroren zu sein scheint.
  • Reaktionsfähigkeit. Die Reaktionsfähigkeit einer App wird relativ zur ausgeführten Aktivität bestimmt. Um die Leistung einer Aktivität zu messen und zu bewerten, ist ein Zeitintervall erforderlich, das als Vergleichsmaßstab dient. Das Hilo-Team befolgte die Richtlinie, dass die App Feedback in Form einer Statusanzeige für den Benutzer bereitstellen muss, wenn eine Aktivität länger als 500 Millisekunden dauert.

[Oben]

Verbessern der Leistung durch App-Profilerstellung

Ein Verfahren, mit dem sich bestimmen lässt, wo Codeoptimierungen die größte Wirkung beim Reduzieren von Leistungsproblemen haben, ist die App-Profilerstellung. Mit den Profilerstellungstools für Windows Store-Apps können Sie Leistungsprobleme im Code ermitteln und Schritte zu ihrer Lösung unternehmen. Der Profiler sammelt Zeitinformationen für Apps. Dies erfolgt mit einem Sampling-Verfahren, bei dem CPU-Aufruflisteninformationen in regelmäßigen Intervallen erfasst werden. Bei der Profilerstellung werden Informationen über die Leistung der App angezeigt. Sie können die Ausführungspfade des Codes sowie die Ausführungskosten der Funktionen anzeigen, damit Sie die besten Optimierungsmöglichkeiten bestimmen können. Weitere Informationen finden Sie unter So erstellen Sie ein Profil von JavaScript-Code in Windows Store-Apps auf einem lokalen Computer. Informationen zum Analysieren der vom Profil zurückgegebenen Daten finden Sie unter Analysieren von Leistungsdaten für JavaScript in Windows Store-Apps.

Beachten Sie bei der Profilerstellung für die App die folgenden Tipps, um sicherzustellen, dass zuverlässige und reproduzierbare Leistungsmessungen durchgeführt werden:

  • Führen Sie als Mindestmaßnahme Leistungsmessungen für Hardware mit den niedrigsten angenommenen Spezifikationen durch. Windows 8 wird auf einer großen Vielfalt unterschiedlicher Geräte ausgeführt, und Leistungsmessungen für einen Gerätetyp zeigen nicht immer die Leistungsmerkmale von anderen Formfaktoren.
  • Achten Sie darauf, das Profil für die App auf dem Gerät, auf dem Leistungsmessungen erfolgen, jeweils zu erstellen, wenn die Stromversorgung über das Stromnetz und über einen Akku erfolgt. Viele Systeme sparen Energie, wenn die Stromversorgung über einen Akku erfolgt, und werden daher anders ausgeführt.
  • Die Gesamtauslastung des Arbeitsspeichers auf dem System muss weniger als 50 Prozent betragen. Wenn sie höher ist, schließen Sie Apps, bis Sie 50 Prozent erreichen, um sicherzustellen, dass Sie die Auswirkungen Ihrer App und nicht die Auswirkungen anderer Prozesse messen.
  • Wenn Sie die Profilerstellung der App remote ausführen, wird empfohlen, direkt auf dem Remotegerät mit der App zu interagieren. Obwohl die Interaktion mit der App über eine Remotedesktopverbindung möglich ist, kann dies zu erheblichen Änderungen der Leistung der App und der von Ihnen erfassten Leistungsdaten führen. Weitere Informationen finden Sie unter So erstellen Sie ein Profil von JavaScript-Code in Windows Store-Apps auf einem Remotegerät.
  • Erstellen Sie das Profil der App nicht im Simulator, da der Simulator die Leistung der App verzerren kann.

[Oben]

Weitere Leistungstools

Zusätzlich zu den Profilerstellungstools zum Messen der App-Leistung hat das Hilo-Team die Leistungsanalyse für HTML5-Apps und die Windows-Zuverlässigkeits- und Leistungsüberwachung (Perfmon) verwendet.

Bei der Leistungsanalyse für HTML5-Apps handelt es sich um ein Tool, das Ihnen das Erkennen allgemeiner Leistungsprobleme in HTML5-Apps ermöglicht. Mit dem Tool wird eine App auf häufige Leistungskennzahlen untersucht, z. B. Aktivierungszeit, Reaktionsfähigkeit der Benutzeroberfläche, Speicherbedarf, Arbeitsspeicherverluste und Zunahme der Speicherauslastung. Weitere Informationen finden Sie unter Leistungsanalyse für HTML5-Apps.

Mit Perfmon können Sie überprüfen, wie sich ausgeführte Programme auf die Leistung des Geräts auswirken, und zwar sowohl in Echtzeit als auch durch das Erfassen von Protokolldaten für die spätere Analyse. Mit diesem Tool generierte das Hilo-Team eine allgemeine Diagnose der Leistung der App. Weitere Informationen finden Sie unter Windows-Zuverlässigkeits- und Leistungsüberwachung.

[Oben]

 

 

Anzeigen:
© 2017 Microsoft