Verbessern der Reaktionsfähigkeit der Benutzeroberfläche

Mit dem Tool Reaktionsfähigkeit der Benutzeroberfläche können Sie ein Profil der Framerate Ihrer Webseite und verschiedener CPU-Auslastungstypen erstellen, um Probleme mit der UI-Leistung zu analysieren.

Dashboard im Vergleich zu Diagnosen

Bevor Sie die Leistung Ihrer Seite untersuchen, sollten Sie ihre "Vitalparameter" mit dem Leistungsdashboard überprüfen.

Anzeige von Maldauer, Framerate, Arbeitsspeicher und CPU-Auslastung im Leistungsdashboard

Sie können über das Menü Extras in Internet Explorer 11 auf das Leistungsdashboard zugreifen (STRG+UMSCHALTTASTE+U). Das Tool bietet Ihnen schnell einen Überblick darüber, wie viel Zeit Ihre Seite benötigt, um am DOM vorgenommene Änderungen zu rendern (Maldauer), wie viele Frames pro Sekunde sie rendert (Framerate), wie viel Arbeitsspeicher sie verbraucht (Arbeitsspeicher) und wie stark sie Ihren Prozessor in Anspruch nimmt (CPU).

Klicken Sie auf eine Messung, um ein dynamisches Diagramm der Zu- und Abnahmen im Zeitverlauf anzuzeigen. Wenn Sie mit Ihrer Untersuchung fertig sind, klicken Sie auf das Diagramm, um zum Dashboard zurückzukehren.

Das Dashboard ist ein hervorragender Ausgangspunkt zum Identifizieren der Aktionen, die in Ihrer Website Geschwindigkeitsprobleme verursachen. Verwenden Sie anschließend den Profiler Reaktionsfähigkeit der Benutzeroberfläche, um genauere Details der Probleme zu ermitteln.

Geschwindigkeit ist wichtig

Ganz gleich, ob es um eine wackelige Animation oder langsam reagierende Benutzeroberflächenelemente geht – eine UI, die nicht glatt und fließend, sondern ruckelig und langsam ist, schmälert die Benutzerfreundlichkeit Ihrer Website. Der neue Profiler Reaktionsfähigkeit der Benutzeroberfläche zeigt Ihnen, was hinter den Kulissen passiert, wenn Ihre Seiten langsamer werden. Diese Informationen können wertvolle Tipps zum Verbessern der Geschwindigkeit liefern.

Tool "Reaktionsfähigkeit der Benutzeroberfläche" in den F12-Entwicklungstools

Aufzeichnen einer Profilerstellungssitzung

Wenn Sie das Tool Reaktionsfähigkeit der Benutzeroberfläche zum ersten Mal laden, wird im Hauptbereich die Anweisung Profilerstellung zum Start einer Leistungssitzung starten angezeigt. Klicken Sie auf den Anweisungslink oder auf das Pfeilsymbol oben im Tool, um die Profilerstellung zu starten.

Führen Sie während der Profilerstellung nur die Aktionen aus, die zum Aufzeichnen des zu analysierenden Geschwindigkeitsproblems absolut notwendig sind. Zusätzliche Interaktionen mit der Seite erzeugen zusätzliche Daten, die die Ergebnisse unübersichtlich machen.

Wenn Sie die genauen Seitenladezeiten im Bericht erfassen müssen, öffnen Sie vor der Profilerstellung das Tool "Netzwerk", und verwenden Sie die Option Browsercache löschen. Durch die Verwendung des Tools "Netzwerk" stellen Sie sicher, dass alle Seitenressourcen aus dem Netzwerk geladen werden und die Seite dann beim Start der Profilerstellung erneut geladen wird.

Das Tool Reaktionsfähigkeit der Benutzeroberfläche kennzeichnet Ereignisse im App-Lebenszyklus wie z. B. DOMContentLoaded automatisch. Verwenden Sie die performance.mark()-Methode, um in Ihrem Code benutzerdefinierte Benutzermarkierungen festzulegen.

Wenn Sie das Verhalten aufgezeichnet haben, für das Sie ein Profil erstellen möchten, klicken Sie auf Profilerstellung zum Generieren eines Berichts beenden oder das quadratische Symbol oben im Tool.

Das kumulative Sicherheitsupdate für Internet Explorer (KB2976627) wurde erweitert und bietet jetzt die Möglichkeit, Profilerstellungssitzungen des Tools Reaktionsfähigkeit der Benutzeroberfläche zu importieren und zu exportieren. Mithilfe der Importfunktion (Ordnersymbol oder STRG+O) und der Exportfunktion (Datenträgersymbol oder STRG+S) kann eine Profilerstellungssitzung zu einem späteren Zeitpunkt überprüft werden, ohne dass der Browser und die F12-Entwicklungstools die ganze Zeit geöffnet bleiben müssen.

Bericht der Leistungssitzung

Lineal

Lineal im Tool "Reaktionsfähigkeit der Benutzeroberfläche"

Das Lineal zeigt die Ausführungsdauer der Sitzung sowie Ereignisse im App-Lebenszyklus und Benutzermarkierungen an. Um sich die Orientierung innerhalb einer Sitzung zu erleichtern, können Sie die Bezeichnungen von Ereignissen und Markierungen einblenden, indem Sie mit dem Mauszeiger auf sie zeigen.

Sie können Benutzermarkierungen Bezeichnungen zuweisen, indem Sie eine Zeichenfolge für das Argument der performance.mark()-Methode angeben.

Benutzermarkierungen wurden mit der performance.measure()-API im kumulativen Sicherheitsupdate für Internet Explorer (KB2976627) verbessert. Nachdem Sie Benutzermarkierungen festgelegt haben, legen Sie ein Benutzerkriterium fest, um die Ereignisse zu gruppieren, die zwischen den beiden Markierungen aufgetreten sind. Wenn Sie z. B. über die beiden Benutzermarkierungen mit der Bezeichnung „Begin Rotation“ und „End Rotation“ verfügen, gruppieren Sie sie mit dem folgenden Code und nennen die Gruppe „box cycler“.


performance.measure("box cycler","Begin Rotation","End Rotation");

Abbildung der performance.measure-Gruppierung im Tool „Reaktionsfähigkeit der Benutzeroberfläche“

Zeitskala

Zeitskala im Tool "Reaktionsfähigkeit der Benutzeroberfläche"

Die Zeitskala zeigt zwei unterschiedliche Kennzahlen:

CPU-Auslastung zeigt die Aktivitätsmengen und -typen in farbkodierten Kategorien. Eine detailliertere Aufschlüsselung der Kategorien finden Sie unter Ereigniskategorien.
Visueller Durchsatz zeigt die ungefähre Anzahl von Frames pro Sekunde. Abnahmen der Framerate zeigen, wo die Geschwindigkeit abnimmt, und eine Framerate von Null bedeutet, dass Frames verworfen werden.

Klicken Sie auf einen Bereich auf der Zeitskala, und führen Sie eine horizontale Ziehbewegung aus, um ihn hervorzuheben. Dadurch werden die Details zur Zeitskala so gefiltert, dass nur die Details des hervorgehobenen Bereichs angezeigt werden. Zoomen Sie, um mehr Details anzuzeigen. Rechts neben den Zoomsteuerelementen oben im Tool Reaktionsfähigkeit der Benutzeroberfläche befindet sich ein Symbol Auswahl aufheben, mit dem die Hervorhebung aufgehoben werden kann.

Details zur Zeitskala

Detailbereich des Tools "Reaktionsfähigkeit der Benutzeroberfläche"

Die Details zur Zeitskala liefern ausführlichere Informationen zu den aufgezeichneten Ereignissen und untergliedern die Kategorien in die jeweiligen Komponentenereignisse. Diese Informationen enthalten Details zu den DOM-Elementen, die von den Ereignissen betroffen sind, oder zum Code, der in Folge der Ereignisse ausgeführt wird.

In der obigen Abbildung hat das DOMContentLoaded-Ereignis eine sehr kurze exklusive Zeitdauer (zum Auslösen des Ereignisses selbst erforderliche Zeit). Die längere inklusive Zeitdauer beinhaltet nicht nur das Ereignis, sondern auch mehrere Prozesse, die in Folge des Ereignisses gestartet wurden.

Der Ereignistypfilter auf der rechten Bildschirmseite wurde im kumulativen Sicherheitsupdate für Internet Explorer (KB2976627) erweitert. Die bisherigen Filter für Hintergrundaktivität und Netzwerkdatenverkehr wurden durch Filter für UI-Aktivität und Benutzerkriterien erweitert. Wird eine dieser Optionen ausgewählt, wird dieser Ereignistyp aus den Details zur Zeitskala herausgefiltert. Während eine Seite beispielsweise geladen wird, können die Details in HTTP-Anforderungsereignissen untergehen. Klicken Sie auf den Filter Ereignistyp, und deaktivieren Sie das Kontrollkästchen Netzwerkdatenverkehr, um diese Ereignisse auszublenden.

Im unteren Bereich des Dialogfelds wurde ein Zeitfilter hinzugefügt, mit dem alle Ereignisse unter einer Millisekunde herausgefiltert werden können, und im oberen Bereich ein Textfeld, um nach Text im Namen des Ereignisses zu filtern.

Tool „Reaktionsfähigkeit der Benutzeroberfläche“ mit geöffnetem Filterdialogfeld

Links neben der aktualisierten Filterschaltfläche weist das kumulative Sicherheitsupdate für Internet Explorer (KB2976627) mit der Schaltfläche Ereignisse der obersten Ebene nach Rahmen gruppieren oder Framegruppierung eine völlig neue Option auf. Dadurch wird eine Reihe von Pseudoereignissen erstellt, die auf der gemessenen Framerate und den darunter enthaltenen Gruppenereignissen basiert. Wenn Sie ermitteln möchten, warum in einer Animation Frames ausgelassen werden, können Sie auf diese Weise Arbeitseinheiten nach Frames aufgliedern und feststellen, an welcher Stelle die Ausführung einiger Frames länger als die anderer Frames gedauert hat.

Nach Frame gruppierte Details zur Zeitskala

Einen Überblick über die Ereignisse, die zur inklusiven Zeitdauer beigetragen haben, bietet das im Ereignisdetailbereich angezeigte Kreisdiagramm, für das die gleiche Farbkodierung wie für die Zeitskala verwendet wird. Da die Farben Ereigniskategorien darstellen, kann das Diagramm mehrere Segmente in derselben Farbe enthalten. Wenn Sie mit dem Mauszeiger auf ein Segment zeigen, wird eine QuickInfo mit der Ereignisbezeichnung angezeigt.

Filtern für Ereignisse

In Windows 8.1 Update können Sie nun mit der rechten Maustaste auf ein Ereignis klicken, um ein Kontextmenü mit drei Optionen anzuzeigen:

  • Für Ereignis filtern stellt die Vergrößerungsstufe auf die inklusive Zeitdauer des Ereignisses ein. Auf diese Weise werden nur Elemente angezeigt, die gleichzeitig aufgetreten sind.
  • Auswahl aufheben setzt die Vergrößerungsstufe zurück.
  • Quelle anzeigen wird nur für Scripting-Ereignisse aktiviert. Diese Option wechselt zum Debugger, öffnet die Datei mit dem Code, der das Ereignis generiert hat, und platziert den Mauszeiger an der Stelle im Code, an der das Ereignis generiert wurde.

Details im Detailbereich

Jedes Element im Bereich Details zur Zeitskala zeigt abhängig vom Typ andere Informationen.

Explizite Ereignisdetails aus dem F12-Entwicklungstool "Reaktionsfähigkeit der Benutzeroberfläche"

Dieser Timer wurde von einer setTimeout()-Methode aufgerufen, die die autoNextSlide-Funktion in script.jsx aufgerufen hat. Wenn Sie auf den Dateinamen klicken, wird das Tool "Debugger" geöffnet, und die Funktion wird dort zum Untersuchen angezeigt.

Das Kreisdiagramm unten im Bereich zeigt, dass Skripting einen großen Teil der Ereignisdauer ausgemacht hat und für die Kategorie Stile ebenfalls recht viel Zeit benötigt wurde. Wenn Sie das Ereignis des Timers in den Details zur Zeitskala erweitern, werden weitere Informationen zu den verschiedenen Vorgängen der Kategorie Stile angezeigt, die zur erforderlichen Zeit beigetragen haben.

Im kumulativen Sicherheitsupdate für Internet Explorer (KB2976627) wurde die Ansicht Auswahlzusammenfassung hinzugefügt. Wenn Sie also einen Teil der Zeitskala auswählen, werden die Zusammenfassungsinformationen dieser Auswahl im Ereignisdetailbereich wie ein Zeitskalenereignis dargestellt, bis Sie ein Ereignis aus den Details zur Zeitskala auswählen.

Tool „Reaktionsfähigkeit der Benutzeroberfläche“ mit angezeigter Auswahlzusammenfassung

Ereigniskategorien und -definitionen

Auf der Zeitskala des Tools "Reaktionsfähigkeit der Benutzeroberfläche" werden sieben Hauptereigniskategorien verwendet. Diese Kategorien werden im Bereich Details zur Zeitskala in eine Auswahl von Ereignissen aufgeschlüsselt.

Laden enthält Ereignisse im Zusammenhang mit dem Bootstrapping und Laden der Ressourcen einer Webseite. Diese Ereignisse werden für das Hauptfenster und die darin enthaltenen Frames aufgezeichnet. Folgende Ereignisse werden in der Kategorie Laden erfasst:
  • CSS-Analyse: Neuer CSS-Inhalt wurde gefunden und muss analysiert werden. Zu den Details zählen die URL des Inhalts oder bei Inhalt, der in der Webseite hartcodiert ist, die Angabe Inline in Klammern nach dem Ereignis.
  • HTML parsing: Neuer HTML-Inhalt wurde gefunden und muss in Knoten unterteilt sowie dem DOM hinzugefügt wurde.
  • HTTP request: Sendet eine HTTP-Anforderung an einen Server und empfängt die Antwort. Es können mehrere Antworten gleichzeitig auftreten und nur eine unerhebliche Menge von Ressourcen verbrauchen. Das Rendern kann allerdings verzögert werden, wenn auf den Abschluss einer großen oder langsamen HTTP-Anforderung gewartet werden muss. Zu den Details zählen die URL der Anforderung und der Antwortcode.
  • Speculative downloading: Im HTML-Inhalt der Webseite wird nach benötigten Ressourcen gesucht, damit HTTP-Anforderungen so schnell wie möglich geplant werden können.
Skripting enthält Ereignisse im Zusammenhang mit der Verarbeitung und Ausführung von JavaScript. Folgende Ereignisse werden in der Kategorie Skripting erfasst:
  • Animationsframe-Rückruf: Ein neuer Frame wurde vorbereitet, und ein registrierter Rückruf wurde ausgelöst, sodass visuelle Änderungen stattfinden können. Zu den Details zählen die Position des Rückrufs innerhalb der Webseitenskripts oder externen Skripts.
  • DOM-Ereignis: Ein DOM event wurde ausgelöst. Angefügte Ereignislistener werden als untergeordnete Elemente des Ereignisses angezeigt.
  • Skriptauswertung: Verarbeitung von Inhalt in <script>-Elementen. Zu den Details zählen die URL des Skripts oder, wenn das Skript Teil der Webseite ist, die Angabe Inline.
  • Timer: Eine interval- oder timeout-Methode wurde abgeschlossen und hat die Ausführung des zugehörigen Rückrufs ausgelöst. Zu den Details zählen die Position des Timers innerhalb der Webseitenskripts oder externen Skripts, die Dauer und der Name der Rückruffunktion (sofern vorhanden). Durch den Rückruf ausgelöste Aktionen werden als untergeordnete Elemente des Ereignisses angezeigt.
  • Media query listener: Ein in Reaktion auf ein Medienabfrageereignis ausgeführtes Skript wird im kumulativen Sicherheitsupdate für Internet Explorer (KB2976627) jetzt als eigene Kategorie behandelt.
  • Mutation observer: Skripts, die in Reaktion auf Ereignisse ausgeführt werden, die durch Veränderungsbeobachtungen ausgelöst werden, werden im kumulativen Sicherheitsupdate für Internet Explorer (KB2976627) jetzt als Kategorie behandelt.

Wenn eine Änderung an einem Style-Objekt explizit über JavaScript (d. h. element.style.height="20px") vorgenommen wird und daher das DOM aktualisiert werden muss, werden die einzelnen Änderungen und ihre exklusiven Zeiten als untergeordnete Elemente des Scripting-Ereignisses angezeigt, das sie verursacht hat. Dies ist neu in Windows 8.1 Update.

GC(Garbage Collection) ist die Identifizierung nicht mehr benötigter Elemente und deren Entfernung aus dem Arbeitsspeicher. Im Bereich Details zur Zeitskala wird der vollständige Name verwendet.
Stile enthält Ereignisse im Zusammenhang mit CSS-Stilen und der Elementpositionierung sowie zugehörige Aktivitäten. Folgende Ereignisse werden in der Kategorie Stile erfasst:
  • Layout: Es wurden Änderungen am DOM vorgenommen, für die die Größe und/oder Position aller betroffenen Elemente berechnet werden musste.
  • Stilberechnung: Es wurden Änderungen am DOM vorgenommen oder neue CSS-Inhalte hinzugefügt, für die die Stileigenschaften aller betroffenen Elemente neu berechnet werden mussten.
Rendering enthält Ereignisse im Zusammenhang mit der Anzeige von Elementen auf dem Bildschirm. Folgende Ereignisse werden in der Kategorie Rendering erfasst:
  • Zeichnen: Es wurden visuelle Änderungen am DOM vorgenommen, für die alle betroffenen Teile der Seite neu gezeichnet werden mussten. Ereignisse vom Typ Layer rendern können als untergeordnete Ereignisse angezeigt werden und geben an, dass ein bestimmtes Fragment des DOMs neu gezeichnet wurde. Zu den Details zählen die Koordinaten (x,y) und Dimensionen der von einem Ereignis Layer rendern betroffenen Ebene.
Bilddekodierung ist die Aktivität, durch die komprimierte Bilddateiformate in die auf dem Bildschirm gezeichneten farbigen Pixelfolgen umgewandelt werden. Diese Aktivität wird im Bereich Details zur Zeitskala mit ihrem Namen angezeigt.
Andere: Sonstige browserbezogene Berechnungen. Berechnungen der Kategorie Andere werden nicht im Bereich Details zur Zeitskala angezeigt. In Windows 8.1 Update wird Andere aus den Kategorien entfernt.

Eine spezifischere Demo zur Verwendung des Tools „Reaktionsfähigkeit der Benutzeroberfläche“ finden Sie in unserer Demo und dem Codebeispiel: Verbessern der Animationsleistung mit dem Tool „Reaktionsfähigkeit der Benutzeroberfläche“.

Tipps für die Leistungsprofilerstellung

Mehrmals testen: Die Ergebnisse in einem Profilerstellungsbericht beruhen nicht nur auf Ihrem Code. Sie werden durch andere Prozesse im System beeinflusst, die Prozessorleistung und Arbeitsspeicher beanspruchen. Ein Moment, in dem die Benutzeroberfläche langsam reagiert, oder ein insgesamt schlechter Test kann darauf zurückzuführen sein, dass eine Virenprüfung im Hintergrund ausgeführt wird oder zu viele Registerkarten im Browser geöffnet sind. Wenn Sie auf einem neuen Computer unter Laborbedingungen testen, kann dieser Computer so schnell sein, dass der Code hervorragend läuft. Wie bei Fehlern ist es auch bei Geschwindigkeitsproblemen entscheidend, dass sie zuverlässig reproduziert werden können. Anschließend können Sie die Ursache diagnostizieren.

Höhere "gefühlte" Geschwindigkeit durch Konsistenz: Die im Tool Reaktionsfähigkeit der Benutzeroberfläche verfügbare visuelle Darstellung Ihrer Framerate im Zeitverlauf kann sehr hilfreich sein. Durch ungleichmäßige Frameraten oder übersprungene Frames kann der Eindruck entstehen, dass Ihre Website langsam ist. Das Verlangsamen Ihrer Animation kann die gefühlte Geschwindigkeit verbessern, wenn sich dadurch das Überspringen von Frames reduzieren lässt und die Framerate gleich bleibt. "The secret to silky smooth JavaScript animations" enthält einige Tipps, wie Sie die Framerate reduzieren und gleichzeitig von den Vorteilen profitieren können, die die Verwendung von window.requestAnimationFrame() im Hinblick auf den Energiebedarf und das Überspringen von Frames bietet.

Wie viele CSS-Stile benötigen Sie wirklich? Viele Websites verwenden ein websiteweit geltendes Stylesheet, damit Seiten schneller geladen werden. Dadurch kann die Anzahl von Netzwerkanforderungen reduziert und die Zwischenspeicherung für nachfolgende Ladevorgänge genutzt werden. Jeder Stil in einem Stylesheet muss jedoch analysiert werden und erhöht die Komplexität der Berechnungen für Stile, und zwar unabhängig davon, ob der Stil verwendet wird oder nicht.

Bei den meisten Websites wird dies niemals zu einem Problem. Bei sehr großen Websites mit komplexen Stilen, vielen Seiten, zahlreichen UI-Animationen und riesigen websiteweiten Stylesheets erweisen sich Vorgänge für Stile aufgrund des Mehraufwands durch nicht verwendete -Stilen jedoch oft als Hauptursache von Leistungsdefiziten.

An diesem Punkt müssen Sie sich fragen, ob die Nachteile, die durch die nicht verwendeten Stile entstehen, größer sind als die Vorteile, die die Verwendung eines einzigen Stylesheets bieten. Probieren Sie verschiedene Lösungen aus, und erstellen Sie Profile. Die Antwort wird nicht lange auf sich warten lassen.

Verwandte Themen

Verbessern der Animationsleistung mit dem Tool "Reaktionsfähigkeit der Benutzeroberfläche"
Tool "Reaktionsfähigkeit der Benutzeroberfläche" in Visual Studio

 

 

Anzeigen:
© 2015 Microsoft