关于网页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占用就会产生一个很明显的区别了。。。