CSS效能最佳化新屬性：will-change

標籤：最佳化   nsf   通知   部分   ide   元素   目標   屬性   結束   

---恢複內容開始---

will-change屬性通過告訴瀏覽器什麼屬性、什麼元素將會發生變化，可以對這些操作進行可能性的最佳化，由此提高CSS動畫的執行效率。

這個屬性可以有4個值：

• auto: 實行標準瀏覽器最佳化。
• scroll-position: 指明元素的滾動位置將會出現動畫變化，瀏覽器應該為滾動視窗內容的不可見部分事先做好準備。
• contents: 指明元素的內容將會發生變化，瀏覽器不要緩衝它們的內容。
• <custom-ident>: 指明will-change實施的目標屬性，比如transform 或 opacity。

如果想通知瀏覽器會發生一個transform方面的變化，可以這樣寫：

.element {will-change: transform;}

我們還可以指定多個值，用逗號分隔，例如：

.element {will-change: transform, opacity;}

然而，千萬不要過度使用will-change屬性，否則，事與願違，頁面的執行效率會降低，推薦的做法是當一個元素或屬性發生變化時開啟will-change，變化完成之後關閉它。

 

轉載自CSDN--

我跟大家一樣漲知識了

---恢複內容結束---

CSS效能最佳化新屬性：will-change