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

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

一.will-change

1.是什么？

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

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

2.語法

/* 關(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; /* 兩個<animateable-feature>示例 *//* 全局值 */ will-change: inherit; will-change: initial; will-change: unset;1.<animateable-feature> 可以是以下值： scroll-position 告訴瀏覽器,要不久后動畫啦（改變滾動條的位置或者使之產(chǎn)生動畫） contents:告訴瀏覽器 不久后改變元素內(nèi)容中的某些東西，或者使它們產(chǎn)生動畫。 <custom-ident>：不久后改變指定的屬性名或者使之產(chǎn)生動畫。如果屬性名是簡寫，則代表所有與之對應(yīng)的簡寫或者全寫的屬性。

3.使用

不要這樣直接寫在默認(rèn)狀態(tài)中，因為will-change會一直掛著

.will-change {will-change: transform;transition: transform 0.3s; } .will-change:hover {transform: scale(1.5); }可以讓父元素hover的時候，聲明will-change，這樣，移出的時候就會自動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, 事件或動畫完畢，一定要及時remove. 比方說點(diǎn)擊某個按鈕，其他某個元素進(jìn)行動畫。點(diǎn)擊按鈕(click)，要先按下(mousedown)再抬起才出發(fā)。因此，可以mousedown時候打聲招呼, 動畫結(jié)束自帶回調(diào)，于是（示意，不要在意細(xì)節(jié)）：

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

總結(jié)

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

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