传统的定时器，异步编程

setTimeout(),setInterval()等

缺点：当同步的代码比较多的时候，不能保证异步定时器的任务能在指定的时间执行。

例如：

在第100行执行代码 setTimeout(()=>{console.log(1)},1000)，1s后执行里面函数

但是后面可能有10000行代码+很多计算的任务，例如循环遍历，那么1s后就无法输出console.log(1)

可能要到2s甚至更久

setInterval跟上面同理 当同步代码比较多时，不确保每次能在一样的间隔执行代码，

如果是动画，那么可能会掉帧

ES6的异步编程：

promise generator async

 new promise((resolve,reject)=>{ resolve() }).then()....

缺点： 仍然没有摆脱回掉函数，虽然改善了回掉地狱

generator函数 调用next()执行到下一个yeild的代码内容，如果传入参数则作为上一个`yield`的返回值。

缺点：不够自动化

async await

只有async函数内部可以用await,将异步代码变成同步书写，但是由于async函数本身返回一个promise,也很容易产生async嵌套地狱

requestAnimationFrame和requestIdleCallback

传统的JAVAscript 动画是通过定时器 setTimeout 或者 setInterval 实现的。但是定时器动画一直存在两个问题

第一个问题就是动画的循时间环间隔不好确定，设置长了动画显得不够平滑流畅，设置短了浏览器的重绘频率会达到瓶颈，推荐的最佳循环间隔是17ms（大多数电脑的显示器刷新频率是60Hz，1000ms/60）；

第二个问题是定时器第二个时间参数只是指定了多久后将动画任务添加到浏览器的UI线程队列中，如果UI线程处于忙碌状态，那么动画不会立刻执行。为了解决这些问题，H5 中加入了 requestAnimationFrame以及requestIdleCallback。

requestAnimationFrame 会把每一帧中的所有 DOM 操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率

在隐藏或不可见的元素中，requestAnimationFrame 将不会进行重绘或回流，这当然就意味着更少的 CPU、GPU 和内存使用量。

requestAnimationFrame 是由浏览器专门为动画提供的 API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了 CPU 开销。