css性能優(yōu)化-will-change使用詳解
我要評(píng)論will-change通過(guò)告知瀏覽器該元素會(huì)有哪些變化，使瀏覽器提前做好優(yōu)化準(zhǔn)備，增強(qiáng)頁(yè)面渲染性能。
屬性的取值：
1、auto: 實(shí)行標(biāo)準(zhǔn)瀏覽器優(yōu)化。
2、scroll-position: 表示開(kāi)發(fā)者希望在不久后改變滾動(dòng)條的位置或者使之產(chǎn)生動(dòng)畫(huà)。
3、contents: 表示開(kāi)發(fā)者希望在不久后改變?cè)貎?nèi)容中的某些東西，或者使它們產(chǎn)生動(dòng)畫(huà)。
4、<custom-ident>: 表示開(kāi)發(fā)者希望在不久后改變指定的屬性名或者使之產(chǎn)生動(dòng)畫(huà)，比如transform 或 opacity。
使用須知：
1、不要將 will-change 應(yīng)用到太多元素上，如果過(guò)度使用的話(huà)，可能導(dǎo)致頁(yè)面響應(yīng)緩慢或者消耗非常多的資源。
2、通常，當(dāng)元素恢復(fù)到初始狀態(tài)時(shí)，瀏覽器會(huì)丟棄掉之前做的優(yōu)化工作。但是如果直接在樣式表中顯式聲明了 will-change 屬性，則表示目標(biāo)元素可能會(huì)經(jīng)常變化，瀏覽器會(huì)將優(yōu)化工作保存得比之前更久。所以最佳實(shí)踐是使用完后及時(shí)清除。
3、如果你的頁(yè)面在性能方面沒(méi)什么問(wèn)題，則不要添加 will-change 屬性來(lái)榨取一丁點(diǎn)的速度。 will-change 的設(shè)計(jì)初衷是作為最后的優(yōu)化手段，用來(lái)嘗試解決現(xiàn)有的性能問(wèn)題，它不應(yīng)該被用來(lái)預(yù)防性能問(wèn)題。
兼容性：
總結(jié)
以上所述是小編給大家介紹的css性能優(yōu)化-will-change使用詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
CSS前端頁(yè)面渲染優(yōu)化屬性will-change的具體使用
這篇文章主要介紹了CSS前端頁(yè)面渲染優(yōu)化屬性will-change的具體使用,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著2020-04-03
