will-change是css屬性，用于提前告知瀏覽器元素的某些屬性將發生變化，從而讓瀏覽器進行優化預處理。它通過創建獨立圖層、啟用gpu加速等方式提升動畫或頻繁變化場景的性能。但濫用會導致過度分層、資源浪費和布局抖動等問題。正確使用方法包括：1. 只在必要時使用，如動畫卡頓時；2. 精確指定將要變化的屬性，如transform或opacity；3. 動畫結束后移除will-change以釋放資源；4. 避免頁面加載時大量使用，應根據用戶行為動態添加。合理使用可提升性能，但需謹慎對待，不應作為日常開發標配。
在css中使用will-change屬性，本質上是提前告訴瀏覽器：“我馬上要改變這個元素的某些屬性，你最好提前做好準備。”這種“預告”機制確實可能對渲染性能產生影響，但用得不好也可能適得其反。
什么是will-change，它為什么有用？
will-change的作用是提示瀏覽器哪些元素和屬性即將發生變化。這樣瀏覽器可以提前做一些優化工作，比如為元素創建獨立的圖層、啟用GPU加速等。這在動畫或頻繁變化的界面中尤其有用。
不過要注意的是，瀏覽器本身已經有一套自動優化機制，只有在你能明確預測變化的前提下，才建議使用will-change。
立即學習“前端免費學習筆記（深入）”；
常見使用場景包括：
- 動畫前的準備（如滑動、縮放）
- 滑動卡片、彈窗等交互組件
- 高頻更新的dom元素
使用不當反而會拖慢頁面
雖然will-change聽起來很強大，但如果濫用，可能會帶來負面影響：
- 過度分層：每個被提升為獨立圖層的元素都需要額外的內存和合成開銷。
- 資源浪費：如果聲明了不會實際發生的變化，瀏覽器做的預處理就白費了。
- 布局抖動：不合理的使用可能導致重排、重繪更頻繁。
舉個例子，如果你寫成這樣：
.my-element { will-change: transform, opacity, width, height, top, left; }
那其實就是在告訴瀏覽器：“我要變的東西特別多”，結果就是瀏覽器不得不做大量冗余的準備，最終反而降低性能。
如何正確使用will-change？
1. 只在必要時使用
不是所有動畫或變化都需要用will-change。只有當動畫卡頓明顯、或者性能監控工具指出問題時，才考慮加上它。
2. 精確指定將要變化的屬性
盡量只聲明你真正要改的屬性，比如：
will-change: transform;
或者多個屬性：
will-change: opacity, top;
3. 動畫結束后移除will-change
因為will-change帶來的優化是有成本的，所以一旦動畫結束，就應該把它去掉：
element.addEventListener('transitionend', () => { element.style.willChange = 'auto'; });
4. 不要一開始就給太多元素加
避免在頁面加載時就給幾十上百個元素設置will-change。應該根據用戶行為動態添加。
基本上就這些
合理使用will-change確實能在特定場景下提升渲染性能，但它更像是一個“性能調優”的工具，而不是日常開發中的標配。用得好能錦上添花，用不好反而可能拖累頁面表現。
