Browser-Malerei und überlegungen für die web-performance

0
55

Der Prozess der web-browser drehen, HTML -, CSS-und JavaScript-Code in eine fertige visuelle Darstellung ist sehr Komplex und beinhaltet ein gutes Stück Magie. Hier ist eine vereinfachte Schritte der browser geht über:

  1. Browser erstellt die DOM-und CSSOM.
  2. Browser schafft den render Baum, wo der DOM und Stile aus dem CSSOM berücksichtigt werden (display: none-Elemente werden vermieden).
  3. Der Browser berechnet die geometrie des Layouts und Ihre Elemente basiert auf der render-Baum.
  4. Browser-Farben pixel für pixel zu erstellen, die visuelle Darstellung, die wir auf dem Bildschirm sehen.

In diesem Artikel möchte ich den Fokus auf das Letzte Teil: die Malerei.

Alle diese Schritte kombiniert, ist eine Menge Arbeit, die der browser auf zu laden… und tatsächlich, nicht nur beim laden, aber jedes mal, wenn der DOM (oder CSSOM) geändert wird. Das ist der Grund, warum viele web-Entwickler neigen dazu, teilweise wird dieses Problem durch die Verwendung von irgendeiner Art von frontend-framework, wie Reagieren die, abgesehen von vielen anderen Vorteilen, die helfen können, zu sehr optimieren Veränderungen in den DOM, um unnötige Neuberechnung oder rendering.

Sie haben vielleicht gehört, Begriffe wie Staat, Komponente Rendern, oder Unveränderlichkeit. All diese haben etwas zu tun mit Optimierung des DOM-änderungen, oder in anderen Worten, nur dann änderungen an den DOM, wenn es notwendig ist.

Um ein Beispiel zu geben, den Zustand einer web-Anwendung können sich ändern, und das würde dazu führen, dass eine änderung in der Benutzeroberfläche. Jedoch, bestimmte (oder zu viele) Komponenten sind von dieser änderung nicht betroffen. Was Reagieren hilft, das zu tun ist limit das schreiben an das DOM für die Elemente, die tatsächlich von einer änderung betroffen sind, in Staat und letztlich Begrenzung der Erweisung der kleinste Teil der web-Anwendung möglich:

DOM/CSSOM → render tree → layout → Malerei

Jedoch, browser-Malerei ist etwas besonderes in seiner eigenen Art und Weise, wie es passieren kann, auch ohne änderungen an der DOM-und/oder CSSOM.

Beispiel der Seite Leistungsübersicht

Das obige Diagramm wurde erstellt mit Hilfe von Chrome die performance panel in DevTools (dazu später mehr), und es zeigt, wie viel Zeit jeder Aufgabe im browser in der aufgezeichneten Zeit (0-7.12 s) nach dem erneuten laden einer Seite. Wie Sie sehen können, die Malerei nimmt ein erheblicher Teil, und das ist nicht automatisch eine schlechte Sache. In diesem besonderen Beispiel, das erhöht die Malerei ist durch eine Kombination von animierten GIFs auf der Seite und Leinwand-Zeichnung (bei 60fps), wobei beide nicht verursachen keine änderungen am DOM oder seinen Stil, während immer noch auslösen Malerei.

Ein weiteres gutes Beispiel für ein Merkmal, die dazu führen können malen, ohne Eingriff von außen ist der CSS-Eigenschaft animation, und im Vergleich zu animierten GIF oder Leinwand, es ist wahrscheinlich häufiger auf das web. Eine animation ist in der Regel ausgelöst durch Benutzereingaben, wie zu schweben, aber Dank der animation und @keyframes-Regeln, die wir selbst erstellen können sehr komplexe Animationen laufen ständig auf die Seite, ohne viel Aufwand, das ist ziemlich erstaunlich.

Was einige vielleicht nicht wissen, ist, dass diese Animationen können leicht aus der hand und ständig auslösen Malerei, und das kostet uns eine Menge Rechenleistung. Natürlich gibt es einige Regeln, die verwendet werden können, zu vermeiden Malerei. Am offensichtlichsten ist die Begrenzung der manipulation von Elementen auf CSS-transform und die Deckkraft Eigenschaften, die standardmäßig nicht auslösen malen, es sei denn, einige Besondere Umstände vorhanden sind, wie das animieren von SVG-Pfad.

Farbe blinken

Sie wahrscheinlich wissen, dass Chrome DevTools. Was Sie vielleicht nicht wissen, ist ein wenig shortcut (Shift+Cmd+P auf Mac) oder Strg+Umschalt+P auf dem PC) kann verwendet werden innen-DevTools, um ein wenig search bar und mit dem Befehl im Menü.

Befehl Menü

Ich habe angefangen zu Graben um ihn herum, und neben vielen anderen nützlichen und unglaublich interessante Möglichkeiten, eine render-panel erregte meine Aufmerksamkeit.

Render-Panel

Auf den ersten Blick, können Sie einige interessante Optionen, die sehr nützlich sein können, wenn es um debugging-animation auf dem web, wie eine FPS-meter.

FPS-meter

Schicht Grenzen und Farbe blinken sind auch interessante tools. Schicht Grenzen verwendet werden, um die Anzeige der Grenzen der Schichten, wie Sie vom browser angezeigt werden, so dass jede transformation oder ändern in der Größe, ist leicht erkennbar. Farbe blinkend hervorheben Bereiche der Webseite, wo der browser gezwungen ist, Sie zu streichen.

Farbe blinken

Nach der Entdeckung der Farbe blinkt, ist das erste, was ich Tat, war, check it out auf ein Projekt von mir. In den meisten Orten gab es keine Probleme. Zum Beispiel, jede Bewegung, ausgelöst durch scrollen auf der website angetrieben wurde durch die CSS-Eigenschaft transform, die wie wir fallen, nicht zu malen. Die Malerei war vorhanden, wo man es erwarten würde, z.B. änderungen im text, Farbe auf schweben, aber es ist nicht etwas, das sollte sein, viel von einer Besorgnis, die aufgrund Ihrer Fläche und Präsenz nur auf hover des Elements. Um es zusammenzufassen, Sie finden immer etwas zu verbessern, auch wenn Sie schrieb den code gestern…

Aber eine Sache war ein Schlag ins Gesicht.

Es spielt keine Rolle wie erfahren oder vorsichtig Sie sind, Sie können — und wahrscheinlich wird — einen Fehler machen. Wir sind nur Menschen, und einige würden argumentieren, dass die Festsetzung Ihre eigenen Fehler ist meist der job, wenn es um Entwicklung. Allerdings für einen Fehler reparierbar, müssen wir uns bewusst sein… und das ist genau das, wo der render-panel unterstützt.

Fallstudie

Werfen wir einen genaueren Blick auf das eigentliche Problem. Das design kam mit der Anfrage für eine laute hintergrund. Diese Art der Wirkung, dass alte Fernseher hatte, als es noch kein signal.

Es ist bekannt, dass die GIFs haben viele Fragen, wo die Leistung ist sicherlich einer von Ihnen, so dass ich definitiv nicht nutzen konnte, dass eine ganze Seite im hintergrund. Wenn Sie möchten, um zu Lesen, etwas mehr auf den Grund, warum zu vermeiden, GIFs, hier ist eine gute Ressource für eine Reihe von Gründen.

Mit JavaScript ist definitiv eine option in diesem Fall. Anzeigen oder verbergen von Elementen mit einer leicht bewegten hintergrund war das erste, was mir in den Sinn kam, und mit Leinwand könnte auch helfen. Doch all dies schien ein wenig übertrieben ist, die einfach nur mit einem hintergrund. Ich entschloss mich für eine CSS-only-Ansatz.

Meine Lösung war eine kleine “laut” PNG-Bild als hintergrund-Bild, hintergrund aktivieren-wiederholen und werfen es über einen einfarbigen hintergrund. Wie habe ich erzielen die noise-Effekt? Mit unendlicher CSS-animation! Durch setzen der background-position zu verschiedenen Wert über den Zeitraum von 200 Millisekunden. Hier ist, wie diese stellte sich heraus:

Finden Sie den Stift MXoddr von Georgy Marchuk (@gmrchk) auf CodePen.

Können Sie erraten, das problem? Es schien wie eine ziemlich elegante Lösung für mich, und ich war begeistert über meine Leistung machen es durch, ohne eine beschissene GIF und noch nicht eine einzige Zeile JavaScript. Nur einfache CSS-optimiert ist, dass in Browsern in diesen Tagen.

Gut, die Farbe blinken zeigten etwas ganz anderes. Die Ebene von der Größe der Fenster wurde ständig aktualisiert, ohne den Benutzer zu, selbst etwas zu tun. Sie können sehen, die Farbe, blinken in der demo oben, wenn Sie es ermöglichen können, im render-panel (beachten Sie, dass die Farbe blinkt nicht zeigen, bis in embedded-Stift).

Ohne Farbe blinken (Links) vs. mit Farbe blinken (rechts)

Das ist sicherlich nicht gut spielen mit der performance der website und die Kanalisation-laptop-Batterien, als gäbe es kein morgen.

CPU-Auslastung für die animation mit hintergrund-position (oben) und-Transformation (unten)

Alle diese CPU-Auslastung hätten vermieden werden können, durch Austausch der änderungen background-position verändern oder die Deckkraft.

Finden Sie den Stift XYOYGm von Georgy Marchuk (@gmrchk) auf CodePen.

Das problem

Habe ich gemacht, web-Entwicklung, für eine Weile, und ich wusste sehr gut, dass die Animation im hintergrund ist nie eine gute Idee. Dies fühlte sich an wie ein rookie Fehler. Menschen machen Fehler… aber das ist nicht die ganze Geschichte. Die website war alles laggy und unbequem zu navigieren. Wie konnte ich es verpassen?

Etwas, das sicherlich eine große Rolle spielt, ist die Tatsache, dass ich (und Sie vielleicht auch) ein wenig verwöhnt, wenn es um die Entwicklung der Ausrüstung. Ich habe einen guten, leistungsstarken computer für die Arbeit und den Zugang zu schnellen internet. Es sei denn, wir schreiben wirklich crappy code, alles, was wir schreiben läuft ziemlich reibungslos in unsere Augen. Aber das ist nicht immer der Fall für unsere Nutzer.

Ein ähnliches problem gilt für viele andere Dinge wie display-Größe. Mit ein wenig übertreibung, während wir die Entwicklung auf dem 27″ – display mit 4K-Auflösung, und die designs in Erster Linie für 1920×1080, unsere Besucher kommen hauptsächlich von 1.366 x 768 laptops und haben einen völlig anderen workflow, wenn es darum geht, mit einem computer.

Fazit

Während dieser Artikel begann als ein Stück über die Malerei, deren zentrales Thema ist wirklich viel mehr darum, eingedenk der Auswirkungen, die unsere code hat sich auf den Malprozess oder performance im Allgemeinen. Während die Malerei dient als ein gutes Beispiel für etwas, das problematisch sein kann, und leicht zu übersehen, es ist mehr eine Trennung zwischen Entwickler-und user-das ist das Problem.

Das web ist ein Ort der vielen Umgebungen, in denen die Entwickler für die Umwelt ist oft ganz anders als die Benutzer. Zwar gibt es keine Notwendigkeit, unsere Gewohnheiten zu ändern oder wechseln Sie zu faul Computern, es hilft definitiv, um zu sehen, unsere Arbeit so, wie es ist von anderen gesehen werden, von Zeit zu Zeit. Mein Vorschlag ist: wenn Sie nach Hause kommen von der Arbeit und haben ein wenig freie Zeit, versuchen zu Holen Ihre alten computer, und überprüfen Sie Ihre Arbeit dort, um ein wenig näher an, was Ihre Benutzer erleben.

Wenn Sie nicht über diese Art von computer herum, tools wie die render-panel kann sich furchtbar praktisch.