Die Eigenschaft zur Optimierung der CSS-Seitendarstellung wird sich ändern

Vorhergehende Wörter

 Wenn wir die Seite durch bestimmte Verhaltensweisen (Klicken, Bewegen oder Scrollen) dazu veranlassen, einen großen Bereich zu zeichnen, ist der Browser oft unvorbereitet und kann die CPU nur passiv zum Berechnen und Neuzeichnen nutzen Beim Zeichnen war es schwierig, mit dem Rendern umzugehen, da es im Voraus keine Vorbereitung gab, sodass der Rahmen herunterfiel und hängenblieb. Das CSS-Attribut will-change bietet Webentwicklern die Möglichkeit, dem Browser mitzuteilen, welche Änderungen am Element vorgenommen werden, sodass der Browser im Voraus entsprechende Optimierungsvorbereitungen treffen kann, bevor sich die Attribute des Elements tatsächlich ändern. Diese Art der Optimierung kann einen Teil der komplexen Berechnungsarbeit im Voraus vorbereiten und die Seitenreaktion schneller und empfindlicher machen. In diesem Artikel wird die CSS-Eigenschaft will-change vorgestellt

Vorbereitende Kenntnisse

  GPU ist ein Grafikprozessor, der auf die Verarbeitung und Zeichnung grafikbezogener Hardware spezialisiert ist. Die GPU ist speziell für die Durchführung komplexer mathematischer und geometrischer Berechnungen konzipiert, wodurch die CPU von Grafikverarbeitungsaufgaben befreit wird und in der Lage ist, andere Systemaufgaben auszuführen.

  Die sogenannte Hardwarebeschleunigung bedeutet, dass im Computer sehr viel Rechenleistung erforderlich ist Die Arbeit wird spezieller Hardware zugewiesen, um die Arbeitslast der CPU zu reduzieren

  CSS-Animationen, Transformationen und Verläufe lösen nicht automatisch eine GPU-Beschleunigung aus, sondern nutzen die etwas langsamere Software-Rendering-Engine des Browsers. In den Welten transition, transform und animation sollten Prozesse auf die GPU verlagert werden, um die Geschwindigkeit zu erhöhen. Nur die 3D-Verformung hat eine eigene Ebene, während die 2D-Verformung keine eigene Ebene hat.

【Hack】

Verwenden Sie die Methode translateZ() oder translate3d(), um dem zu täuschenden Element eine unveränderte 3D-Verformung hinzuzufügen Durchsuchen Der Prozessor löst eine Hardwarebeschleunigung aus. Der Preis besteht jedoch darin, dass diese Situation RAM- und GPU-Speicherplatz beansprucht, indem Elemente auf einer eigenen Ebene überlagert werden und die Zeit für die Speicherplatzfreigabe nicht bestimmt werden kann

Syntax

wird sich ändern

 Funktion: Benachrichtigen Sie den Browser im Voraus darüber, welche Animation das Element ausführen wird, sodass der Browser im Voraus entsprechende Optimierungseinstellungen vorbereiten kann

 Wert: auto |. <animateable-feature>

Anfangswert: auto

Anwendbar auf: alle Elemente

Vererbung: Keine

Kompatibilität: IE13+, chrome49+, safari9.1 +, IOS9.3+, Android52+

  auto bedeutet, dass es keine spezifische Spezifikation gibt, welche Attribute sich ändern werden. Der Browser muss selbst erraten und dann einige herkömmliche Methoden verwenden, die von Browsern häufig zur Optimierung verwendet werden >

 

kann wie folgt lauten: Wert: <animateable-feature>

  

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

   

Zeigt an, dass der Entwickler hofft, in naher Zukunft etwas am Elementinhalt zu ändern. contents

  

zeigt an, dass der Entwickler hofft, den angegebenen Eigenschaftsnamen in naher Zukunft zu ändern oder zu animieren. Wenn der Attributname eine Abkürzung ist, stellt er alle entsprechenden Abkürzungen oder Attribute voller Länge dar <custom-ident>

Verwenden Sie

【Hover verwenden】

Nicht Seien Sie so: Schreiben Sie Folgendes direkt im Standardzustand, da will-change immer hängen bleibt:

.will-change {
  will-change: transform;
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

Sie können will-change deklarieren, wenn das übergeordnete Element schwebt, sodass es automatisch entfernt wird, wenn es schwebt wird verschoben. Der ausgelöste Bereich ist im Grunde der gültige Elementbereich

.will-change-parent:hover .will-change {
  will-change: transform;
}
.will-change {
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

[Javascript-Skript verwenden]

.sidebar {
  will-change: transform;
}

 Das obige Beispiel fügt das Will-Change-Attribut direkt zum Stil hinzu Blatt, was dazu führt, dass der Browser die entsprechende Optimierungsarbeit im Speicher behält, ist eigentlich unnötig. Im Folgenden wird gezeigt, wie Sie ein Skript verwenden, um das

-Attribut will-change

var el = document.getElementById('element');
// 当鼠标移动到该元素上时给该元素设置 will-change 属性
el.addEventListener('mouseenter', hintBrowser);
// 当 CSS 动画结束后清除 will-change 属性
el.addEventListener('animationEnd', removeHint);
function hintBrowser() {
  // 填写在CSS动画中发生改变的CSS属性名
  this.style.willChange = 'transform, opacity';
}
function removeHint() {
  this.style.willChange = 'auto';
}

[Direkt verwenden]

korrekt anzuwenden.  Wenn eine Anwendung jedoch Seiten umblättert, wenn die Tastatur gedrückt wird, z Als Fotoalbum oder für Folien ist die Seite sehr groß und komplex. Zu diesem Zeitpunkt ist es angebracht, Will-Change im Stylesheet zu schreiben. Dadurch bereitet der Browser die Übergangsanimation im Voraus vor und Sie können die flexible und leichte Animation sehen, wenn die Tastatur gedrückt wird

.slide {
  will-change: transform;
}

Notizen

  1 . Wenden Sie will-change nicht auf zu viele Elemente an: Der Browser hat bereits sein Bestes gegeben, um alles zu optimieren, was optimiert werden kann. Es gibt einige leistungsfähigere Optimierungen, die in Kombination mit will-change viele Maschinenressourcen verbrauchen können. Bei übermäßiger Verwendung kann es dazu führen, dass die Seite langsam reagiert oder viele Ressourcen verbraucht

  2. Dort werden sparsam verwendet: Typischerweise verwerfen Browser die Optimierungsarbeit, wenn ein Element in seinen ursprünglichen Zustand zurückversetzt wird. Wenn das Will-Change-Attribut jedoch explizit direkt im Stylesheet deklariert wird, bedeutet dies, dass sich das Zielelement möglicherweise häufig ändert und der Browser die Optimierungsarbeit länger als zuvor speichert. Daher besteht die beste Vorgehensweise darin, den Wert von will-change per Skript vor und nach den Elementänderungen

zu ändern

3. Wenden Sie die Will-Change-Optimierung nicht vorzeitig an: Wenn die Seite keine Leistungsprobleme aufweist, fügen Sie nicht das Will-Change-Attribut hinzu, um ein wenig Geschwindigkeit herauszuholen. Die ursprüngliche Entwurfsabsicht von will-change besteht darin, als letztes Mittel zur Optimierung bestehende Leistungsprobleme zu lösen. Es sollte nicht zur Vermeidung von Leistungsproblemen verwendet werden. Übermäßiger Einsatz von will-change kann zu einer großen Speichernutzung und einem komplexeren Rendervorgang führen, da der Browser versucht, sich auf mögliche Änderungen vorzubereiten. Dies führt zu schwerwiegenderen Leistungsproblemen

  4. Geben Sie ihm genügend Arbeitszeit: Dieses Attribut wird verwendet, um Seitenentwicklern zu ermöglichen, den Browser darüber zu informieren, welche Attribute sich ändern können. Der Browser kann dann vorab einige Optimierungsarbeiten durchführen, bevor die Änderung eintritt. Daher ist es sehr wichtig, dem Browser etwas Zeit zu geben, um diese Optimierungen tatsächlich durchzuführen. Wenn Sie es verwenden, müssen Sie versuchen, einige Möglichkeiten zu finden, um die möglichen Änderungen des Elements zu einem bestimmten Zeitpunkt im Voraus zu erkennen, und ihm dann das Will-Change-Attribut hinzufügen

Weitere CSS-Attribute zur Optimierung der Seitendarstellung Bei Artikeln zum Thema „Will-Change“ achten Sie bitte auf die chinesische PHP-Website!