一篇文章带你制作 canvas 小游戏 (2)

window.requestAnimationFrame();

这个方法是,HTML5 专门为js实现动画效果提供的一个函数!(推荐大家使用)

setInterval 的劣势:
1.指定定时器的时间不准确  // 4ms /10ms
2.执行动画效果会造成性能的问题,如果页面中使用了多个定时器,每个定时器中都来操作dom元素,操作dom频繁了以后,会造成严重性能问题;

看性能: DOM 的重绘和重排(影响web程序的两个重要因素);
3.会造成丢帧的问题(浏览器刷新频率: 60HZ(一秒钟刷新60次)==>16.67毫秒的时间完成js效果,才不会卡!! 浏览器和定时器的刷新频率不一样,浏览器每次只能显示一帧,定时器过快会丢帧);

window.requestAnimationFrame();
能够每隔一段时间来调用一个回调函数来执行某段代码逻辑;
优势:
1. requestAnimationFrame 是根据当前浏览器的刷新频率来进行调用的(浏览器刷新一次,就会将所有 requestAnimationFrame中执行的回调函数执行一次,不会造成丢帧的问题)
2. 页面中所有的requestAnimationFrame 会在浏览器刷新的时候,一次性全部执行;(性能会有所提高);
3.因为requestAnimationFrame 方法会根据当前浏览器的刷新频率来执行,所以,事件是不固定的,但是,不会有问题;

requestAnimationFrame 语法:

var fn = function(){
//在函数的最后调用requestAnimationFrame 函数;
//函数接受一个函数参数,就是告诉浏览器下一次刷新的时候,调用fn
window.requestAnimationFrame(fn);

};

_________________