传统的定时器,异步编程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 开销 。
推荐阅读
- 我国最早的一部天书 仓颉造字出自于哪本书
- 小程序获取用户位置
- 简单web服务器的实现思路
- 华为nova5pro和mate20pro哪个性价比高 华为最值得入手的5款手机2020
- 彻底搞懂java程序的初始化顺序
- 快手主页上的快手小店是怎么设置的 快手小店怎么上传单号
- java框架技能提升:6个国内优秀Java后台管理框架的开源项目
- 揭秘百青藤项目的玩法套路
- 深入探讨 MySQL 的 order by 优化
- 泡茶的浓淡看好茶