Der Wille kann nicht missbraucht werden, da dies im Browser einen zus?tzlichen Ressourcenverbrauch verursacht und eine Optimierung verhindern wird. Seine Funktion besteht darin, die Browserelemente im Voraus zu informieren, dass sie sich ?ndern und so Optimierungsmechanismen wie Schichtverbesserung und Hardwarebeschleunigung ausl?sen. Wenn Sie jedoch eine gro?e Anzahl von Elementen oder unn?tigen Animationen verwenden, wird dies zu überm??iger Speicherverwendung und Seitenjamming führen. Geeignet für h?ufige Bewegungs-UI-Elemente (wie Schiebmenüs, Pop-up-Fenster), Ziehenelemente, komplexe Bildlaufanimationen und andere Szenarien. Die korrekte Verwendung umfasst: spezifische Attribute anstelle von allen angeben; Dynamisch hinzuzufügen, wenn dies erforderlich ist und sie rechtzeitig nach dem Ende der Animation entfernen; und implementieren Sie die Addition der Mouse -Inten, die Entfernung von Mouselave -Verz?gerungen und andere Methoden zur Reduzierung der Ressourcenverbrauch in Kombination mit JS.

Manchmal stecken Webanimationen fest, insbesondere wenn CSS verwendet werden, um einige komplexe Effekte zu erzielen. Zu diesem Zeitpunkt werden viele Menschen an die will-change denken, die sich jedoch f?lschlicherweise auswirkt, wirkt sich jedoch auf die Leistung aus.

Tats?chlich ist es seine Funktion, den Browser im Voraus zu sagen: "Ich werde einige Attribute dieses Elements als n?chstes verschieben, Sie sollten ihn besser im Voraus vorbereiten." Auf diese Weise kann der Browser im Voraus einige Optimierungsarbeiten durchführen, z. B. die Verbesserung von Schichten, das Einschalten der Hardwarebeschleunigung usw. Wenn dies jedoch nicht nur ungesund ist, kann es auch die Seite verlangsamen.

Warum k?nnen Sie Wille nicht beil?ufig verwenden?

will-change wird keine gute Sache sein, wenn Sie alle Elemente hinzufügen. Nachdem der Browser es sieht, kann es viel zus?tzliche Arbeit erledigen, wie z. B.:

• F?rdert dieses Element zu einer separaten zusammengesetzten Schicht
• Zutauschen Sie zus?tzliche Speicher- und GPU -Ressourcen aus
• Blockieren Sie bestimmte Rendering -Optimierungsmechanismen

Wenn eine Seite Dutzende von Elementen mit will-change: transform enth?lt, muss der Browser Ressourcen für jedes Element reservieren, was m?glicherweise zu einer überm??igen Speicherverwendung führen kann und sogar die Seite stecken bleibt.

Daher wird empfohlen, es nur für Elemente zu verwenden, die wirklich Hochleistungsanimationen erfordern, und sie rechtzeitig zu entfernen, nachdem die Animation vorbei ist .

Wann ist es geeignet, den Willenswechsel zu verwenden?

Nicht alle Animationen erfordern will-change . Wenn Sie nur einen einfachen Schwebeffekt oder einen langsamen übergangshintergrund haben, ben?tigen Sie ihn überhaupt nicht.

Wirklich geeignete Szenarien sind:

• H?ufig bewegende UI-Elemente wie Schiebmenüs, Pop-ups usw.
• Ziehen und Dropelemente
• Komplexe Bildlaufanimation oder Parallaxe Scrollen

Zum Beispiel: Wenn Sie eine Karte haben, die reibungslos skaliert und verschoben werden muss, wenn der Benutzer gleitet, k?nnen Sie sie so schreiben:

 .Card {
  übergang: 0,3S -Leichtigkeit;
}

.Card: Hover {
  Transformation: Skala (1.1) Translatey (-10px);
}

Es ist vernünftiger, zu diesem Zeitpunkt will-change hinzuzufügen:

 .Card {
  Willens?nderung: Transformation;
}

Vergessen Sie jedoch nicht, dass Sie, wenn dieses Element nur eine Animation hat, will-change durch JS entfernen k?nnen, nachdem die Animation beendet ist, um die unn?tige Ressourcenverwendung zu reduzieren.

Wie benutze ich den Willen richtig?

Es reicht nicht aus, den richtigen Ort zu verwenden, und die Auswahl der Syntax- und Attributwerte ist ebenfalls sehr wichtig.

H?ufige Fehlschreibermethoden sind:

 Willenswechsel: Alle;

Dies entspricht dem Browser: "Ich wei? nicht, was ich ?ndern soll, Sie müssen sowieso vorbereitet sein", was für die Leistung katastrophal ist.

Die empfohlenen Praktiken sind:

• Geben Sie nur die spezifischen Attribute an, die Sie ?ndern m?chten , z. B. transform , opacity , top , left usw.
• Wenn Sie sich über die spezifischen Attribute nicht sicher sind, ist es besser, sie nicht zuerst zu verwenden und dann nach der Beobachtung der Leistung zu entscheiden.
• Sie k?nnen will-change in Kombination mit JS dynamisch hinzufügen und entfernen, um eine langfristige Ressourcenbelegung zu vermeiden

Fügen Sie beispielsweise hinzu, wenn die Maus eintritt, und verz?gern Sie die Entfernung nach dem Abbruch:

 const Card = document.querySelector ('. Karte');

card.addeventListener ('Mouseenter', () => {
  CARD.Style.WillChange = 'Transform';
});

card.addeventListener ('Mouseleave', () => {
  setTimeout (() => {
    CARD.Style.WillChange = 'Auto';
  }, 300); // eine Pufferzeit hinterlassen});

Grunds?tzlich ist das. will-change ist ein nützliches Werkzeug, aber es ist leicht, missbraucht zu werden. Der Schlüssel ist, seinen Wirkmechanismus zu verstehen und ihn zum richtigen Zeitpunkt und zur richtigen Methode zu verwenden.

Das obige ist der detaillierte Inhalt vonVerwenden der CSS-Willenseigenschaft für die Leistungsoptimierung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!