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

屬性的取值：

1、auto:  實行標準瀏覽器優(yōu)化。

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

3、contents:  表示開發(fā)者希望在不久后改變元素內(nèi)容中的某些東西，或者使它們產(chǎn)生動畫。

4、<custom-ident>:  表示開發(fā)者希望在不久后改變指定的屬性名或者使之產(chǎn)生動畫，比如transform 或 opacity。

使用須知：

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

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

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

兼容性：

總結(jié)

以上所述是小編給大家介紹的css性能優(yōu)化-will-change使用詳解，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！

最新評論