[CSS] CSS3 屬性 will-change 如何使用

css3 新增了一個屬性為 will-change，這個屬性用於提示瀏覽器此元素可能有 CSS 的改變(如：transition、transform等等)，讓瀏覽器可以針對 CSS 改變先做處理。

根據 mozilla 開發者文件上面有列出幾點注意事項

不要將多個元素都設上 will-change，這樣瀏覽器會嘗試優化所有元素而消耗過多的機器資源，進而使網頁變得更慢。
在適當的時機加上 will-change。若我們一開始就在 stylesheet 對元素加上 will-change ，會導致瀏覽器一直對此元素做優化而消耗資源，我們應該適時的使用 script 等方式適當的加入、移除 will-change 屬性。
若網頁已非常順暢，就不要再多加 will-change，過多的 will-change 反而會造成記憶體的消耗及衍生效能問題。
給予足夠時間預先加入 will-change 屬性。

接下來，我們來看看，什麼是在適當時機使用 will-change 屬性

錯誤用法 1：

[css] // 全部元素屬性都寫上去 * { will-change: transform, opacity, margin-left, width … ; } [/css]

錯誤用法2：

雖然比用法1好很多，但可想而知，大多數元素不可能無時無刻都可能改變。

[css] // 元素無時無刻都可能改變 .btn { will-change: tranform; } [/css]

錯誤用法3：當 btn 點擊後改變透明度

[css] // 沒有給予足夠時間給瀏覽器預先處理 .btn { opacity: 0.5; } .btn:active { will-change: opacity;   opacity: 0.8; } [/css]

比較好的用法：

適時的加入及移除 will-change 屬性

當 btn 點擊後改變透明度

[css] .btn { opacity: 0.5; } .btn { will-change: opacity; } .btn:active { opacity: 0.8; } [/css]

你可能會問如果是想要滑鼠移至按鈕時改變呢?

你可以這樣寫

[css] .btn { opacity: 0.5; } .container:hover > .btn { will-change: opacity; } .btn:hover { opacity: 0.8; } [/css]

當然，除了上面 CSS 的寫法，我們也可以使用 javascript 去動態加入及移除 will-change 屬性畢竟，大多數的改變通常是有事件觸發

參考資料：