will-change
will-change CSS 屬性向瀏覽器提示一個元素將要發生怎樣的變化。瀏覽器可能會在元素實際發生變化之前進行最佳化。這類最佳化可以透過在實際需要之前完成潛在的昂貴工作來提高頁面的響應速度。
警告： will-change 旨在作為最後手段，用於處理現有的效能問題。不應將其用於預測效能問題。
此屬性的正確用法可能有點棘手
- 不要將
will-change應用於太多元素。 瀏覽器已經盡力最佳化所有內容。一些可能與will-change相關的更強大的最佳化最終會佔用機器大量資源，如果過度使用，可能會導致頁面變慢或消耗大量資源。 - 謹慎使用。 瀏覽器進行的最佳化通常會在完成後儘快移除，並恢復正常。但是直接在樣式表中新增
will-change意味著目標元素總是即將發生變化，瀏覽器會將最佳化保留比通常情況更長的時間。因此，最好在變化發生前後使用指令碼程式碼開啟和關閉will-change。 - 不要將
will-change應用於元素進行過早最佳化。 如果您的頁面效能良好，請不要僅為了提高一點速度而向元素新增will-change屬性。will-change旨在作為最後手段，用於處理現有的效能問題。不應將其用於預測效能問題。過度使用will-change將導致記憶體使用過多，並導致瀏覽器在嘗試為可能的變化做準備時發生更復雜的渲染。這將導致效能下降。 - 給予其足夠的時間來發揮作用。 此屬性旨在作為一種方法，供開發者提前告知使用者代理哪些屬性可能發生變化。然後瀏覽器可以選擇在屬性變化實際發生之前應用所需的任何提前最佳化。因此，重要的是要給瀏覽器一些時間來實際進行最佳化。找到一種方法至少提前預測到某些內容將發生變化，然後設定
will-change。 - 請注意，當與建立堆疊上下文的屬性值（例如
will-change: opacity）一起使用時，will-change實際上可能會影響元素的視覺外觀， 因為堆疊上下文是提前建立的。
語法
css
/* Keyword values */
will-change: auto;
will-change: scroll-position;
will-change: contents;
will-change: transform; /* Example of <custom-ident> */
will-change: opacity; /* Example of <custom-ident> */
will-change: left, top; /* Example of two <animatable-feature> */
/* Global values */
will-change: inherit;
will-change: initial;
will-change: revert;
will-change: revert-layer;
will-change: unset;
值
auto-
此關鍵字不表示任何特定意圖；使用者代理應應用其通常使用的任何啟發式演算法和最佳化。
<animatable-feature> 可以是以下值之一：
scroll-position-
表示開發者期望在不久的將來對元素的滾動位置進行動畫或更改。
contents-
表示開發者期望在不久的將來對元素內容進行動畫或更改。
<custom-ident>-
表示開發者期望在不久的將來對元素上具有給定名稱的屬性進行動畫或更改。如果給定的屬性是簡寫屬性，則表示對其展開的所有長手屬性的預期。它不能是以下值之一：
unset、initial、inherit、will-change、auto、scroll-position或contents。規範未定義特定值的行為，但transform通常是合成層提示。Chrome 目前會根據特定的 CSS 屬性識別符號執行兩種操作：建立新的合成層或新的堆疊上下文。
透過樣式表
對於透過按鍵翻頁的應用程式（例如相簿或幻燈片演示，其中頁面很大且複雜），在樣式表中包含 will-change 可能是合適的。這將允許瀏覽器提前準備過渡，並在按下按鍵後立即在頁面之間進行快速過渡。但請謹慎直接在樣式表中使用 will-change 屬性。它可能會導致瀏覽器將最佳化保留在記憶體中比需要的時間長得多。
css
.slide {
will-change: transform;
}
正式定義
正式語法
will-change =
auto |
<animateable-feature>#
<animateable-feature> =
scroll-position |
contents |
<custom-ident>
示例
透過指令碼
這是一個示例，展示瞭如何透過指令碼應用 will-change 屬性，這可能是在大多數情況下您應該做的事情。
js
const 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";
}
規範
| 規範 |
|---|
| CSS Will Change Module Level 1 # will-change |
瀏覽器相容性
載入中…