今天突然看到這個(gè)will-change 覺(jué)得好新鮮，就百度一看，才知道人家早就出來(lái)（我out了），只是現(xiàn)在各個(gè)瀏覽器還不怎么兼容，為了滿足我的好奇心，就來(lái)了解下唄。

如果你已經(jīng)試驗(yàn)和利用過(guò)這些CSS3的屬性，你可能碰到類似CPU、GPU和硬件加速等術(shù)語(yǔ)。讓我們快速的掌握這些術(shù)語(yǔ)：
? ?①CPU即中央處理器，它的功能主要是解釋計(jì)算機(jī)指令以及處理計(jì)算機(jī)軟件中的數(shù)據(jù),也被稱為主板。
? ?②GPU即圖形處理器，是與處理和繪制圖形相關(guān)的硬件。GPU是專為執(zhí)行復(fù)雜的數(shù)學(xué)和幾何計(jì)算而設(shè)計(jì)的，有了它，CPU就從圖形處理的任務(wù)中解放出來(lái)，可以執(zhí)行其他更多的系統(tǒng)任務(wù)。
? ?③硬件加速是指在計(jì)算機(jī)中透過(guò)把計(jì)算量非常大的工作分配給專門的硬件來(lái)處理來(lái)減輕CPU的工作量的技術(shù)。在CSS transition, transform和animation的世界里，他暗示我們應(yīng)該卸載進(jìn)程到GPU，因此加快速度。這種情況通過(guò)向它自己的層疊加元素，當(dāng)加載動(dòng)畫的時(shí)候可以加速渲染。
怎樣改善動(dòng)畫的性能和質(zhì)量？首先，在基于webkit的瀏覽器，我們?cè)趫?zhí)行一些CSS的操作經(jīng)常會(huì)看見(jiàn)閃爍和動(dòng)畫。在過(guò)去，我們通過(guò)欺騙瀏覽器一點(diǎn)點(diǎn)解決實(shí)現(xiàn)。我們會(huì)使瀏覽器執(zhí)行3D變換，因此減輕了工作量到GPU上。這是因?yàn)?D轉(zhuǎn)換是自動(dòng)移到那里的。這導(dǎo)致我們的做一些掛羊頭賣狗肉的事就像這樣：
.accelerate {
? -webkit-transform: translate3d(0, 0, 0);
}
還有一些類似的技巧，但是在大部分情況下，有很多相同的技巧，但對(duì)于此類問(wèn)題的大部分，這種方式就可以解決。然而， 這是一種非正常的實(shí)現(xiàn)方式，當(dāng)我們正確使用的時(shí)候，will-change屬性將極大的幫助我們。讓我們一起探討一下吧。

一.will-change

1.是什么？

CSS3 will-change屬于web標(biāo)準(zhǔn)屬性，兼容性這塊Chrome/FireFox/Opera都是支持的。

注意：will-change真正的行為觸發(fā)之前會(huì)告訴瀏覽器：“我要觸發(fā)啦”。這意味著不是通過(guò)一個(gè)3D變換迫使我們轉(zhuǎn)換到GPU，而是我們現(xiàn)在可以使用一個(gè)專用的屬性來(lái)通知瀏覽器留意接下來(lái)的變化，從而優(yōu)化和分配內(nèi)存。提前預(yù)約從容不迫。

2.語(yǔ)法

/* 關(guān)鍵字值 */ will-change: auto; will-change: scroll-position; will-change: contents; will-change: transform; /* <custom-ident>示例 */ will-change: opacity; /* <custom-ident>示例 */ will-change: left, top; /* 兩個(gè)<animateable-feature>示例 *//* 全局值 */ will-change: inherit; will-change: initial; will-change: unset;1.<animateable-feature> 可以是以下值： scroll-position 告訴瀏覽器,要不久后動(dòng)畫啦（改變滾動(dòng)條的位置或者使之產(chǎn)生動(dòng)畫） contents:告訴瀏覽器 不久后改變?cè)貎?nèi)容中的某些東西，或者使它們產(chǎn)生動(dòng)畫。 <custom-ident>：不久后改變指定的屬性名或者使之產(chǎn)生動(dòng)畫。如果屬性名是簡(jiǎn)寫，則代表所有與之對(duì)應(yīng)的簡(jiǎn)寫或者全寫的屬性。

3.使用

不要這樣直接寫在默認(rèn)狀態(tài)中，因?yàn)閣ill-change會(huì)一直掛著

.will-change {will-change: transform;transition: transform 0.3s; } .will-change:hover {transform: scale(1.5); }可以讓父元素hover的時(shí)候，聲明will-change，這樣，移出的時(shí)候就會(huì)自動(dòng)remove，觸發(fā)的范圍基本上是有效元素范圍。

.will-change-parent:hover .will-change {will-change: transform; } .will-change {transition: transform 0.3s; } .will-change:hover {transform: scale(1.5); }如果使用JS添加will-change, 事件或動(dòng)畫完畢，一定要及時(shí)remove. 比方說(shuō)點(diǎn)擊某個(gè)按鈕，其他某個(gè)元素進(jìn)行動(dòng)畫。點(diǎn)擊按鈕(click)，要先按下(mousedown)再抬起才出發(fā)。因此，可以mousedown時(shí)候打聲招呼, 動(dòng)畫結(jié)束自帶回調(diào)，于是（示意，不要在意細(xì)節(jié)）：

var el = document.getElementById('element'); // 當(dāng)鼠標(biāo)移動(dòng)到該元素上時(shí)給該元素設(shè)置 will-change 屬性 el.addEventListener('mouseenter', hintBrowser); // animationend 事件在 CSS 動(dòng)畫完成后觸發(fā)。當(dāng) CSS 動(dòng)畫結(jié)束后清除 will-change 屬性 el.addEventListener('animationend', removeHint); function hintBrowser() {this.style.willChange = 'transform, opacity'; } function removeHint() {this.style.willChange = 'auto'; }

總結(jié)

以上是生活随笔為你收集整理的CSS3 will-change提高页面动画等渲染性能的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。