Erfahren Sie mehr über das Will-Change-Attribut in CSS

Was ist die CSS-Willensänderungseigenschaft? Wie benutzt man es? In diesem Artikel lernen Sie das Will-Change-Attribut kennen, um herauszufinden, wann und wie Sie es verwenden und wie Sie Will-Change in CSS besser festlegen.

will-change

Das CSS-Attribut will-change bietet Webentwicklern die Möglichkeit, dem Browser mitzuteilen, welche Änderungen am Element vorgenommen werden, sodass der Browser Änderungen im Voraus vor den Elementattributen vornehmen kann tatsächlich ändern. Gute entsprechende Optimierungsvorbereitungsarbeit. Diese Art der Optimierung kann einen Teil der komplexen Berechnungsarbeit im Voraus vorbereiten und die Seitenreaktion schneller und empfindlicher machen.

WICHTIG: Willensänderung ist als letztes Mittel gedacht, wenn versucht wird, bestehende Leistungsprobleme zu lösen. Es sollte nicht zur Vorhersage von Leistungsproblemen verwendet werden.

Ersetzen Sie den TranslateZ()-Hack

Wenn Sie beispielsweise CSS-3D-Transformationen verwenden, um Elemente auf dem Bildschirm zu verschieben, können das Element und sein Inhalt auf eine „Ebene“ gehoben werden, wo sie unabhängig davon gerendert werden können Rest der Seite und später zusammengesetzt. Dies isoliert das Rendern von Inhalten, verhindert, dass der Rest der Seite erneut gerendert werden muss, wenn die Transformation des Elements der einzige Inhalt ist, der sich zwischen Frames ändert, und bietet häufig erhebliche Geschwindigkeitsvorteile.

Allerdings ist das Einfügen eines Elements in eine neue Ebene ein relativ teurer Vorgang, der den Start der Transformationsanimation um den Bruchteil einer Sekunde verzögern kann.

Um diese Art von Verzögerung bei der Verwendung von CSS-Transformationen und anderen CSS-Operationen zu vermeiden, verwenden wir seit langem TranslateZ (oder manchmal Translate3d), um Elemente auf ihre eigene Ebene zu heben und so hardwarebeschleunigte Vorgänge für einen reibungsloseren, reibungsloseren Betrieb und ohne Störungen zu ermöglichen . Allerdings hat diese Technik – auch bekannt als „translateZ() (oder translator3d()) Hack“ – ihren Preis. Paul Lewis hat dazu einen sehr hilfreichen Beitrag geschrieben, den Sie unbedingt ausprobieren sollten, wenn Sie diese Technik anwenden. will-change dient dazu, dass wir unsere Animationen optimieren können, ohne auf diesen Hack – oder einen anderen Hack – zurückgreifen zu müssen.

(Lernvideo-Sharing: CSS-Video-Tutorial)

Kommagetrennt

Sie können dem Browser mitteilen, dass Sie die Bildlaufposition eines Elements ändern möchten, indem Sie den Namen der gewünschten Eigenschaft angeben change (durch Komma getrennt), seinen Inhalt oder den Wert einer oder mehrerer seiner CSS-Eigenschaften. Die meisten Eigenschaften haben keine Auswirkung, wenn sie angegeben werden, da Benutzeragenten bei Änderungen an den meisten Eigenschaften keine speziellen Optimierungen durchführen. Es ist jedoch immer noch sicher, sie anzugeben, obwohl dies überhaupt keine Auswirkung hat.

Wenn Sie erwarten oder planen, mehrere Werte/Aspekte eines Elements zu ändern, können Sie eine durch Kommas getrennte Werteliste bereitstellen. Die durch Kommas getrennte Werteliste kann vordefinierte Schlüsselwörter und/oder Eigenschaftsnamen enthalten. (Siehe den Abschnitt „Beispiele“ unten.)

Zusätzliche Erstellung von Stapelkontexten und enthaltenden Blöcken

Wenn ein nicht initialer Wert einer von Ihnen deklarierten Eigenschaft einen Stapelkontext für das Element erstellt, geben Sie dies in will-change an Das Attribut muss einen Stapelkontext für das Element erstellen. Wenn Sie beispielsweise die Deckkraft auf einen anderen Wert als 1 festlegen, wird ein Stapelkontext für das Element erstellt. Daher wird durch die Einstellung will-change: opacity auch ein Stapelkontext erstellt, selbst wenn opacity immer noch gleich 1 ist.

Ähnlich muss die Angabe des Attributs in will-change dazu führen, dass das Element einen umschließenden Block für Elemente mit fester Position generiert, wenn ein nicht-initialer Wert des Attributs dazu führen würde, dass das Element einen umschließenden Block für Elemente mit fester Position generiert. Das Attribut

will-change hat keine direkte Auswirkung auf das von ihm angegebene Element, abgesehen von der oben erwähnten Erstellung von Stapelkontexten und enthaltenden Blöcken – es ist lediglich ein Rendering-Hinweis für den Benutzeragenten, der es ihm ermöglicht, zu warten, bis bestimmte Arten von Änderungen tatsächlich beginnen auftreten. Richten Sie vorher potenziell kostspielige Optimierungen ein.

Mit Vorsicht verwenden

Dennoch ist es wichtig, dass Sie wissen, dass Sie diese Eigenschaft mit Vorsicht nutzen sollten. Verschiedene Browser können Informationen von will-change auf unterschiedliche Weise nutzen, und sogar ein einzelner Browser kann sie zu unterschiedlichen Zeiten auf unterschiedliche Weise nutzen. Übermäßiger Gebrauch kann dazu führen, dass die Anweisung vollständig ignoriert wird. Zum Beispiel Browser, die Elemente auf ihre eigene „GPU-Ebene“ hochstufen, wenn das Element will-change hat. Wenn jedoch zu viele Elementdeklarationen vorhanden sind, ignoriert der Browser die Deklarationen, um zu vermeiden, dass der GPU-Speicher knapp wird.

Außerdem sollte Willensänderung nicht verwendet werden, es sei denn, es ist bekannt oder es wird erwartet, dass sich das Element in naher Zukunft (z. B. innerhalb eines Sekundenbruchteils) ändert. Es sollte deaktiviert werden, sobald es nicht mehr benötigt wird:

Setzen Sie will-change auf die Eigenschaft, die Sie tatsächlich ändern werden, für das Element, das sich tatsächlich ändert. und entfernen Sie sie, wenn sie aufhören. - Tab Atkins Jr. (Spezifikationsredakteur)

Die Browseroptimierung für bevorstehende Änderungen ist oft teuer und beansprucht, wie bereits erwähnt, die Maschinenressourcen sehr. Das normale Browser-Optimierungsverhalten besteht darin, diese Optimierungen zu entfernen und so schnell wie möglich zum normalen Verhalten zurückzukehren. Will-Change überschreibt dieses Verhalten jedoch und hält die Optimierung länger aufrecht, als es der Browser sonst tun würde.

Daher sollten Sie immer daran denken, will-change zu entfernen, nachdem die Änderung des Elements abgeschlossen ist, damit der Browser mit der Optimierung aller deklarierten Ressourcen fortfahren kann.

Einstellung wird sich mit JavaScript ändern

Einstellung wird sich mit JavaScript ändern, was eine detailliertere Steuerung ermöglicht, dem Browser mehr Zeit für die Vorbereitung der Änderung gibt und Ihnen außerdem ermöglicht, die Einstellung abzubrechen, sobald die Änderung erfolgt Das Animationsereignis endet. Mithilfe von JavaScript deklarieren Sie Ihre Änderungen im Browser und entfernen dann die Will-Change-Funktion, wenn die Änderungen abgeschlossen sind, indem Sie abwarten, wann diese Änderungen abgeschlossen sind.

Zum Beispiel könnten Sie abhören, wenn ein Element (oder sein Vorfahre) mit der Maus bewegt wird, und dann eine Willensänderung bei der Mauseingabe festlegen. Wenn Ihr Element animiert wird, können Sie das DOM-Ereignis „animationEnd“ verwenden, um darauf zu warten, wann die Animation endet, und dann die Willensänderung entfernen, nachdem „animationEnd“ ausgelöst wurde.

// Rough generic example
// Get the element that is going to be animated on click, for example
var el = document.getElementById('element');

// Set will-change when the element is hovered
el.addEventListener('mouseenter', hintBrowser);
el.addEventListener('animationEnd', removeHint);

function hintBrowser() {
	// The optimizable properties that are going to change
	// in the animation's keyframes block
	this.style.willChange = 'transform, opacity';
}

function removeHint() {
	this.style.willChange = 'auto';
}

Will-Change besser in CSS festlegen

Wenn Sie Will-Change wirklich in Ihrem Stylesheet festlegen möchten, um Elemente zu optimieren, die sich beim Hover ändern können, dann um dem Browser mitzuteilen, dass Sie optimieren möchten Für Änderungen, die beim Schweben auftreten, können Sie Folgendes tun:

.el:hover {
    will-change: transform;
    transform: rotate()...;
}

Das ist nicht besonders fehlerhaft, aber auch nicht besonders nützlich. Sie müssen dem Browser Ihre Absichten einige Zeit vor der tatsächlichen Änderung mitteilen und nicht erst, wenn die Änderung eintritt, um ihm etwas Zeit zu geben, sich auf die Änderung vorzubereiten und die erforderlichen Optimierungen vorzunehmen. In einem Szenario wie diesem könnten Sie also Folgendes tun:

.el {
    will-change: transform;
}

.el:hover {
    transform: rotate()...;
}

Alternativ könnten Sie eine Willensänderung festlegen, wenn der Container des Elements mit der Maus bewegt wird, da es einige Zeit dauert, bis das Hover-Ereignis das Element selbst erreicht, und dann das Der Browser kann diese Zeit nutzen. Bereiten Sie sich auf Änderungen am Element selbst vor:

.container:hover .el {
    will-change: transform;
}

.el:hover {
    transform: rotate()...;
}

Zusammenfassend: Denken Sie daran, will-change sparsam zu verwenden, verwenden Sie es nicht zu häufig, setzen Sie es nur, wenn Sie wissen, dass sich das Element ändern wird, und denken Sie daran Deaktivieren Sie es, nachdem die Änderung abgeschlossen ist.

Offizielle Syntax

• Aussage:

will-change: auto | <animateable-feature>#

wobei

<animateable-feature> = scroll-position | contents | <custom-ident>

Tag (#) bedeutet, dass Sie mehrere durch Kommas getrennte Werte angeben können.

• Anfangswert: auto
• Gilt für: Alle Elemente
• Animation: Nein

Werte

auto

Dies ist der Standardwert. Es drückt keine besondere Absicht aus. Der Browser wird über keine Änderungen benachrichtigt und führt daher keine Optimierungen durch, um zukünftige Änderungen zu berücksichtigen.

scroll-position

gibt an, dass der Autor in naher Zukunft die Scrollposition eines Elements animieren oder ändern möchte. Der Browser wird vorab entsprechend für diese Änderung optimiert.

Browser rendern beispielsweise Inhalte in einem „Scrollfenster“ oft nur auf scrollbaren Elementen und Inhalten, die das Fenster bereits durchlaufen haben, und gleichen so die durch das Überspringen des Renderns eingesparte Zeit und den Speicher aus, um das Scrollen besser aussehen zu lassen. Browser können diesen Wert als Signal verwenden, um den Inhaltsbereich um das gerenderte Bildlauffenster herum zu erweitern, damit längeres/schnelleres Scrollen reibungslos durchgeführt werden kann.

Inhalt

weist auf etwas hin, das der Autor in naher Zukunft animieren oder den Inhalt des Elements ändern möchte. Der Browser wird vorab entsprechend für diese Änderung optimiert.

Zum Beispiel „cachen“ Browser die Darstellung von Elementen im Laufe der Zeit oft zwischen, da sich die meisten Dinge nicht sehr oft ändern oder nur ihre Position ändern. Wenn das Element jedoch seinen Inhalt regelmäßig ändert, ist das Erstellen und Verwalten dieses Caches Zeitverschwendung. Browser nehmen diesen Wert möglicherweise als Signal, das Element weniger aggressiv zwischenzuspeichern oder das Zwischenspeichern überhaupt zu vermeiden und das Element einfach ständig von Grund auf neu zu rendern.

e53daba18c25ef518ad73d82fe4f7af3 (028aa264268b1d80e0a56150adf879cc)e53daba18c25ef518ad73d82fe4f7af3 (028aa264268b1d80e0a56150adf879cc)

e53daba18c25ef518ad73d82fe4f7af3 值（有关详细信息，请参阅 e53daba18c25ef518ad73d82fe4f7af3 条目）。 表示作者希望在不久的将来对元素上具有给定名称的属性进行动画处理或更改。

例如，浏览器通常将设置有非初始值 transform 属性的元素和其他元素区分开，可能将它们渲染到自己的“GPU 层”，或者使用其他机制来更容易的快速的进行变换。浏览器可能会将 transform

🎜e53daba18c25ef518ad73d82fe4f7af3 Wert (verwandt Weitere Informationen finden Sie im e53daba18c25ef518ad73d82fe4f7af3 Eintrag). Zeigt an, dass der Autor in naher Zukunft eine Eigenschaft mit dem angegebenen Namen für ein Element animieren oder ändern möchte. 🎜🎜Browser unterscheiden beispielsweise häufig Elemente mit einem nicht initialisierten transform-Attributsatz von anderen Elementen, indem sie sie möglicherweise in ihre eigene „GPU-Ebene“ rendern oder andere Mechanismen verwenden, um Änderungen schneller vorzunehmen . Der Browser kann den Wert von transform als Signal dafür nehmen, dass er das Element unmittelbar vor Beginn der Transformation in seine eigene Ebene hochstufen soll, um das erneute Rendern der alten und neuen Ebenen zu vermeiden . Verzögerung. 🎜

除了通常从 e53daba18c25ef518ad73d82fe4f7af3 中排除的关键字之外，e53daba18c25ef518ad73d82fe4f7af3 值不能是以下关键字之一：will-change、none、all、auto、scroll-position 和 contents。

请注意，大多数属性在指定时将不起作用，因为用户代理不会对大多数属性的更改执行任何特殊优化。不过，指定它们仍然是安全的，虽然它根本没有效果。

注：感觉虽然命名为『自定义标志』, 其实主要碰到的还是 css 预定义好的标志，譬如 transform、opacity

例子

下面告诉浏览器期望元素的变换属性发生变化，以便提前进行适当的优化。

.el {
    will-change: transform;
}

上面的 will-change 声明应该通过 JavaScript 添加，然后在更改结束后删除或取消设置 (will-change: auto)。

以下所有的都是可能且有效的 will-change 值：

will-change: contents;
will-change: scroll-position;
will-change: opacity;/* multiple comma-separated values */will-change: contents, transform;
will-change: scroll-position, opacity;

使用小结

想使用好 will-change 并不是太容易，以下使用忠告摘录于官方文档，可见真是太难了。

• 不要将 will-change 应用到太多元素上： 浏览器已经尽力尝试去优化一切可以优化的东西了。有一些更强力的优化，如果与 will-change 结合在一起的话，有可能会消耗很多机器资源，如果过度使用的话，可能导致页面响应缓慢或者消耗非常多的资源。

• 有节制地使用： 通常，当元素恢复到初始状态时，浏览器会丢弃掉之前做的优化工作。但是如果直接在样式表中显式声明了 will-change 属性，则表示目标元素可能会经常变化，浏览器会将优化工作保存得比之前更久。所以最佳实践是当元素变化之前和之后通过脚本来切换 will-change 的值。

• 不要过早应用 will-change 优化： 如果你的页面在性能方面没什么问题，则不要添加 will-change 属性来榨取一丁点的速度。 will-change 的设计初衷是作为最后的优化手段，用来尝试解决现有的性能问题。它不应该被用来预防性能问题。过度使用 will-change 会导致大量的内存占用，并会导致更复杂的渲染过程，因为浏览器会试图准备可能存在的变化过程。这会导致更严重的性能问题。

• 给它足够的工作时间准备，不要过迟应用： 这个属性是用来让页面开发者告知浏览器哪些属性可能会变化的。然后浏览器可以选择在变化发生前提前去做一些优化工作。所以给浏览器一点时间去真正做这些优化工作是非常重要的。使用时需要尝试去找到一些方法提前一定时间获知元素可能发生的变化，然后为它加上 will-change 属性。

更多编程相关知识，请访问：编程视频！！

Das obige ist der detaillierte Inhalt vonErfahren Sie mehr über das Will-Change-Attribut in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!