[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:

// 全部元素屬性都寫上去
* { will-change: transform, opacity, margin-left, width ..... ; }
錯誤用法2:

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

// 元素無時無刻都可能改變
.btn { will-change: tranform; }
錯誤用法3:
當 btn 點擊後改變透明度

// 沒有給予足夠時間給瀏覽器預先處理
.btn { opacity: 0.5; }
.btn:active { will-change: opacity;   opacity: 0.8; }
比較好的用法:
適時的加入及移除 will-change 屬性
當 btn 點擊後改變透明度
.btn { opacity: 0.5; } 
.btn { will-change: opacity; }
.btn:active { opacity: 0.8; }
你可能會問如果是想要滑鼠移至按鈕時改變呢?

你可以這樣寫

.btn { opacity: 0.5; }
.container:hover > .btn { will-change: opacity; }
.btn:hover { opacity: 0.8; }

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

參考資料:

https://developer.mozilla.org/zh-TW/docs/Web/CSS/will-change

https://drafts.csswg.org/css-will-change/

Leave a Reply

Your email address will not be published. Required fields are marked *