這篇文章給大家分享的是有關(guān)CSS前端頁面渲染優(yōu)化屬性will-change的使用方法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過來看看吧。
前言
當(dāng)觸發(fā)scroll、resize這類的滾動(dòng)事件時(shí)，被觸發(fā)的頻率非常高，間隔也特別近。如果事件中涉及到大量的位置計(jì)算、DOM操作、元素重繪等工作，并且這些工作無法在下一個(gè)scroll事件出發(fā)前完成，就會(huì)造成瀏覽器掉幀（掉幀就是例如圖像一閃一閃的,運(yùn)動(dòng)不流暢的情況）。加之用戶鼠標(biāo)滾動(dòng)往往是連續(xù)的，就會(huì)持續(xù)觸發(fā)scroll事件導(dǎo)致掉幀擴(kuò)大、瀏覽器CPU使用率增加，用戶體驗(yàn)收到影響。
而CSS屬性will-change為web開發(fā)者提供了一種告知瀏覽器該元素會(huì)有哪些變化的方法，這樣瀏覽器就可以在元素屬性真正發(fā)生變化之前提前做好對(duì)應(yīng)的優(yōu)化準(zhǔn)備工作。這種優(yōu)化可以將一部分復(fù)雜的計(jì)算工作提前準(zhǔn)備好，使頁面的反應(yīng)更為快速靈敏。
準(zhǔn)備知識(shí)
CPU
CPU即中央處理器，它的功能主要是解釋計(jì)算機(jī)指令以及處理計(jì)算機(jī)軟件中的數(shù)據(jù),也被稱為主板。
GPU
GPU是圖形處理器，專門處理和繪制圖形相關(guān)的硬件。GPU是專為執(zhí)行復(fù)雜的數(shù)學(xué)和幾何計(jì)算而設(shè)計(jì)的，使得CPU從圖形處理的任務(wù)中解放出來，可以執(zhí)行其他更多的系統(tǒng)任務(wù)。
硬件加速
硬件加速意味著Graphics Processing Unit（GPU）會(huì)通過代替Central Processing Unit (CPU)做一些負(fù)荷比較大的事情，來協(xié)助瀏覽器快速渲染頁面，當(dāng)CSS操作使用硬件加速的時(shí)候，通常會(huì)使頁面渲染速度加快。
瀏覽器渲染頁面的過程：
1.解析HTML(HTML Parser)
2.構(gòu)建DOM樹(DOM Tree)
3.渲染樹構(gòu)建(Render Tree)
4.繪制渲染樹(Painting)
簡單的解釋就是：瀏覽器通過請(qǐng)求得到服務(wù)器返回的html，因?yàn)閔tml是樹狀結(jié)構(gòu)，通過瀏覽器解析生成DOM Tree。在CSS解析完畢后，將得到的模擬樹CSSOM Tree和DOM Tree結(jié)合構(gòu)建Render Tree，最終用來進(jìn)行繪圖(Painting)
CSS的動(dòng)畫、變形、漸變并不會(huì)自動(dòng)觸發(fā)GPU加速，而是使用瀏覽器稍慢的軟件渲染引擎。在transition、transform和animation的世界里，應(yīng)該卸載進(jìn)程到GPU以加速速度。只有3D變形會(huì)有自己的layer，而2D變形則不會(huì)。
will-change
1.will-change 是什么？
will-change的功能是：提前通知瀏覽器元素將要做什么動(dòng)畫，讓瀏覽器提前準(zhǔn)備合適的優(yōu)化設(shè)置
官方文檔說：這是一個(gè)仍處于試驗(yàn)階段的功能，所以在未來版本的瀏覽器中該語法的功能和行為kennel隨之變化。
CSS3 will-change屬于web標(biāo)準(zhǔn)屬性，兼容性這塊Chrome/FireFox/Opera都是支持的。
注意：will-change真正的行為觸發(fā)之前會(huì)告訴瀏覽器：“我要觸發(fā)啦”。這意味著不是通過一個(gè)3D變換迫使我們轉(zhuǎn)換到GPU，而是我們現(xiàn)在可以使用一個(gè)專用的屬性來通知瀏覽器留意接下來的變化，從而優(yōu)化和分配內(nèi)存。提前預(yù)約從容不迫。
2.語法
will-change: auto will-change: scroll-position will-change: contents will-change: transform // Example ofwill-change: opacity // Example of will-change: left, top // Example of two will-change: unset will-change: initial will-change: inherit
auto
表示沒有特別指定哪些屬性會(huì)變化，需要瀏覽器自己去猜，然后使用瀏覽器經(jīng)常使用的一些常規(guī)方法進(jìn)行優(yōu)化。
可以是以下值：
scroll-position
表示開發(fā)者希望在不久后改變滾動(dòng)條的位置或者使之產(chǎn)生動(dòng)畫
contents
表示開發(fā)者希望在不久后改變元素內(nèi)容中的某些東西，或者使它們產(chǎn)生動(dòng)畫
表示開發(fā)者希望在不久后改變指定的屬性名或者使之產(chǎn)生動(dòng)畫。如果屬性名是簡寫，則代表所有與之對(duì)應(yīng)的簡寫或者全寫的屬性
will-change的使用
hover使用
不要直接寫在默認(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使用
var el = document.getElementById('element');
// 當(dāng)鼠標(biāo)移動(dòng)到該元素上時(shí)給該元素設(shè)置 will-change 屬性
el.addEventListener('mouseenter', hintBrowser);
// 當(dāng) CSS 動(dòng)畫結(jié)束后清除 will-change 屬性
el.addEventListener('animationEnd', removeHint);
function hintBrowser() {
// 填寫上那些你知道的，會(huì)在 CSS 動(dòng)畫中發(fā)生改變的 CSS 屬性名們
this.style.willChange = 'transform, opacity';
}
function removeHint() {
this.style.willChange = 'auto';
}如果某個(gè)應(yīng)用在按下鍵盤的時(shí)候會(huì)翻頁，比如相冊或者幻燈片一類的，它的頁面很大很復(fù)雜，此時(shí)在樣式表中寫上 will-change 是合適的。這會(huì)使瀏覽器提前準(zhǔn)備好過渡動(dòng)畫，當(dāng)鍵盤按下的時(shí)候就能立即看到靈活輕快的動(dòng)畫。
.slide {
will-change: transform;
}使用will-change的注意事項(xiàng)
不要將 will-change應(yīng)用到太多元素上：
瀏覽器已經(jīng)盡力嘗試去優(yōu)化一切可以優(yōu)化的東西了。有一些更強(qiáng)力的優(yōu)化，如果與 will-change 結(jié)合在一起的話，有可能會(huì)消耗很多機(jī)器資源，如果過度使用的話，可能導(dǎo)致頁面響應(yīng)緩慢或者消耗非常多的資源。
有節(jié)制地使用：
通常，當(dāng)元素恢復(fù)到初始狀態(tài)時(shí)，瀏覽器會(huì)丟棄掉之前做的優(yōu)化工作。但是如果直接在樣式表中顯式聲明了 will-change 屬性，則表示目標(biāo)元素可能會(huì)經(jīng)常變化，瀏覽器會(huì)將優(yōu)化工作保存得比之前更久。所以很好實(shí)踐是當(dāng)元素變化之前和之后通過腳本來切換 will-change 的值。
不要過早應(yīng)用 will-change優(yōu)化：
如果你的頁面在性能方面沒什么問題，則不要添加 will-change 屬性來榨取一丁點(diǎn)的速度。 will-change 的設(shè)計(jì)初衷是作為最后的優(yōu)化手段，用來嘗試解決現(xiàn)有的性能問題。它不應(yīng)該被用來預(yù)防性能問題。過度使用 will-change會(huì)導(dǎo)致大量的內(nèi)存占用，并會(huì)導(dǎo)致更復(fù)雜的渲染過程，因?yàn)闉g覽器會(huì)試圖準(zhǔn)備可能存在的變化過程。這會(huì)導(dǎo)致更嚴(yán)重的性能問題。
給它足夠的工作時(shí)間：
這個(gè)屬性是用來讓頁面開發(fā)者告知瀏覽器哪些屬性可能會(huì)變化的。然后瀏覽器可以選擇在變化發(fā)生前提前去做一些優(yōu)化工作。所以給瀏覽器一點(diǎn)時(shí)間去真正做這些優(yōu)化工作是非常重要的。使用時(shí)需要嘗試去找到一些方法提前一定時(shí)間獲知元素可能發(fā)生的變化，然后為它加上 will-change 屬性。
感謝各位的閱讀！關(guān)于“CSS前端頁面渲染優(yōu)化屬性will-change的使用方法”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
