CSS頁面渲染優化屬性will-change

前面的話   當咱們經過某些行爲(點擊、移動或滾動)觸發頁面進行大面積繪製的時候，瀏覽器每每是沒有準備的，只能被動使用CPU去計算與重繪，因爲沒有事先準備，應付渲染夠嗆，因而掉幀卡頓。而CSS屬性will-change爲web開發者提供了一種告知瀏覽器該元素會有哪些變化的方法，這樣瀏覽器能夠在元素屬性真正發生變化以前提早作好對應的優化準備工做。這種優化能夠將一部分複雜的計算工做提早準備好，使頁面的反應更爲快速靈敏。本文將介紹CSS屬性will-change
 
準備知識   GPU是圖形處理器，專門處理和繪製圖形相關的硬件。GPU是專爲執行復雜的數學和幾何計算而設計的，使得CPU從圖形處理的任務中解放出來，能夠執行其餘更多的系統任務
  所謂硬件加速，就是在計算機中把計算量很是大的工做分配給專門的硬件來處理，減輕CPU的工做量
  CSS的動畫、變形、漸變並不會自動觸發GPU加速，而是使用瀏覽器稍慢的軟件渲染引擎。在

transition

、

transform

和

animation

的世界裏，應該卸載進程到GPU以加速速度。只有3D變形會有本身的layer，而2D變形則不會
【Hack】
  使用

translateZ()

或

translate3d()

方法爲元素添加沒有變化的3D變形，騙取瀏覽器觸發硬件加速。可是，代價是這種狀況經過向它本身的層疊加元素，佔用了RAM和GPU的存儲空間，且沒法肯定空間釋放時間
 
語法 will-change
  功能: 提早通知瀏覽器元素將要作什麼動畫，讓瀏覽器提早準備合適的優化設置
  值: auto |

<animateable-feature>

  初始值: auto
  應用於: 全部元素
  繼承性: 無
  兼容性: IE13+、chrome49+、safari9.1+、IOS9.3+、Android52+
  auto表示沒有特別指定哪些屬性會變化，瀏覽器須要本身去猜，而後使用瀏覽器常用的一些常規方法優化
  

<animateable-feature>

能夠是如下值：
  

scroll-position

表示開發者但願在不久後改變滾動條的位置或者使之產生動畫
  

contents

表示開發者但願在不久後改變元素內容中的某些東西，或者使它們產生動畫
  

<custom-ident>

表示開發者但願在不久後改變指定的屬性名或者使之產生動畫。若是屬性名是簡寫，則表明全部與之對應的簡寫或者全寫的屬性
 
使用 【使用hover】
  不要像下面這樣直接寫在默認狀態中，由於will-change會一直掛着：

.will-change {
  will-change: transform;
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

  可讓父元素hover的時候，聲明will-change，這樣，移出的時候就會自動remove，觸發的範圍基本上是有效元素範圍

.will-change-parent:hover .will-change {
  will-change: transform;
}
.will-change {
  transition: transform 0.3s;
}
.will-change:hover {
  transform: scale(1.5);
}

【使用javascript腳本】

.sidebar {
  will-change: transform;
}

  以上示例在樣式表中直接添加了will-change屬性，會致使瀏覽器將對應的優化工做一直保存在內存中，這實際上是沒必要要的。下面展現如何使用腳本正確地應用

will-change

屬性

var el = document.getElementById('element');
// 當鼠標移動到該元素上時給該元素設置 will-change 屬性
el.addEventListener('mouseenter', hintBrowser);
// 當 CSS 動畫結束後清除 will-change 屬性
el.addEventListener('animationEnd', removeHint);
function hintBrowser() {
  // 填寫在CSS動畫中發生改變的CSS屬性名
  this.style.willChange = 'transform, opacity';
}
function removeHint() {
  this.style.willChange = 'auto';
}

【直接使用】
  可是，若是某個應用在按下鍵盤的時候會翻頁，好比相冊或者幻燈片一類，它的頁面很大很複雜，此時在樣式表中寫上will-change是合適的。這會使瀏覽器提早準備好過渡動畫，當鍵盤按下的時候就能即看到靈活輕快的動畫

.slide {
  will-change: transform;
}

 
注意事項   一、不要將will-change應用到太多元素上：瀏覽器已經盡力嘗試去優化一切能夠優化的東西了。有一些更強力的優化，若是與will-change結合在一塊兒的話，有可能會消耗不少機器資源，若是過分使用的話，可能致使頁面響應緩慢或者消耗很是多的資源
  二、有節制地使用：一般，當元素恢復到初始狀態時，瀏覽器會丟棄掉以前作的優化工做。可是若是直接在樣式表中顯式聲明瞭will-change屬性，則表示目標元素可能會常常變化，瀏覽器會將優化工做保存得比以前更久。因此最佳實踐是當元素變化以前和以後經過腳原本切換will-change的值
  三、不要過早應用will-change優化：若是頁面在性能方面沒什麼問題，則不要添加will-change屬性來榨取一丁點的速度。will-change的設計初衷是做爲最後的優化手段，用來嘗試解決現有的性能問題。它不該該被用來預防性能問題。過分使用will-change會致使大量的內存佔用，並會致使更復雜的渲染過程，由於瀏覽器會試圖準備可能存在的變化過程。這會致使更嚴重的性能問題
  四、給它足夠的工做時間：這個屬性是用來讓頁面開發者告知瀏覽器哪些屬性可能會變化的。而後瀏覽器能夠選擇在變化發生前提早去作一些優化工做。因此給瀏覽器一點時間去真正作這些優化工做是很是重要的。使用時須要嘗試去找到一些方法提早必定時間獲知元素可能發生的變化，而後爲它加上will-change屬性
轉載於猿2048:→《CSS頁面渲染優化屬性will-change》