javascript与css3动画学习笔记

　　当Html5,css3已渐渐成为主流的时候，我还非常习惯的用js去做一些简单的动画。因为在桌面浏览器上， 并非所有的都支持css3。用户也倒是很奇怪，用户习惯并不是每个用户都可以被培养。总有不少人会觉得win7.win8没xp好用。但手机方面就大不一样了，手机浏览器对html5和css3的支持还是很不错的。但手机硬件处理能力却又十分有限。在四核、八核手机横行的今天，依然有像我这样使用双核或单核手机的。js虽好，单奈何接触不多，调不好那种感觉。一个简单的页面滑动，在i7的pc上运行十分流畅，可是，在我的双核手机上就卡、顿、卡、顿。令人十分郁闷。为此，我也是寻找了很久很久，看了很多很多。终于在不就之前，找到了一种还算简单的方法：使用css3去执行动画。

　　在以前，对于动画除了Jquery的animate等动画函数外，更多的是使用setTimeout,setInterval，这样循环的去改变一个元素的margin、width、top等属性。也正是如此，才有了我的困惑。

　　首先，setTimeout,setInterval 这货并非你设置0ms它就能一直一直的去执行。曾经在iscroll里调试的时候无意中发现了这个秘密。原来Timer延时的计算依靠的是浏览器的内置时钟，而时钟的精确度又取决于时钟更新的频率。IE8及其之前的IE版本更新间隔为15.6毫秒。完了，我想它10ms执行1px位移，它还不能准时的干这事。

　　而卡又是怎么回事呢？卡，因为代码写的不好。毕竟js是单线程的，一旦有耗时的动作那么UI就可能不响应了。虽然我们使用了setTimeout，但正是因为setTimeout让我们看上去界面没死可动作却又不流畅了。因为这次setTimeout执行之后，在下次执行前，中间这个间隔里很可能遇到另一个耗时的动作，那么，setTimeout的执行就无限后延。然后呢？卡！然而，卡还能有下一个原因，改变原始属性时不小心触发浏览器Layout（即：重布局）。这个问题说它不耗时呢，却又耗时，说它耗时呢，很多时候却又可以忽略。但很多时候其实是不能忽略的。

　　除了上面这两段，还有一个问题，就是在很多手机上总感觉是一帧一帧的，而且还可能是一帧长一帧短。这真是能把人都搞废的节奏。为何会这样呢，依然和settimeout的推迟有一定的关系。丢帧。这个问题有涉及到显示器的刷新频率问题。实在太复杂了。

 

　　最后选择了CSS3，js动态的改变元素的属性，使用transition来控制动画执行时间。举个例子：

<div id="test" style="transition:all 1s ease; width:100px;" ></div>

js:

$("#test").width(200);

　

　　这样1秒之后这个div的宽度会变成200px。不是孙悟空变桃子一样瞬间变大，慢慢的赶脚，不卡不顿。而且使用css动画有个好处，它不受耗时js的影响。虽然浏览器中UI线程与js线程是互斥，但这一点对css动画不成立，并且很多浏览器还能启用硬件加速（比如：Chrome）。虽然浏览器重布局普通情况下感觉不是很明显，但还是应该尽量避免大面积的重布局。so在动画元素上加上-webkit-transform: translateZ(0);或者-webkit-transform: translate3d(0,0,0);这样浏览器会独立渲染这一层。即便是重布局无法避免，这样面积也小些。而使用translate取代margin也确实是一个十分明智的决定。

　　详细资料传送门 Javascript高性能动画与页面渲染

　　最后附上一些常用的改变时会触发重布局的属性：  
 　　

　　 width 
 　　height 
 　　padding 
 　　margin 
 　　display 
 　　border-width 
 　　border 
 　　min-height

 

　　不足之处烦请补充，谅解。