csss3屬性 — will-change

1. CPU和GPU

• CPU即中央處理器，它的功能主要是解釋計算機指令以及處理計算機軟件中的數據,也被稱爲主板。

• GPU即圖形處理器，是與處理和繪製圖形相關的硬件。GPU是專爲執行復雜的數學和幾何計算而設計的，有了它，CPU就從圖形處理的任務中解放出來，能夠執行其餘更多的系統任務

• 硬件加速（或者說GPU加速）是指在計算機中透過把計算量很是大的工做分配給專門的硬件來處理來減輕CPU的工做量的技術。在CSS transition, transform和animation的世界裏，他暗示咱們應該卸載進程到GPU，所以加快速度。這種狀況經過向它本身的層疊加元素，當加載動畫的時候能夠加速渲染。

• 硬件加速依賴於瀏覽器渲染頁面使用的layering model，當特定的操做（CSS 3D變形）做用於頁面上的一個元素，元素移動到它本身的layer，在這個layer中元素合一不受頁面其餘元素的干擾獨立渲染，而後複合到頁面中去。在這種隔離內容渲染的工做方式下，若是頁面的變化僅僅是該元素的變形，其他部分沒必要被從新渲染，這會帶來顯著的速度優點。值得注意的是只有3D變形會有本身的layer，2D變形不會。

• CSS的動畫、變形、漸變並不會自動的觸發GPU加速，而是使用瀏覽器稍慢的軟件渲染引擎。然而一些瀏覽器提供了hardware acceleration by means of certain properties來獲取更高的渲染性能。 舉個例子，opacity屬性是幾個可以加速的屬性之一，由於GPU能夠方便的處理。基本上任何層的透明度漸變瀏覽器都會交給GPU處理來加速。除了opacity可以使用GPU處理的就是CSS 3D變形了

2. translateZ() (or translate3d()) Hack

咱們都經過translateZ()或者translate3d() hack來騙取瀏覽器觸發硬件加速，具體作法就是爲元素添加沒有變化的3D變形，好比元素在2維空間能夠經過添加如下CSS來硬件加速

transform: translate3d(0, 0, 0);

然而強制使用hack方式建立layer並非長久之計，建立layer的技術可使頁面加速，可是也有代價，它們佔用RAM和GPU存儲空間（考慮到移動設備的存儲容量有限），因此必須當心使用，確保這麼作真的對頁面渲染有所幫助。爲了不建立layer的hacks，一個容許咱們提早通知瀏覽器咱們將對元素作何種變化的CSS屬性被引入，這樣瀏覽器能夠優化處理元素渲染的方式，爲元素提早準備昂貴的動畫處理操做，這就是wiil-change屬性。

3.wiil-change

• will-change屬性能夠提早通知瀏覽器咱們要對元素作什麼動畫，這樣瀏覽器能夠提早準備合適的優化設置。這樣能夠避免對頁面響應速度有重要影響的昂貴成本。元素能夠更快的被改變，渲染的也更快，這樣頁面能夠快速更新，表現的更加流暢。

• 當對於素使用 CSS 3D變形時，元素及其內容能夠在合成到頁面以前被建立到咱們以前說的layer。然而把元素放到layer中是個昂貴的操做，這將會致使變形動畫延遲一個課件的瞬間，也就是flicker
  爲了不這種延時，咱們能夠在發生以前通知瀏覽器，這樣瀏覽器會有必定的時間去準備這些變化，當發生的時候layer已經準備好了，這樣動畫酒會很流暢，不會閃屏。

will-change: transform;

能夠寫多個屬性變化，逗號隔開

will-change: transform, opacity;

注意事項：

• 不要將 will-change 應用到太多元素上：瀏覽器已經盡力嘗試去優化一切能夠優化的東西了。有一些更強力的優化，若是與 will-change 結合在一塊兒的話，有可能會消耗不少機器資源，若是過分使用的話，可能致使頁面響應緩慢或者消耗很是多的資源。濫用會使頁面崩潰。。。

*,
*::before,
*::after {
    will-change: all;
}

雖然看起來很屌，但其實對頁面渲染傷害很大，這樣的規則設了和沒設沒什麼區別，瀏覽器原本就嘗試最優的渲染全部元素，就等於你讓老師重點照顧班裏每一個同窗同樣，就是廢話！

其實這甚至是有害的，由於一些操做會佔用太多的資源，甚至會致使頁面奔潰，就等於強制要求老師爲每一個學生補課，累死了。。。

• 有節制地使用：一般，當元素恢復到初始狀態時，瀏覽器會丟棄掉以前作的優化工做。可是若是直接在樣式表中顯式聲明瞭 will-change 屬性，則表示目標元素可能會常常變化，瀏覽器會將優化工做保存得比以前更久。因此最佳實踐是當元素變化以前和以後經過腳原本切換 will-change 的值。

• 不要過早應用 will-change 優化：若是你的頁面在性能方面沒什麼問題，則不要添加 will-change 屬性來榨取一丁點的速度。 will-change 的設計初衷是做爲最後的優化手段，用來嘗試解決現有的性能問題。它不該該被用來預防性能問題。過分使用 will-change 會致使大量的內存佔用，並會致使更復雜的渲染過程，由於瀏覽器會試圖準備可能存在的變化過程。這會致使更嚴重的性能問題。

• 給它足夠的工做時間：這個屬性是用來讓頁面開發者告知瀏覽器哪些屬性可能會變化的。而後瀏覽器能夠選擇在變化發生前提早去作一些優化工做。因此給瀏覽器一點時間去真正作這些優化工做是很是重要的。使用時須要嘗試去找到一些方法提早必定時間獲知元素可能發生的變化，而後爲它加上 will-change 屬性。

在變化前當即爲元素添加will-change幾乎沒有做用，可能還不如不設置，由於會致使新的layer建立,以下：

.element:hover {
    will-change: transform;
    transition: transform 2s;
    transform: rotate(30deg) scale(1.5);
}

須要給瀏覽器足夠的時間，以下：

.element {
    /* style rules */
    transition: transform 1s ease-out;
}
.element:hover {
    will-change: transform;
}
.element:active {
    transform: rotateY(180deg);
}

will-change顧名思義，通知瀏覽器即將發生的變化，而不是正在發生的變化。使用will-change，咱們要求瀏覽器重點照顧咱們聲明的元素，爲了這個瀏覽器須要必定的時間來組織優化操做，這樣當變化發生的時候，優化才能沒有延遲的做用到元素

語法：

/* 關鍵字值 */
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;
 
## auto ## 
表示沒有特別指定哪些屬性會變化，瀏覽器須要本身去猜，而後使用瀏覽器常用的一些常規方法優化。
## <animateable-feature> ##
 1) scroll-position 告訴瀏覽器,要不久後動畫啦（改變滾動條的位置或者使之產生動畫）
 2) contents:告訴瀏覽器 不久後改變元素內容中的某些東西，或者使它們產生動畫。
## <custom-ident> ## 
不久後改變指定的屬性名或者使之產生動畫。若是屬性名是簡寫，則表明全部與之對應的簡寫或者全寫的屬性。

瀏覽器兼容性：

Desktop

Feature	Chrome	Firefox (Gecko)	Internet Explorer	Opera	Safari (WebKit)
Basic support	36	36 (36)[1]	未實現	24	未實現

Mobile

Feature	Android	Firefox Mobile (Gecko)	IE Phone	Opera Mobile	Safari Mobile
Basic support	37	36.0 (36) [1]	未實現	未實現	未實現

【MARK】 文檔以整理記錄爲主，若有錯誤，歡迎指出喲，你們一塊兒來學習...