setTimeout、setInterval和requestAnimationFrame之间的区别

这里有一篇文章讲的是requestAnimationFrame:http://www.cnblogs.com/xiaohuochai/p/5777186.html
与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔,
大多数电脑显示器的刷新频率是60Hz,大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过那个频率用户体验也不会有提升。因此,最平滑动画的最佳循环间隔是1000ms/60,约等于16.6ms。
RAF采用的是系统时间间隔,不会因为前面的任务,不会影响RAF,但是如果前面的任务多的话,
会响应setTimeout和setInterval真正运行时的时间间隔。
而setTimeout和setInterval的问题是,它们都不精确。它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务,那动画代码就要等前面的任务完成后再执行

requestAnimationFrame采用系统时间间隔,保持最佳绘制效率,不会因为间隔时间过短,造成过度绘制,增加开销;也不会因为间隔时间太长,使用动画卡顿不流畅,让各种网页动画效果能够有一个统一的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果

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

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

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

图片说明

前端问题总结 文章被收录于专栏

总结一些前端常见的面试笔试题,来和大家分享鸭

全部评论

相关推荐

不愿透露姓名的神秘牛友
11-27 10:48
点赞 评论 收藏
分享
一名愚蠢的人类:多少games小鬼留下了羡慕的泪水
投递荣耀等公司10个岗位
点赞 评论 收藏
分享
评论
点赞
收藏
分享
正在热议
# 25届秋招总结 #
442240次浏览 4509人参与
# 春招别灰心,我们一人来一句鼓励 #
41913次浏览 531人参与
# 阿里云管培生offer #
120198次浏览 2219人参与
# 地方国企笔面经互助 #
7957次浏览 18人参与
# 同bg的你秋招战况如何? #
76585次浏览 561人参与
# 虾皮求职进展汇总 #
115376次浏览 886人参与
# 北方华创开奖 #
107421次浏览 599人参与
# 实习,投递多份简历没人回复怎么办 #
2454609次浏览 34856人参与
# 实习必须要去大厂吗? #
55761次浏览 961人参与
# 提前批简历挂麻了怎么办 #
149889次浏览 1977人参与
# 投递实习岗位前的准备 #
1195913次浏览 18548人参与
# 你投递的公司有几家约面了? #
33203次浏览 188人参与
# 双非本科求职如何逆袭 #
662189次浏览 7394人参与
# 如果公司给你放一天假,你会怎么度过? #
4751次浏览 55人参与
# 机械人春招想让哪家公司来捞你? #
157622次浏览 2267人参与
# 如果你有一天可以担任公司的CEO,你会做哪三件事? #
11535次浏览 284人参与
# 发工资后,你做的第一件事是什么 #
12659次浏览 62人参与
# 工作中,努力重要还是选择重要? #
35793次浏览 384人参与
# 参加完秋招的机械人,还参加春招吗? #
20120次浏览 240人参与
# 我的上岸简历长这样 #
452000次浏览 8088人参与
# 实习想申请秋招offer,能不能argue薪资 #
39289次浏览 314人参与
# 非技术岗是怎么找实习的 #
155864次浏览 2120人参与
牛客网
牛客企业服务