从底层来了解setTimeout、setInterval和requestAnimationFrame
博客专区 > W-Shian 的博客 > 博客详情
从底层来了解setTimeout、setInterval和requestAnimationFrame
W-Shian 发表于2年前
从底层来了解setTimeout、setInterval和requestAnimationFrame
  • 发表于 2年前
  • 阅读 32
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

摘要: setTimeout、setInterval和requestAnimationFrame区别和实现机制!

平时搜索关于setTimeout、setInterval和requestAnimationFrame的相关资料,大多只是介绍其用法,对于背后的涉及的原理很少有介绍到,有的也是大神们粗略简单的讲解下,看的人让人迷糊。。

这里介绍一下关于这三个东西:

        setTimeout、setInterval的功能是在每个时间间隔之后一次性或者重复多次执行一段JavaScript代码(就是回调函数)

        而JavaScript引擎和渲染引擎webkit为了协同工作能达到一个更好的效果,所以引入了requestAnimationFrame

关于setTimeout、setInterval的特点:

       · setTimeout、setInterval从不考虑浏览器内部发生了什么事,它们只要求浏览器在某个时间之后来调用回调函数,无论浏览器很繁忙或者页面被隐藏

        · setTimeout、setInterval不管浏览器能不能做到,比如屏幕的刷新率是60帧/s(60Hz),但是间隔是5毫秒(1000 / 5 = 200Hz),用户看不到目标效果,毫无意义而且浪费CPU资源。

        · 一个页面有多个setTimeout、setInterval事件,会造成页面需要多次刷新,性能低下 ,并且代码难以合并一起,需要一个事件一个函数。

再来看看requestAnimationFrame:

        requestAnimationFrame会申请绘制下一帧,只是执行时间由浏览器决定,浏览器会在绘制下一帧前执行回调函数,这样不会造成资源浪费!

        事件函数无需合并,调用window.requestAnimationFrame()后浏览器会统一刷新

一些建议:

        回调函数不要太大,尽可能的简单,否则会影响页面的响应和绘制频率

    

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 0
博文 1
码字总数 434
×
W-Shian
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: