关于requestAnimationFrame()和cancelAnimationFrame()与定时器之间的比较

原文链接： https://www.mk2048.com/blog/blog.php?id=h0khkkh0ic0j&title=%E5%85%B3%E4%BA%8ErequestAnimationFrame%28%29%E5%92%8CcancelAnimationFrame%28%29%E4%B8%8E%E5%AE%9A%E6%97%B6%E5%99%A8%E4%B9%8B%E9%97%B4%E7%9A%84%E6%AF%94%E8%BE%83

在渲染页面动画的时候，其实也没有必要用定时器（setInterval），其实requestAnimationFrame()和cancelAnimationFrame()也能达到相应的效果，他是HTML5中专门为 js 实现动画效果提供的一个方法。

   requestAnimationFrame() 
 

   1 这个方法不需要我们指定时间间隔就能实现动画效果； 
 

   2 浏览器每次刷新，都会调用 requestAnimationFrame 指定的回调函数； 
 

   3 如果有多个 requestAnimationFrame ，那么在这一次渲染过程中，会将所有的DOM操作一次性处理，这样就提高了DOM渲染的性能。 
 

 
   //开启动画
var animationID=requestAnimationFrame(callback);
//关闭动画
window.cancelAnimationFrame(animationID); 
  
    animate()
function animate() {
  $("img").css("left", -index * width);
  $("body").css("background-position", -t * 5   "px center")
  index  ;
  t  ;
  if (index >= 3) {
    index = 0;
  }
  requestAnimationFrame(animate);
}       
   
   setInterval / setTimeout存在的问题： 
  
    1 指定的之间间隔不准确 
  
    2 如果页面中有多个定时器，每个定时器都会操作DOM，那么会造成性能问题 
  
    重绘和重排（DOM渲染） 
  
    3 造成动画丢帧 
  
    浏览器刷新一次，而setInterval 执行了两次，那么前面一帧就丢掉了 
  
    这样就会让动画不完整 
  
    屏幕的刷新频率： 60HZ（赫兹） 1秒钟刷新60次 
  
    人眼能够识别的最小频率是：60HZ，如果比 60赫兹小了，那么人眼就看到卡顿了 
  
    60HZ 也是决定应用程序是否卡顿的一个指标！ 
  
    1s / 60 ≈ 16.67ms

更多专业前端知识，请上【猿2048】www.mk2048.com

关于requestAnimationFrame()和cancelAnimationFrame()与定时器之间的比较

猜你喜欢