關於網頁3D切換的優化問題

如今咱們看到的不少網頁上其實有不少的動畫，這些動畫實現的效果也是各類各樣，這裏我總結了幾種關於動畫的性能優化方案，頗有可能不是很完善，可是我以爲已是我這段時間碰到的全部問題了。。。。

因爲咱們如今要在一些移動端上實現動畫效果，而移動端的設備每每沒有pc的配置那麼好，那麼怎麼辦呢，這個時候咱們只能對代碼來進行優化了，雖然我以爲這種方法是很反人類的，可是沒辦法，畢竟時代是在進步的，我詳細之後的移動設備配置也會慢慢地提高，好了，廢話很少說，我這裏總結了幾種方案

那麼總共有如下幾種：

1. 純css3.0實現

2. js控制操做dom實現

3. js控制操做css實現

4. js控制元素之間的class切換
   

1、自從css3.0出現後，不少網頁都開始加入了純css實現的動畫，這使得咱們的表現層與業務層實現了分離，固然，這樣使得咱們的代碼更加清晰了，也使得咱們的代碼後期更加好維護了，那麼具體是怎麼實現的呢？

其實說來也很簡單，就是用到了css3.0中的animation這個屬性，咱們來看一個簡單的實例

@keyframes myfirst
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: red;}
25%  {background: yellow;}
50%  {background: blue;}
100% {background: green;}
}

div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}

上面是一個最簡單的animation實例，這裏的主要功能就是分四個階段，將div動態地變換效果，

那麼用純css3.0實現的動畫效果有點在哪裏呢，這裏我總結了三個點：

1. 可以很是容易地建立簡單動畫，你甚至不須要了解JavaScript就能建立動畫。

2. 動畫運行效果良好，甚至在低性能的系統上，渲染引擎會使用跳幀或者其餘技術以保證動畫儘量的流暢。而使用JavaScript的動畫一般表現不佳（固然，算法合理仍是能夠很好地實現的）

3. 讓瀏覽器控制動畫序列，容許瀏覽器優化性能和效果。

若是有興趣想要仔細瞭解的話，能夠到animation去了解一下。。。。

2、如今大部分網頁其實仍是停留在js來控制的基礎之上，由於有不少動畫咱們要涉及到一些業務上的處理，因此就不得不用js來處理，固然，這也是最優的方法了

其實，在我看來沒有什麼說是最有的方法，由於在現實生產中，有不少狀況你是規避不了的，而你不得不面對的時候，就只能選擇一個相對來講比較好的方法，這纔是關鍵了。。。。

那麼，關於js來處理動畫的方式，我上面說了有3種，而這三種在我看來並無說是哪一個好，哪一個很差，由於針對的不一樣業務，咱們要實現的邏輯也是不同的，

第一種操做dom的方法，其實很簡單

setInterval(function(){
    var dom = document.getElementById('dom');
    dom.innerHtml = 'abc!!!';
},1000);

雖然我寫的這個過程有點簡單，可是其實就是想表達一下咱們這種方法的目的，動態地改變dom的值，

可是由於咱們要頻繁地改變dom，因此佔用cpu確定是會很高的，若是必定要說性能的話，我以爲這種方法算是最差的吧，

第二種操做元素css的方法

setInterval(function(){
    var dom = document.getElementById('dom');
    dom.style.color = '#ffffff';
},1000);

這個方法也很簡單，可是它操做的是dom的樣式，相對於dom節點上直接操做文本內容來講，這種方法佔用的資源就會少不少，節省了不少瀏覽器的cpu佔用率。

那麼若是咱們直接改變某個元素的樣式呢？

setTimeout(function(){
    var dom = document.getElementById('dom');
    dom.className = 'change';
},1000);

相比於直接修改元素的樣式，這種方法的cpu佔用率會更低，那麼有的朋友就會問，這是爲何呢？

其實緣由很簡單啦，由於css是有個預加載過程的，裏面原有的類，會預先加載在瀏覽器內，當你切換的時候，並不須要再次調用cpu來渲染頁面，多頁面中切換變多的時候，cpu佔用就會產生一個很明顯的區別了。。。