DevTools-Benachrichtigung, September 2016 – Übersicht zur Leistung

Hallo! Hier ist wieder Kayce, die technische Redakteurin für die DevTools. In diesem DevTools-Digest möchte ich etwas Neues ausprobieren und einige Verbesserungen an den Leistungstools in den DevTools in den letzten Chrome-Releases zusammenfassen.

Sofern nicht anders angegeben, sind alle Funktionen bereits in der stabilen Chrome-Version verfügbar.

CPU-Drosselung für eine mobile-first-Welt

Verfügbar in Chrome 54, derzeit Canary

Software erobert die Welt und Mobilgeräte erobert die Software. DevTools wird kontinuierlich weiterentwickelt, um die Anforderungen einer Mobile-first-Entwicklung besser zu erfüllen. Die neueste Entwicklung in den mobile-first-Tools von DevTools ist die CPU-Drosselung. Mit dieser Funktion können Sie besser nachvollziehen, wie Ihre Website auf ressourcenbeschränkten Geräten abschneidet.

Wählen Sie im Zeitleistenbereich im Drop-down-Menü CPU-Throttling eine Option aus, um die Rechenleistung Ihres Entwicklungscomputers einzuschränken.

ALT_TEXT_HERE

Einige Hinweise zur CPU-Drosselung:

  • Die Drosselung tritt sofort in Kraft und bleibt so lange aktiv, bis Sie sie deaktivieren. Das gilt genauso für die Netzwerkdrosselung.
  • Diese Funktion gibt Ihnen einen allgemeinen Überblick darüber, wie Ihre Website wahrscheinlich auf einem Gerät mit begrenzten Ressourcen abschneiden würde. Es ist unmöglich, mit den DevTools die Leistungsmerkmale eines mobilen SoCs wirklich zu emulieren.
  • Die Drosselung ist relativ zu Ihrem Entwicklungscomputer. Mit anderen Worten: Eine 5-fache Drosselung auf einem High-End-Desktop führt zu anderen Ergebnissen als eine 5-fache Drosselung auf einem fünf Jahre alten preiswerten Laptop.

Wenn Sie die CPU-Drosselung mit der Netzwerkdrosselung und dem Gerätemodus kombinieren, erhalten Sie ein viel besseres Bild davon, wie Ihre Website auf Mobilgeräten aussehen und wie sie dort abschneiden wird – und das direkt im Browser Ihres Entwicklungscomputers.

Netzwerkansicht in Zeitachsenaufzeichnungen

Aktivieren Sie das Kästchen Netzwerk, wenn Sie das nächste Mal eine Zeitachsenaufzeichnung erstellen, um zu analysieren, wie die Ressourcen Ihrer Seite heruntergeladen wurden. Klicken Sie auf eine Ressource, um im Bereich „Zusammenfassung“ weitere Informationen zu erhalten.

Netzwerkansicht in der Zeitachse

Das Feld Initiator in der Zusammenfassung ist besonders nützlich. In diesem Feld sehen Sie, wo die Ressource angefordert wird.

Passive Ereignis-Listener

Passive Ereignis-Listener sind ein neuer Standard zur Verbesserung der Scrollleistung. Weitere Informationen findest du in diesem Artikel von mir:

Scrollleistung mit passiven Ereignis-Listenern verbessern

In den DevTools gibt es jetzt einige Funktionen, mit denen du Hörer finden kannst, die von ein bisschen {passive: true} profitieren könnten.

In der Console wird zuerst eine Warnung ausgegeben, wenn ein synchroner Listener das Scrollen der Seite über einen unangemessen langen Zeitraum blockiert.

Warnung zu synchronen Listenern

In der Demo unten können Sie das selbst ausprobieren:

Demo: Ruckeln beim Scrollen aufgrund von Touch-/Rad-Handlern

Anschließend können Sie im Bereich Event-Listener über das kleine Drop-down-Menü nach passiven oder blockierenden Listenern filtern.

Filter für passive Zuhörer

Außerdem können Sie den passiven oder blockierenden Status eines Listeners ändern, indem Sie den Mauszeiger darauf bewegen und auf Passiv aktivieren/deaktivieren klicken. Diese Funktion ist derzeit auf Ereignis-Listener für touchstart, touchmove, mousewheel und wheel beschränkt.

Passiv ein-/ausschalten

Abschließend möchte ich Ihnen noch einen kleinen Tipp geben. Aktivieren Sie in der Renderingleiste das Kästchen Probleme mit der Scrollleistung, um eine visuelle Darstellung potenzieller Scrollprobleme zu erhalten. Wenn ein Bereich einer Seite hervorgehoben ist, bedeutet das, dass an diesen Bereich ein Listener gebunden ist, der sich negativ auf die Scrollleistung auswirken kann.

Demo zu Problemen mit der Scrollleistung

Nach Aktivität gruppieren

Mitte Juni wurde im Bereich Anrufbaum auf der Zeitachse eine neue Sortierkategorie hinzugefügt: „Nach Aktivität gruppieren“. Mit dieser Gruppierung sehen Sie, wie viel Zeit für das Parsen von HTML, das Auswerten von Scripts, das Zeichnen usw. auf Ihrer Seite benötigt wurde.

Nach Aktivität gruppieren

Zeitachsenstatistiken im Bereich „Quellen“

Wenn Sie eine Zeitachse mit aktivierter Option JS-Profil erstellen, sehen Sie im Bereich „Quellen“ eine Aufschlüsselung der Ausführungszeiten nach Funktion.

Zeitachsenstatistiken im Bereich „Quellen“

Deine Perspektive teilen

Wie immer freuen wir uns über Feedback oder Ideen zu den DevTools.

Bis zum nächsten Monat!