[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: 錯誤用法2: 雖然比用法1好很多,但可想而知,大多數元素不可能無時無刻都可能改變。 錯誤用法3: 當 btn 點擊後改變透明度 比較好的用法: 適時的加入及移除 will-change 屬性 當 btn 點擊後改變透明度 你可能會問如果是想要滑鼠移至按鈕時改變呢? 你可以這樣寫 當然,除了上面 CSS 的寫法,我們也可以使用 javascript 去動態加入及移除 will-change […]

Continue reading