關注前端開發
關注用戶體驗

css性能優化-will-change

will-change通過告知瀏覽器該元素會有哪些變化,使瀏覽器提前做好優化準備,增強頁面渲染性能。

屬性的取值:

1、auto:? 實行標準瀏覽器優化。

2、scroll-position:? 表示開發者希望在不久后改變滾動條的位置或者使之產生動畫。

3、contents:? 表示開發者希望在不久后改變元素內容中的某些東西,或者使它們產生動畫。

4、<custom-ident>:? 表示開發者希望在不久后改變指定的屬性名或者使之產生動畫,比如transform?或?opacity。

使用須知:

1、不要將 will-change 應用到太多元素上,如果過度使用的話,可能導致頁面響應緩慢或者消耗非常多的資源。

2、通常,當元素恢復到初始狀態時,瀏覽器會丟棄掉之前做的優化工作。但是如果直接在樣式表中顯式聲明了?will-change?屬性,則表示目標元素可能會經常變化,瀏覽器會將優化工作保存得比之前更久。所以最佳實踐是使用完后及時清除。

3、如果你的頁面在性能方面沒什么問題,則不要添加?will-change?屬性來榨取一丁點的速度。?will-change?的設計初衷是作為最后的優化手段,用來嘗試解決現有的性能問題,它不應該被用來預防性能問題。

兼容性:

贊(20)
未經允許不得轉載:大前端 » css性能優化-will-change
分享到: 更多 (0)

themebetter 國內更好的WordPress主題服務商

立即前往
广东26选5复式计算