Die spezifische Verwendung von CSS-Attributen zur Optimierung der Frontend-Seitendarstellung wird sich ändern

Vorwort

Wenn Bildlaufereignisse wie Scrollen und Größenänderung ausgelöst werden, ist die Auslösehäufigkeit sehr hoch und die Intervalle sind sehr eng. Wenn das Ereignis viele Positionsberechnungen, DOM-Operationen, Neuzeichnen von Elementen und andere Arbeiten umfasst und diese Aufgaben nicht abgeschlossen werden können, bevor das nächste Bildlaufereignis ausgelöst wird, führt dies dazu, dass der Browser Frames verliert (Frame Drops sind beispielsweise flackernde Bilder und ungleichmäßige Bewegungen). Darüber hinaus scrollt der Benutzer häufig kontinuierlich mit der Maus, wodurch ständig Scroll-Ereignisse ausgelöst werden, die zu stärkeren Frame-Drops und einer erhöhten CPU-Auslastung des Browsers führen und so das Benutzererlebnis beeinträchtigen.

Die CSS-Eigenschaft will-change bietet Webentwicklern eine Möglichkeit, den Browser über bevorstehende Änderungen am Element zu informieren, sodass der Browser bereits im Vorfeld entsprechende Optimierungsvorbereitungen treffen kann, bevor sich die Elementeigenschaften tatsächlich ändern. Durch diese Optimierung können einige komplexe Berechnungsarbeiten im Voraus vorbereitet werden, wodurch die Seite reaktionsschneller und sensibler wird.

Vorbereitendes Wissen

CPU

CPU steht für Central Processing Unit (Zentrale Verarbeitungseinheit). Ihre Hauptfunktion besteht darin, Computeranweisungen zu interpretieren und Daten in Computersoftware zu verarbeiten. Sie wird auch als Hauptplatine bezeichnet.

Grafikkarte

GPU ist eine Grafikverarbeitungseinheit, die auf die Verarbeitung und Darstellung grafikbezogener Hardware spezialisiert ist. Die GPU ist speziell für die Durchführung komplexer mathematischer und geometrischer Berechnungen konzipiert. Sie entlastet die CPU von Grafikverarbeitungsaufgaben und ermöglicht ihr, mehr andere Systemaufgaben auszuführen.

Hardwarebeschleunigung

Hardwarebeschleunigung bedeutet, dass der Grafikprozessor (GPU) den Browser bei der schnellen Darstellung der Seite unterstützt, indem er die Zentraleinheit (CPU) bei einigen anspruchsvollen Aufgaben ersetzt. Wenn CSS-Operationen Hardwarebeschleunigung verwenden, beschleunigt dies normalerweise die Seitendarstellung.

Der Vorgang des Seiten-Renderings im Browser:

1. HTML-Parser

2. Erstellen des DOM-Baums

3. Renderbaum-Konstruktion

4. Den Renderbaum malen

Die einfache Erklärung lautet: Der Browser erhält das vom Server über die Anforderung zurückgegebene HTML. Da HTML eine Baumstruktur ist, analysiert der Browser es, um einen DOM-Baum zu generieren. Nachdem das CSS analysiert wurde, werden der simulierte Baum CSSOM Tree und der DOM Tree kombiniert, um den Render Tree zu erstellen, der schließlich zum Malen verwendet wird.

CSS-Animationen, -Transformationen und -Verläufe lösen nicht automatisch eine GPU-Beschleunigung aus, sondern verwenden stattdessen die etwas langsamere Software-Rendering-Engine des Browsers. In der Welt der Übergänge, Transformationen und Animationen ist es sinnvoll, den Prozess auf die GPU auszulagern, um die Dinge zu beschleunigen. Nur 3D-Transformationen verfügen über eine eigene Ebene, 2D-Transformationen hingegen nicht.

wird sich ändern

1. Was ist Willensänderung?

Die Funktion von will-change besteht darin, den Browser im Voraus zu benachrichtigen, welche Animation das Element ausführen wird, damit der Browser im Voraus entsprechende Optimierungseinstellungen vorbereiten kann

In der offiziellen Dokumentation heißt es: Dies ist eine Funktion, die sich noch im experimentellen Stadium befindet. Daher können sich die Funktionalität und das Verhalten dieser Syntax in zukünftigen Browserversionen ändern.

CSS3 will-change ist ein Webstandardattribut und wird von Chrome/FireFox/Opera hinsichtlich der Kompatibilität unterstützt.

Hinweis: will-change teilt dem Browser mit „Ich werde es auslösen“, bevor das eigentliche Verhalten ausgelöst wird. Dies bedeutet, dass wir nicht gezwungen sind, bei einer 3D-Transformation auf die GPU umzuschalten, sondern nun eine dedizierte Eigenschaft verwenden können, um den Browser anzuweisen, auf bevorstehende Änderungen zu achten und so den Speicher zu optimieren und zuzuweisen. Vereinbaren Sie vorab einen Termin und lassen Sie sich Zeit.

2. Grammatik

wird sich ändern: automatisch
wird sich ändern: Scrollposition
wird sich ändern: Inhalt
will-change: transform // Beispiel für <custom-ident> 
will-change: Opazität // Beispiel für <custom-ident>
will-change: left, top // Beispiel für zwei <animateable-feature>

wird sich ändern: nicht gesetzt
wird sich ändern: initial
wird sich ändern: erben

Auto

Das bedeutet, dass es keine konkrete Angabe gibt, welche Eigenschaften sich ändern, und der Browser muss raten und dann einige gängige Methoden verwenden, die von Browsern üblicherweise zur Optimierung verwendet werden.

Die möglichen Werte sind:

Scrollposition

Zeigt an, dass der Entwickler hofft, die Position der Bildlaufleiste in naher Zukunft zu ändern oder zu animieren

Inhalt

Zeigt an, dass der Entwickler in naher Zukunft etwas am Inhalt des Elements ändern oder es animieren möchte.

Gibt an, dass der Entwickler hofft, den angegebenen Eigenschaftsnamen in naher Zukunft zu ändern oder zu animieren. Wenn der Attributname eine Abkürzung ist, repräsentiert er alle entsprechenden Abkürzungen oder vollständigen Attribute.

Verwendung von Willensänderung

Hover verwenden

Schreiben Sie nicht direkt in den Standardzustand, da will-change immer mountet

.wird-ändern {
  wird sich ändern: umwandeln;
  Übergang: Transformation 0,3 s;
}
.wird-ändern:hover {
  transformieren: Skalierung (1,5);
}

Sie können eine Änderung deklarieren, wenn über dem übergeordneten Element schwebt, sodass es automatisch entfernt wird, wenn es herausbewegt wird. Der ausgelöste Bereich ist grundsätzlich der gültige Elementbereich.

.wird-ändern-übergeordnet:hover .wird-ändern {
  wird sich ändern: umwandeln;
}
.wird-ändern {
  Übergang: Transformation 0,3 s;
}
.wird-ändern:hover {
  transformieren: Skalierung (1,5);
}

JS-Nutzung

var el = document.getElementById('element');

// Wenn die Maus über das Element bewegt wird, setze das Attribut „will-change“ auf das Element el.addEventListener('mouseenter', hintBrowser);
// Lösche die Will-Change-Eigenschaft, wenn die CSS-Animation endet. el.addEventListener('animationEnd', removeHint);

Funktion HinweisBrowser() {
  // Geben Sie die CSS-Eigenschaftsnamen ein, von denen Sie wissen, dass sie sich in der CSS-Animation ändern. this.style.willChange = 'transform, opacity';
}

Funktion removeHint() {
  dieser.Stil.wirdÄndern = "auto";
}

Wenn eine Anwendung, wie etwa ein Album oder eine Diashow, beim Drücken der Tastatur Seiten umblättert und die Seiten groß und komplex sind, empfiehlt es sich, „will-change“ in das Stylesheet zu schreiben. Dadurch kann der Browser den Übergang im Voraus vorbereiten, sodass Sie die flüssige und knackige Animation sofort sehen können, wenn Sie die Tastatur drücken.

.gleiten {
  wird sich ändern: umwandeln;
}

Hinweise zur Verwendung von will-change

Wenden Sie „will-change“ nicht auf zu viele Elemente an:

Browser versuchen bereits ihr Bestes, um alles zu optimieren, was sie können. Einige der leistungsstärkeren Optimierungen können in Kombination mit will-change viele Rechnerressourcen verbrauchen. Bei übermäßiger Verwendung kann dies dazu führen, dass die Seite langsam reagiert oder viele Ressourcen verbraucht.

Sparsam verwenden:

Normalerweise verwirft der Browser alle zuvor durchgeführten Optimierungsarbeiten, wenn ein Element in seinen ursprünglichen Zustand zurückversetzt wird. Wenn Sie jedoch die Will-Change-Eigenschaft direkt im Stylesheet explizit deklarieren und damit angeben, dass sich das Zielelement häufig ändern kann, spart der Browser die Optimierungsarbeit länger als zuvor. Daher besteht die bewährte Vorgehensweise darin, den Wert von will-change vor und nach der Elementänderung per Skript umzuschalten.

Wenden Sie die Will-Change-Optimierung nicht zu früh an:

Wenn Ihre Seite keine Leistungsprobleme aufweist, fügen Sie nicht das „will-change“-Attribut hinzu, um etwas mehr Geschwindigkeit herauszuholen. will-change wurde als Optimierung der letzten Möglichkeit konzipiert, um bestehende Leistungsprobleme zu beheben. Es sollte nicht verwendet werden, um Leistungsprobleme zu vermeiden. Übermäßiger Gebrauch von „Will-Change“ Dies kann zu einem großen Speicherbedarf und einem komplexeren Renderprozess führen, da der Browser versucht, sich auf mögliche Änderungen vorzubereiten. Dies kann zu schwerwiegenderen Leistungsproblemen führen.

Geben Sie ihm genügend Zeit, um zu wirken:

Dieses Attribut wird von Seitenentwicklern verwendet, um Browser darüber zu informieren, welche Eigenschaften sich ändern können. Der Browser kann dann vor der Änderung einige Optimierungsarbeiten durchführen. Daher ist es sehr wichtig, dem Browser etwas Zeit zu geben, diese Optimierungen tatsächlich durchzuführen. Bei der Verwendung müssen Sie versuchen, eine Möglichkeit zu finden, die möglichen Änderungen des Elements eine bestimmte Zeit im Voraus zu kennen und ihm dann das Attribut „will-change“ hinzuzufügen.

Dies ist das Ende dieses Artikels über die spezifische Verwendung des CSS-Attributs „will-change“ zur Optimierung der Frontend-Seitendarstellung. Weitere verwandte CSS-Inhalte zu „will-change“ finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird.