DevTools-Benachrichtigung, September 2016 – Übersicht zur Leistung

Hallo! Hier ist wieder Kayce, Tech Writer für Entwicklertools. Für diesen DevTools-Digest dachte ich, ich würde es etwas anders machen und einige Verbesserungen an den Performance-Tools in den Entwicklertools der letzten Chrome-Versionen vorstellen.

Sofern nicht anders angegeben, befinden sich alle Funktionen bereits in der stabilen Chrome-Version.

CPU-Drosselung für eine mobile Welt

Verfügbar in Chrome 54, das derzeit Canary ist.

Software und Mobilgeräte verzehren die Welt. Die Entwicklertools werden stetig weiterentwickelt, um den Anforderungen der mobilen Entwicklung gerecht zu werden. Die neueste Entwicklung in den Mobile-First-Tools der Entwicklertools ist CPU-Drosselung. Mit dieser Funktion können Sie sich ein besseres Bild von der Leistung Ihrer Website auf Geräten mit beschränkten Ressourcen machen.

Wählen Sie im Bereich „Zeitachse“ aus dem Drop-down-Menü CPU-Drosselung eine der Optionen aus, um die Rechenleistung Ihres Entwicklungscomputers zu beeinträchtigen.

ALT_TEXT_HERE

Einige Hinweise zur CPU-Drosselung:

  • Die Drosselung wird sofort wirksam und wird fortgesetzt, bis Sie sie deaktivieren, genau wie bei der Netzwerkdrosselung.
  • Mit dieser Funktion können Sie sich ein allgemeines Bild davon machen, wie Ihre Website auf einem Gerät mit beschränkten Ressourcen wahrscheinlich abschneiden würde. Es ist für die Entwicklertools unmöglich, die Leistungsmerkmale eines mobilen System-on-a-Chips wirklich zu emulieren.
  • Die Drosselung hängt von Ihrer Entwicklungsmaschine ab. Mit anderen Worten: Eine 5-fache Drosselung auf einem Top-of-the-Line-Desktop führt zu anderen Ergebnissen als die 5-fache Drosselung auf einem fünf Jahre alten, preisgünstigen Laptop.

Wenn Sie also CPU-Drosselung mit Netzwerkdrosselung und Gerätemodus kombinieren, erhalten Sie direkt über den Browser Ihres Entwicklungscomputers ein besseres Bild davon, wie Ihre Website auf Mobilgeräten aussehen und funktionieren wird.

Netzwerkansicht in Zeitachsenaufzeichnungen

Klicken Sie das Kästchen Netzwerk an, wenn Sie das nächste Mal eine Zeitachse aufnehmen, um zu analysieren, wie die Ressourcen Ihrer Seite heruntergeladen wurden. Klicken Sie auf eine Ressource, um weitere Informationen dazu im Bereich „Zusammenfassung“ aufzurufen.

Netzwerkansicht auf der Zeitachse

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

Passive Event-Listener

Passive Event-Listener sind ein neuer Standard zur Verbesserung der Scrollleistung. In diesem Artikel erfahren Sie mehr:

Scrollleistung mit passiven Event-Listenern verbessern

DevTools hat eine Reihe von Funktionen veröffentlicht, mit denen du Hörer finden kannst, die von einer kleinen {passive: true} Leidenschaft profitieren könnten.

Zunächst gibt die Console eine Warnung aus, wenn ein synchroner Listener das Scrollen auf einer Seite unnötig lange blockiert.

Warnung zu synchronem Listener

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

Scrollverzögerung aufgrund einer Demo für Touch-/Wheel-Handler

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

Filter für passive Listener

Außerdem können Sie den passiven oder blockierenden Status eines Listeners aktivieren und deaktivieren, indem Sie den Mauszeiger darauf bewegen und Passiv aktivieren/deaktivieren auswählen. Diese Funktion ist derzeit auf die Event-Listener touchstart, touchmove, mousewheel und wheel beschränkt.

Passiv ein-/ausschalten

Zum Abschluss möchte ich noch einen Tipp geben: Aktivieren Sie auf der Rendering-Leiste das Kästchen Scrollleistungsprobleme, um mögliche Scrollprobleme visuell darzustellen. Wenn ein Bereich einer Seite hervorgehoben ist, bedeutet dies, dass an diesen Bereich ein Listener gebunden ist, der sich negativ auf die Scrollleistung auswirken könnte.

Demo zu Problemen mit der Scrollleistung

Nach Aktivität gruppieren

Mitte Juni wurde im Bereich Aufrufstruktur im Steuerfeld „Zeitachse“ eine neue Sortierkategorie eingeführt: „Nach Aktivität gruppieren“. Mithilfe dieser Gruppierung können Sie anzeigen, wie viel Zeit Ihre Seite mit dem Parsen von HTML-Code, dem Bewerten von Skripts, dem Painting usw. verbracht hat.

Nach Aktivität gruppieren

Zeitachsenstatistiken im Quellenbereich

Erstellen Sie eine Zeitachse mit aktivierter Option JS-Profil. Im Bereich „Quellen“ sehen Sie eine Aufschlüsselung der Ausführungszeiten für jede Funktion.

Zeitachsenstatistiken im Bereich „Quellen“

Teilen Sie Ihre Perspektive

Wie immer freuen wir uns auf euer Feedback oder eure Ideen zu den Entwicklertools.

Bis zum nächsten Monat!