CSS-Leistungsoptimierung - detaillierte Erklärung der Will-Change-Verwendung

will-change teilt dem Browser mit, welche Änderungen am Element vorgenommen werden, sodass der Browser im Voraus Optimierungsvorbereitungen treffen und die Leistung der Seitendarstellung verbessern kann.

Attributwert:

1. auto: Implementieren Sie eine Standard-Browseroptimierung.

2. Scroll-Position: Gibt an, dass der Entwickler hofft, die Position der Bildlaufleiste in naher Zukunft zu ändern oder zu animieren.

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

4. <custom-ident>: Zeigt an, dass der Entwickler den angegebenen Attributnamen in naher Zukunft ändern oder animieren möchte, beispielsweise durch Transformieren oder Deckkraft.

Anwendung:

1. Wenden Sie „will-change“ nicht auf zu viele Elemente an. Bei übermäßiger Verwendung kann dies dazu führen, dass die Seite langsam reagiert oder viele Ressourcen verbraucht.

2. Wenn ein Element in seinen ursprünglichen Zustand zurückversetzt wird, verwirft der Browser normalerweise die zuvor durchgeführte Optimierungsarbeit. 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 ist es am besten, es sofort nach dem Gebrauch zu leeren.

3. Wenn Ihre Seite keine Leistungsprobleme hat, fügen Sie nicht das Attribut „will-change“ hinzu, um ein wenig Geschwindigkeit herauszukitzeln. will-change ist als Optimierung der letzten Möglichkeit konzipiert, um bestehende Leistungsprobleme zu beheben, und sollte nicht verwendet werden, um Leistungsprobleme zu verhindern.

Kompatibilität:

Zusammenfassen

Oben finden Sie eine ausführliche Einführung in die CSS-Leistungsoptimierung – wird die Nutzung ändern, die vom Herausgeber eingeführt wurde. Ich hoffe, dass sie für alle hilfreich sein wird. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Herausgeber wird Ihnen rechtzeitig antworten!