#perfmatters: Werkzeugtechniken für den Performance-Ninja
Um Leistungsexperte zu werden, ist es wichtig, sich mit den Entwicklertools vertraut zu machen. Colt stellte die drei Säulen der Leistung vor: Netzwerk, Computing und Rendering. Dabei gab er eine Einführung in das Kernproblem in jedem Bereich und die verfügbaren Tools, mit denen er sie finden und beseitigen kann.
- Du kannst jetzt mit den Entwicklertools, die du von deinem Computer kennst, ein Profil für Chrome auf Android erstellen.
- Die Iterationsschleife für Leistungsarbeiten besteht aus: Daten sammeln, Erkenntnisse gewinnen, Maßnahmen ergreifen.
- Priorisieren Sie Assets, die sich im kritischen Rendering-Pfad für Ihre Seiten befinden.
- Streichen Sie nicht an. Das ist sehr teuer.
- Vermeiden Sie Speicherabwanderung und führen Sie zu kritischen Zeiten in Ihrer App Code aus.
#perfmatters: Netzwerkleistung optimieren
Netzwerk und Latenz machen normalerweise 70% der gesamten Seitenladezeit einer Website aus. Das ist zwar ein großer Prozentsatz, aber es bedeutet auch, dass jede von Ihnen vorgenommenen Verbesserungen enorme Vorteile für Ihre Nutzenden haben. In diesem Vortrag stellte Ilya die jüngsten Änderungen in Chrome vor, die die Ladezeit verbessern, sowie einige Änderungen, die Sie an Ihrer Umgebung vornehmen können, um die Netzwerkauslastung auf ein Minimum zu beschränken.
- Chrome M27 hat einen neuen und verbesserten Ressourcenplaner.
- Mit Chrome M28 sind SPDY-Websites (noch) schneller geworden.
- Der einfache Cache von Chrome wurde überarbeitet.
- SPDY / HTTP/2.0 bieten erhebliche Verbesserungen bei der Übertragungsgeschwindigkeit. Für nginx, Apache und Jetty (um nur drei zu nennen) stehen ausgereifte SPDY-Module zur Verfügung.
- QUIC ist ein neues, experimentelles Protokoll, das auf UDP basiert. noch am Anfang, aber wie es sich herausstellt, dass die Nutzer gewinnen werden.
#perfmatters: Layout und Rendering mit 60 fps
Die Erreichung von 60 fps in Ihren Projekten steht in direktem Zusammenhang mit der Nutzerinteraktion und ist entscheidend für ihren Erfolg. In diesem Gespräch sprachen Nat und Tom über die Rendering-Pipeline von Chrome, einige häufige Ursachen für abgebrochene Frames und darüber, wie man sie vermeidet.
- Ein Frame ist 16 ms lang. Es enthält JavaScript, Stilberechnungen, Painting und Compositing.
- Malen ist extrem teuer. Bei einem Paint Storm werden teure Malerarbeiten unnötigerweise wiederholt.
- Ebenen werden verwendet, um dargestellte Elemente im Cache zu speichern.
- Eingabe-Handler (Listener für den Touchscreen und das Mausrad) können die Reaktionsfähigkeit beeinträchtigen. vermeiden, wenn es möglich ist. Wo Sie sie nicht auf ein Minimum beschränken können.
#perfmatters: Sofortige mobile Web-Apps
Der kritische Rendering-Pfad bezieht sich auf alle Elemente (JavaScript, HTML, CSS, Bilder), die der Browser benötigt, bevor er mit dem Rendern der Seite beginnen kann. Das Priorisieren der Bereitstellung von Assets im kritischen Rendering-Pfad ist ein Muss, insbesondere für Nutzer auf 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 durchlaufen hat und die Ladezeit von einer Ladezeit von 20 Sekunden auf etwas mehr als eine Sekunde reduziert hat.
- Entfernen Sie JavaScript und CSS, die das Rendering blockieren.
- Sichtbare Inhalte werden priorisiert.
- Skripts asynchron laden
- Die ursprüngliche Ansicht wird serverseitig als HTML gerendert und mit JavaScript erweitert.
- Minimieren Sie CSS-Code, der das Rendering blockiert. und stellen nur die Stile bereit, die zum Anzeigen des ersten Darstellungsbereichs erforderlich sind.
- Große Daten-URIs, die in CSS-Code enthalten sind, der das Rendering blockiert, beeinträchtigen die Rendering-Leistung. sie blockieren Ressourcen, bei denen Bild-URLs nicht blockieren.