css需要硬件加速的部分
在很多需要css動畫的位置贷帮，在遇到透明層漸變的情況下戚揭，基本需要啟用GPU加速，不然在cpu中處理這些事情撵枢，由于負(fù)擔(dān)過重問題民晒，會導(dǎo)致用戶體驗不佳精居，特別是在移動設(shè)備上，
opacity等這些是可以激活GPU加速镀虐，但是依舊體驗不佳箱蟆，此時可能就需要使用will-change這個屬性，則是提醒瀏覽器要對什么元素做什么動畫刮便，這樣就可以有個提前量的優(yōu)化設(shè)置空猜，減少出現(xiàn)的卡頓。雖然大佬們早期給出的解決方案是使用translateZ()或者translate3d()hack來騙取瀏覽器觸發(fā)硬件加速恨旱，其實就是給元素添加沒有變化的3d變形辈毯，但是這樣強制的使用的代價就是，他們占用了過多的內(nèi)存和GPU的使用搜贤，那么如果能夠提前預(yù)知元素的動畫行為并為其提前準(zhǔn)備好需要使用的資源的話谆沃，那效果就不一樣了，所以will-change就是這么用的了仪芒。
如何去正確的使用它
該屬性可以提前通知瀏覽器我們要對什么元素做什么動畫效果唁影，讓瀏覽器進(jìn)行提前資源調(diào)用，使用非常簡單掂名，只需要添加一個
will-change: transform;就好了据沈，但是可不能全部元素都添加這些東西，這個道理和之前使用的hack是一摸一樣的饺蔑，如果直接使用will-change: all;锌介，這樣帶來的后果會因為過度資源占用而頁面崩潰，所以盡量不要在所有的css中使用猾警，只是在一些必要的動畫效果中使用就好了孔祸。而且這個也不是萬金油，使用它的時候需要在發(fā)生形變前給出這個屬性发皿，畢竟在形變過程中去使用就完全沒有意義了崔慧，而且可能還會起反作用。
will-change屬性的值
- auto 表示沒有明確的意圖; 無論是啟發(fā)式和最優(yōu)化穴墅，用戶代理應(yīng)該應(yīng)用都和正常情況相同
- scroll-position 表示開發(fā)者期望去在接下來去改變或者有動畫應(yīng)用元素的滾動位置
- contents 表示開發(fā)者期望去在接下來去改變或者有動畫應(yīng)用元素的內(nèi)容
- 用來排除關(guān)鍵字 will-change, none, all, auto, scroll-position, and contents, 從之外增加一些通用的關(guān)鍵字
will-change： transform;
will-change： opacity;
will-change： top, left, bottom, right;
如果一個屬性無最初的值,在這個元素上這個屬性將創(chuàng)建一個堆棧的內(nèi)容, 明確規(guī)定在will-change的屬性必須在這個元素上創(chuàng)建一個堆棧的內(nèi)容.如果一個屬性無最初的值, 這個屬性將造成這個元素產(chǎn)生一個包含區(qū)塊的固定定位的元素, 明確規(guī)定在 will-change的屬性必須造成這個元素產(chǎn)生一個包含區(qū)塊的固定定位的元素
