《JavaScript那些事》-requestAnimationFrame

《JavaScript那些事》- requestAnimationFrame

简单记录

主要使用代码

var runFrame;
function frame() {
  //运行函数
  done();
  //更新runFrame值，递归调用，可用闭包优化runFrame
  runFrame = requestAnimationFrame(frame);
}
//运行
runFrame = requestAnimationFrame(frame);

//停止
cancelAnimationFrame(runFrame);

使用requestAnimationFrame的优点

通过requestAnimationFrame的使用代码可以发现，其实requestAnimationFrame和普通的递归调用函数没什么区别。
但为什么还要使用requestAnimationFrame来实现动画效果呢？

1. 浏览器能够处理requestAnimationFrame函数交由GUI线程渲染
2. 浏览器能够将requestAnimationFrame函数中的dom处理整合成一次运行
3. 运行会发生在下一次重绘之前

浏览器能够更加优化动画执行代码