Da Nutzer feststellen, dass Websites und Apps nicht richtig funktionieren, ist es entscheidend, die Rendering-Leistung zu optimieren.
Die Nutzer des heutigen Internets erwarten, dass die von ihnen besuchten Seiten interaktiv und und dann müssen Sie Ihre Zeit und Ihren Aufwand zunehmend konzentrieren. Seiten sollten nicht nur schnell geladen werden, sondern auch schnell auf Nutzereingaben reagieren. über ihren gesamten Lebenszyklus hinweg nutzen. Dieser Aspekt der User Experience ist genau das, was der Messwert Interaction to Next Paint (INP) misst. Eine gute INP bedeutet, dass eine Seite konsistent und verlässlich auf die Anforderungen.
Während eine Seite hauptsächlich so knackig wirkt, ist das Maß an Informationen als Reaktion auf Nutzerinteraktionen, was Nutzende zu erwartende Änderungen am Erscheinungsbild der Benutzeroberfläche. Visuelle Änderungen für Nutzende das Ergebnis verschiedener Arten von Arbeit, die häufig zusammenfassend Rendering. Dies muss so schnell wie möglich erledigt werden, dass die User Experience schnell und zuverlässig ist.
Um Seiten zu erstellen, die schnell auf Nutzerinteraktionen reagieren, müssen Sie verstehen, wie HTML, JavaScript und CSS vom Browser verarbeitet werden, und stellen Sie sicher, von Ihnen geschriebenen Code sowie von Ihnen verwendetem Drittanbietercode effizient wie möglich.
Hinweis zu den Aktualisierungsraten von Geräten
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">Bei den meisten Geräten wird der Bildschirm aktuell 60-mal pro Sekunde aktualisiert. Jede Aktualisierung erzeugt das visuelle Ergebnis, das Sie sehen, und wird allgemein als Frame bezeichnet. Im Im folgenden Video wird das Konzept der Frames veranschaulicht:
<ph type="x-smartling-placeholder">Der Bildschirm eines Geräts wird immer in konstanter Geschwindigkeit aktualisiert. Apps, die auf einem Gerät ausgeführt werden, können nicht unbedingt immer genügend Frames mit dieser Aktualisierungsrate übereinstimmen. Wenn es z. B. eine Animation oder einen Übergang gibt, ausgeführt wird, muss der Browser an die Aktualisierungsrate des Geräts anpassen, wenn der Bildschirm aktualisiert wird.
Da ein typischer Bildschirm 60 Mal pro Sekunde aktualisiert wird, würde zeigen, dass der Browser 16,66 Millisekunden hat, um jeden Frame zu erzeugen. In Wirklichkeit hat der Browser jedoch seinen eigenen Overhead für jeden Frame, sodass alle Ihre Arbeit muss innerhalb von 10 Millisekunden abgeschlossen sein. Wenn Sie es nicht schaffen, dieses Budget einzuhalten, die Framerate sinkt und die Seiteninhalte auf dem Bildschirm ruckeln. Dieses Dieses Phänomen wird oft als Ruck bezeichnet.
Ihre Ziele ändern sich jedoch je nach Art der Arbeit, die Sie erledigen möchten. Die Einhaltung des Grenzwerts von 10 Millisekunden ist für Animationen entscheidend, Objekte auf dem Bildschirm werden über eine Reihe von Frames zwischen zwei Punkte. Wenn es um diskrete Änderungen in der Benutzeroberfläche geht, ohne Bewegung zwischen den Bundesstaaten wechseln zu können. empfehlen Ihnen, solche Änderungen innerhalb eines Zeitrahmens vorzunehmen, der sich innerhalb Nutzenden. In solchen Fällen ist 100 Millisekunden eine oft zitierte Zahl, aber den INP-Messwert als „gut“ Grenzwert von 200 Millisekunden oder niedriger ist, ein breiteres Spektrum an Geräten mit unterschiedlichen Funktionen unterstützen.
Was auch immer du vorhast – sei es die Produktion der vielen Frames, die Animationen um Verzögerungen zu vermeiden oder lediglich eine diskrete visuelle Veränderung so schnell wie möglich an die Benutzeroberfläche, da wir verstehen, wie das Pixel Pipeline-Funktionsweise.
Die Pixelpipeline
Es gibt fünf Hauptbereiche, die Sie in Ihrem als Webentwickler tätig sind. Diese fünf Bereiche sind die Bereiche, und jede ist ein wichtiger Punkt in der Pixel-to-Screen-Pipeline:
<ph type="x-smartling-placeholder">
<ph type="x-smartling-placeholder">- JavaScript:JavaScript wird in der Regel für die Bearbeitung von Aufgaben verwendet, die
Änderungen an der Benutzeroberfläche vorgenommen. Dies könnte zum Beispiel die Abfrage
animate, um ein Dataset zu sortieren oder der Seite DOM-Elemente hinzuzufügen. JavaScript ist jedoch nicht unbedingt notwendig, um visuelle Änderungen auszulösen: CSS Animationen, CSS-Übergänge und die Web Animations API Animieren von Seiteninhalten. - Stilberechnungen:Hiermit wird ermittelt, welche CSS-Regeln
auf welche HTML-Elemente basierend auf übereinstimmenden Selektoren angewendet werden. Beispiel:
.headlineist ein Beispiel für einen CSS-Selektor, der auf jedes HTML-Element angewendet wird mit einemclass-Attributwert, der die Klasseheadlineenthält. Von Sobald die Regeln bekannt sind, werden sie angewendet und die endgültigen Stile berechnet. - Layout:Sobald der Browser weiß, welche Regeln für ein Element gelten, kann er
beginnen, die Geometrie der Seite zu berechnen, z. B. wie viel Platzelemente
und wo sie auf dem Bildschirm erscheinen. Das Layout-Modell des Webs bedeutet,
dass ein Element sich auf andere auswirken kann. Zum Beispiel die Breite von
<body>. - -Elements wirkt sich normalerweise bis ganz nach oben auf die Abmessungen seiner untergeordneten Elemente aus. und in der Baumstruktur nach unten, sodass der Vorgang für den Browser sehr aufwendig sein kann. - Farbe:Malen ist das Ausfüllen von Pixeln. Dabei wird gezeichnet, Text, Farben, Bilder, Rahmen, Schatten und praktisch jedes visuelle Element der Elemente, nachdem ihr Layout auf der Seite berechnet wurde. Die Zeichnung wird in der Regel auf mehreren Oberflächen ausgeführt, die häufig als Ebenen bezeichnet werden.
- Zusammengesetzt:Da die Teile der Seite potenziell auf einem Layers müssen sie in der richtigen Reihenfolge auf dem Bildschirm angewendet werden, dass die Seite wie erwartet gerendert wird. Dies ist besonders wichtig für Elemente, die sich überschneiden, da ein Fehler dazu führen könnte, dass ein Element falsch übereinander liegen.
Jeder dieser Teile der Pixelpipeline stellt eine Möglichkeit dar, Verzögerungen bei Animationen oder die Verzögerung des Paintings der Frames selbst für diskrete visuelle Änderungen an der Benutzeroberfläche. Daher ist es wichtig, dass Sie genau wissen, welche Teile der Pipeline Ihr Code auslöst, und untersuchen Sie, Ihre Änderungen auf die Teile der Pixelpipeline beschränken, die für und rendern sie.
Vielleicht haben Sie schon einmal den Begriff „Rasterung“ in Verbindung mit „paint“ verwendet werden. Dieses ist, dass das Painting zwei Aufgaben ist:
- Eine Liste von Zeichenaufrufen erstellen
- Pixel ausfüllen.
Letzteres wird als „Rasterung“ bezeichnet. Entwicklertools, sollten Sie sich dies als Rasterung vorstellen. In einigen Architekturen erstellt wird, erfolgt die Erstellung der Liste der Draw-Aufrufe und die Rasterung Threads befinden sich nicht unter Ihrer Kontrolle.
Sie müssen nicht unbedingt jeden Teil der Pipeline in jedem Frame berühren. Tatsächlich gibt es drei Möglichkeiten, wie die Pipeline normal für eine bestimmte wenn Sie eine visuelle Änderung mit JavaScript, CSS oder der Webversion Animations API
1. JS / CSS > Stil > Layout > Farbe > Zusammengesetzt
Wenn Sie ein Layout ändern, z. B. eine, die die
Geometrie wie Breite, Höhe oder ihre Position (z. B. die CSS-Eigenschaft left oder top)
muss der Browser alle anderen Elemente überprüfen und die
Seite. Alle betroffenen Bereiche müssen neu gestrichen werden.
müssen wieder zusammengesetzt werden.
2. JS / CSS > Stil > Farbe > Zusammengesetzt
Wenn Sie eine reine Farbe geändert haben, für ein Element in CSS, z. B.
Attribute wie background-image, color oder box-shadow – der Layoutschritt
ist für eine visuelle Aktualisierung der Seite nicht erforderlich. Durch das Weglassen des Layouts
vermeiden Sie möglicherweise kostspielige Layoutarbeiten, die
oder zu einer erheblichen Latenz
bei der Erstellung des nächsten Frames geführt hat.
3. JS / CSS > Stil > Zusammengesetzt
Wenn Sie eine Eigenschaft ändern, für die weder Layout noch Farbe erforderlich ist, direkt zum Compositing-Schritt springen. Das ist die günstigste und durch die Pixel-Pipeline für Hochdruckpunkte in einer des Lebenszyklus einer Seite, wie z. B. Animationen oder Scrollen. Fun Fact: Chromium optimiert gescrollt werden kann, sodass es nur im Compositor-Thread stattfindet, Das heißt, dass Sie auch dann, wenn eine Seite nicht reagiert, auf der Seite scrollen und Teile davon sehen, die zuvor auf dem Bildschirm gezeichnet wurden.
<ph type="x-smartling-placeholder">Bei der Leistung im Web geht es darum, Arbeit zu vermeiden und gleichzeitig die Effizienz zu steigern. notwendiger Arbeit so viel wie möglich. In vielen Fällen geht es darum, nicht gegen ihn. Denken Sie daran, dass die Arbeit die zuvor in der Pipeline ermittelt wurden, sich in Bezug auf die Berechnungskosten unterscheidet. einige sind Aufgaben grundsätzlich teurer als andere.
Sehen wir uns die verschiedenen Teile der Pipeline einmal genauer an. Sehen wir uns an, häufige Probleme sowie deren Diagnose und Behebung.
Optimierung des Browser-Renderings
Leistung ist wichtig für die Nutzer. Um eine gute Nutzererfahrung zu schaffen, müssen Webentwickler Websites erstellen müssen, die schnell auf Nutzerinteraktionen reagieren und reibungslos zu gestalten. Performance-Experte Paul Lewis hilft Ihnen, Web-Apps mit einer Leistung von 60 Bildern pro Sekunde entwickeln. Du verlässt mit den Tools, die Sie benötigen, um ein Profil für Apps zu erstellen und die Ursachen für eine suboptimale Rendering-Leistung. Außerdem lernen Sie das Rendering und Muster erkennen, die die Erstellung schneller Websites erleichtern, die Nutzenden gefallen.
Dieser kostenlose Kurs wird über Udacity angeboten und kann jederzeit stattfinden.