#perfmatters: Werkzeugtechniken für den Leistungs-Ninja
Damit Sie zum Leistungsexperte werden, ist es wichtig, sich mit den Entwicklungstools vertraut zu machen. Colt beschäftigte sich mit den drei Säulen der Leistung: Netzwerk, Computing und Rendering, und gab einen Überblick über das Hauptproblem in jedem Bereich und die verfügbaren Tools, um sie zu finden und zu beseitigen.
- Sie können jetzt mit den vertrauten Entwicklertools vom Computer ein Profil für Chrome auf Android erstellen.
- Die Iterationsschleife für Leistungsarbeiten lautet: Daten erfassen, Erkenntnisse gewinnen, Maßnahmen ergreifen.
- Priorisieren Sie Assets, die sich im kritischen Rendering-Pfad für Ihre Seiten befinden.
- Malen nicht, das ist super teuer.
- Vermeiden Sie Arbeitsspeicherabwanderung und das Ausführen von Code in kritischen Zeiten in Ihrer App.
#perfmatters: Netzwerkleistung optimieren
Netzwerk und Latenz machen in der Regel 70% der gesamten Seitenladezeit einer Website aus. Das ist zwar ein großer Prozentsatz, bedeutet aber auch, dass jede Optimierung, die Sie vornehmen, enorme Vorteile für Ihre Nutzenden haben wird. In diesem Vortrag sprach Ilya über die neuesten Chrome-Änderungen, die die Ladezeit verkürzen, sowie über einige Änderungen, die Sie in Ihrer Umgebung vornehmen können, um die Netzwerklast auf ein absolutes Minimum zu beschränken.
- Chrome M27 hat einen neuen und verbesserten Ressourcenplaner.
- Chrome M28 hat SPDY-Websites sogar noch schneller gemacht.
- Der einfache Cache von Chrome wurde überarbeitet.
- SPDY / HTTP/2.0 bieten erhebliche Verbesserungen der Übertragungsgeschwindigkeit. Es gibt ausgereifte SPDY-Module für nginx, Apache und Jetty (nur drei).
- QUIC ist ein neues und experimentelles Protokoll, das auf UDP basiert. Es befindet sich noch in der Anfangsphase, aber wie immer es sich herausstellt, werden die Nutzer gewinnen.
#perfmatters: Layout und Rendering mit 60 fps
Wenn du bei deinen Projekten 60 fps erreichst, hängt das direkt mit der Nutzerbindung zusammen und ist entscheidend für den Erfolg. In diesem Gespräch sprachen Nat und Tom über die Rendering-Pipeline von Chrome, einige häufige Ursachen für ausgelassene Frames und wie sich diese vermeiden lassen.
- Ein Frame ist 16 ms lang. Sie umfasst JavaScript, Stilberechnungen, Painting und Compositing.
- Streichen ist extremely teuer. Bei einem Farbsturm werden teure Malerarbeiten unnötigerweise wiederholt.
- Ebenen werden verwendet, um gerenderte Elemente im Cache zu speichern.
- Eingabe-Handler (Touch- und Mausrad-Listener) können die Reaktionsfähigkeit beeinträchtigen; sie sollten nach Möglichkeit vermieden werden. Wo du sie nicht auf ein Minimum beschränken kannst
#perfmatters: Sofortige mobile Web-Apps
Der kritische Rendering-Pfad bezieht sich auf alles (JavaScript, HTML, CSS, Bilder), das der Browser benötigt, bevor er mit dem Darstellen der Seite beginnen kann. Die Priorisierung der Lieferung von Assets im kritischen Rendering-Pfad ist ein Muss, insbesondere für Nutzer mit netzwerkbeschränkten Geräten wie Smartphones in Mobilfunknetzen. Bryan sprach darüber, wie das Google-Team den Prozess der Identifizierung und Priorisierung der Assets für die PageSpeed Insights-Website von 20 Sekunden auf etwas mehr als eine Sekunde ließ.
- Entfernen Sie JavaScript- und CSS-Elemente, die das Rendering blockieren.
- Sichtbare Inhalte priorisieren
- Laden Sie Skripts asynchron.
- Rendere die ursprüngliche Ansicht serverseitig als HTML und ergänze sie mit JavaScript.
- Minimieren Sie den CSS-Code, der das Rendering blockiert. Stellen Sie nur die Stile bereit, die für die Darstellung des ersten Darstellungsbereichs erforderlich sind, und stellen Sie den Rest bereit.
- Große Daten-URIs, die in CSS enthalten sind, die das Rendering blockieren, wirken sich negativ auf die Rendering-Leistung aus. Sie blockieren Ressourcen, bei denen Bild-URLs nicht blockiert werden.