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.
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.
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.
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.
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.
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.
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.
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.
Deine Perspektive teilen
Wie immer freuen wir uns über Feedback oder Ideen zu den DevTools.
- Wenn Sie kurze Fragen haben, Feedback geben oder neue Ideen teilen möchten, schreiben Sie uns auf Twitter unter ChromeDevTools.
- Für längere Diskussionen eignen sich die Mailingliste oder Stack Overflow am besten.
- Wenn es um Docs geht, erstelle bitte ein Problem in unserem Docs-Repository.
Bis zum nächsten Monat!