标签：标签页 渲染 排列 是什么 同步 ram get length out
一直以来都是用css3来实现动画效果，一个是性能问题，第二个是js实现总不如css3流畅，但是最近发现了一个新大陆：requestAnimationFrame
requestAnimationFrame是什么？requestAnimationFrame()函数就是针对动画效果的API，你可以把它用在DOM上的风格变化或画布动画或WebGL中
requestAnimationFrame有什么好处？
浏览器可以优化并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。比如，通过requestAnimationFrame()，JS动画能够和CSS动画/变换或SVG SMIL动画同步发生。另外，如果在一个浏览器标签页里运行一个动画，当这个标签页不可见时，浏览器会暂停它，这会减少CPU，内存的压力，节省电池电量。
封装后的JS：判断使用4ms还是16ms的延迟，来最佳匹配60fps
(function() { var lastTime = 0; var vendors = [‘webkit‘, ‘moz‘]; for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) { window.requestAnimationFrame = window[vendors[x] + ‘RequestAnimationFrame‘]; window.cancelAnimationFrame = window[vendors[x] + ‘CancelAnimationFrame‘] || // name has changed in Webkit window[vendors[x] + ‘CancelRequestAnimationFrame‘]; } if (!window.requestAnimationFrame) { window.requestAnimationFrame = function(callback, element) { var currTime = new Date().getTime(); var timeToCall = Math.max(0, 16.7 - (currTime - lastTime)); var id = window.setTimeout(function() { callback(currTime + timeToCall); }, timeToCall); lastTime = currTime + timeToCall; return id; }; } if (!window.cancelAnimationFrame) { window.cancelAnimationFrame = function(id) { clearTimeout(id); }; } }());
demo：向上滚动
function funscroll(){
var scroll = $("#info-position").css("top");
if( scroll>-395){
scroll-=5;
}
$("#info-position").css("top",scroll+"px");
requestAnimationFrame(funscroll);
}
各种浏览器对requestAnimationFrame的支持情况
谷歌浏览器，火狐浏览器，IE10+都实现了这个函数，即使你的浏览器很古老，上面的对requestAnimationFrame封装也能让这个方法在IE8/9上不出错。
标签：标签页 渲染 排列 是什么 同步 ram get length out
原文地址：http://www.cnblogs.com/chaoli/p/6565530.html
