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.
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.
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.
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.
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.
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.
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.
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.
Teilen Sie Ihre Perspektive
Wie immer freuen wir uns auf euer Feedback oder eure Ideen zu den Entwicklertools.
- Sie können uns über ChromeDevTools auf Twitter kontaktieren, um kurze Fragen oder Feedback zu erhalten oder neue Ideen zu teilen.
- Für längere Diskussionen eignen sich die Mailingliste oder Stack Overflow.
- Bei Dokumenten im Zusammenhang mit Dokumenten öffnen Sie ein Problem in unserem Docs-Repository.
Bis zum nächsten Monat!