今天,在读javascript异步编程的js事件深入理解部分的时候,了解到了requestAnimationFrame 这个api,在这里记录一下。

原文:

setTimeout 和 setInterval 就是些不精确的计时工具。在Node中,如果只是想产生一个短时延迟,请使用 process.nextTick。在 浏 览 器 端 , 请 尝 试 使 用 垫 片 技 术 (shim ) ③ : 在 支 持requestAnimationFrame 的 浏 览 器 中 , 推 荐 使 用requestAnimationFrame;在不支持 requestAnimationFrame 的 浏览器中,使用setTimeout 。

requestAnimationFrame 为html5新增api,支持情况可以参考https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame

背景:

计时器一直是javascript动画的核心技术。而编写动画循环的关键是要知道延迟时间多长合适。一方面,循环间隔必须足够短,这样才能让不同的动画效果显得平滑流畅;另一方面,循环间隔还要足够长,这样才能确保浏览器有能力渲染产生的变化大多数电脑显示器的刷新频率是60Hz,大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过那个频率用户体验也不会有提升。因此,最平滑动画的最佳循环间隔是1000ms/60,约等于16.6ms而setTimeout和setInterval的问题是,它们都不精确。它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务,那动画代码就要等前面的任务完成后再执行requestAnimationFrame采用系统时间间隔,保持最佳绘制效率,不会因为间隔时间过短,造成过度绘制,增加开销;也不会因为间隔时间太长,使用动画卡顿不流畅,让各种网页动画效果能够有一个统一的刷新机制,从而节省系统资源,提高系统性能,改善视觉效果

特点:

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

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

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

使用:

window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用

参考文章

https://www.cnblogs.com/xiaohuochai/p/5777186.html

http://web.jobbole.com/91578/

遇见requestAnimationFrame的更多相关文章

  1. Be Better:遇见更好的自己-2016年记

    其实并不能找到好的词语来形容过去的一年,感觉就如此平淡的过了!没有了毕业的稚气,看事情淡了,少了一丝浮躁,多了一分认真.2016也许就是那句话-多读书,多看报,少吃零食多睡觉,而我更愿意说--Be B ...

  2. 动画requestAnimationFrame

    前言 在研究canvas的2D pixi.js库的时候,其动画的刷新都用requestAnimationFrame替代了setTimeout 或 setInterval 但是jQuery中还是采用了s ...

  3. 自建git node pm2 (不赘述,就说遇见的问题)

    //======================[git]部分 主题部分还是按照网上的办法进行安装. 安装的话  分为两个办法(一个是yum (contos办法)  或者sudo(ubuntu办法) ...

  4. 深入理解定时器系列——被誉为神器的requestAnimationFrame

    与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔.这有什么好处呢?为什么requestAnimationFrame被称为神器呢?本文将详 ...

  5. 我的前端故事----疯狂倒计时(requestAnimationFrame)

    很久没有更新博客了...为了双十一准备了不少活动,终于结束了,有时间静静的坐下来总结一下了,在活动中最常用的就是倒计时了,晚上也有很多倒计时的例子了,那么今天带来的是一个新的方法和思路. 既然要介绍新 ...

  6. 深入理解定时器系列第二篇——被誉为神器的requestAnimationFrame

    × 目录 [1]引入 [2]特点 [3]使用[4]兼容[5]应用 前面的话 与setTimeout和setInterval不同,requestAnimationFrame不需要设置时间间隔.这有什么好 ...

  7. requestAnimationFrame,Web中写动画的另一种选择

    HTML5/CSS3时代,我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition; 你还可以用通过在canv ...

  8. 大熊君学习html5系列之------requestAnimationFrame(实现动画的另一种方案)

    一,开篇分析 Hi,大家好!大熊君又和大家见面了,(*^__^*) 嘻嘻……,这系列文章主要是学习Html5相关的知识点,以学习API知识点为入口,由浅入深的引入实例, 让大家一步一步的体会" ...

  9. requestAnimationFrame与setInterval,setTimeout

    自打学习canvas动画以来,都说requestAnimationFrame好,就一直用,也没觉得有什么太过于特殊的地方,直到刚才,在写完前面的"小球碰撞墙壁----干掉误差"之后 ...

随机推荐

  1. BZOJ4488 JSOI2015最大公约数

    显然若右端点确定,gcd最多变化log次.容易想到对每一种gcd二分找最远端点,但这样就变成log^3了.注意到右端点右移时,只会造成一些gcd区间的合并,原本gcd相同的区间不可能分裂.由于区间只有 ...

  2. 2018牛客多校第三场 C.Shuffle Cards

    题意: 给出一段序列,每次将从第p个数开始的s个数移到最前面.求最终的序列是什么. 题解: Splay翻转模板题.存下板子. #include <bits/stdc++.h> using ...

  3. 安徽师大附中%你赛day7 T2 乘积 解题报告

    乘积 题目背景 \(\mathrm{Smart}\) 最近在潜心研究数学, 他发现了一类很有趣的数字, 叫做无平方因子数. 也就是这一类数字不能够被任意一个质数的平方整除, 比如\(6\).\(7\) ...

  4. npm错误总结

    You cannot publish over the previously published version 1.0.1." : xxx 发布时一定要修改package.json的版本号 ...

  5. 用JQuery的$.getJSON发起跨域Ajax请求

    jQuery中常用getJSON来调用并获取远程的JSON字符串,将其转换为JSON对象,如果成功,则执行回调函数.原型如下: jQuery.getJSON( url, [data], [callba ...

  6. codeforces 1060 B

    https://codeforces.com/contest/1060/problem/B 题意:给你一个数C ,你要找到两个数A.B,使得A+B=C并且A的每个位的数的和最大,求最大的和是多少 题解 ...

  7. Hibernate中inverse、cascade的说明

    一: 前沿:刚刚学习hibernate时,对于inverse很是纠结,不知道什么时候该用什么时候不该用,在网上找了一些资料,说的也很含糊,我都不知道如果写了"inverse=true&quo ...

  8. HDU 1395

    2^x mod n = 1 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Tot ...

  9. eclipse更改web项目的WebContent目录

    在使用eclipse 中 , 相信大家比我更是轻车熟路了 ( 我平常一般用 Intellij idea 的 ), 下面讲解一下在eclipse web项目中 , 如何设置 webroot 目录指向问题 ...

  10. 【uva1380 - 一个调度问题】思路题+树形dp

    [题意] 有n<=200个恰好需要一天完成的任务,要求用最少的时间完成所有任务.任务可以同时完成.但是有一些约束,分有向和无向两种,其中A-->B表示A必须在B前面完成,而A--B表示A和 ...