requestAnimationFrame()
1.早期的动画 我们除了使用css以外,就是settimeout和setinterval了,但是无论是settimeout还是setinterval都不是十分精确,为他们传入的第二个参数,其实只是制指定了把动画的代码添加到浏览器UI线程队列中以等待执行的时间,如果队列前面还有已经加入的其它任务,并且没有完成,那么就还要等之前的任务都执行完了之后才能执行
2.并且还有一个循环间隔的问题 一般电脑的刷新频率是60hz,1000ms/60 = 17ms 相当于17ms就要刷新一次,但是尼,甚多浏览器的计时精度其实都不是以每ms计的 所以无论我们怎么写 都会出现掉帧的现象(也就是浏览器的渲染时间间隔大于了 setinterval的时间间隔),都没办法精确
3.所以便出现了requestAnimationFrame,对于requestAnimationFrame来说便是跟着浏览器的渲染脚步走的,浏览器即将要渲染的时候,会执行这个函数,所以不会出现过度重绘或者是掉帧这种情况,用法就自己查api了
题外话:
为什么大家都提倡能用css解决的问题为什么别去动js尼,因为js比较笨,它不知道浏览器什么时候渲染,但是css知道,所以CSS3 transition或animation动画也是走的一样的绘制原理,和浏览器的刷新频率一致,所以才是大家口中的高效
遇到一个问题
requestAnimationFrame(this.render) 内部会改变this的指向到window
需要自己绑定
requestAnimationFrame(this.render.bind(this))
网友评论