遇见requestAnimationFrame

今天，在读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/

转载于:https://www.cnblogs.com/wuyuchao/p/8625140.html

遇见requestAnimationFrame相关推荐

当莎士比亚遇见Google Flax：教你用字符级语言模型和归递神经网络写“莎士比亚”式句子...
作者 | Fabian Deuser 译者 | 天道酬勤责编 | Carol 出品 | AI科技大本营(ID:rgznai100) 有些人生来伟大,有些人成就伟大,而另一些人则拥有伟大. -- 威廉 ...
Nibiru Open Day，OZO 遇见 DigiArtist 国际数字艺术展
ChinaJoy 首日,Nibiru 带着 OZO 在上海记录了一场有气质.有内涵的艺术展. 中国国际数码互动娱乐展览会(简称:ChinaJoy)于 27 日在上海隆重举办.NibiruOpen Da ...
requestAnimationFrame，Web中写动画的另一种选择
HTML5/CSS3时代,我们要在web里做动画选择其实已经很多了: 你可以用CSS3的animattion+keyframes; 你也可以用css3的transition; 你还可以用通过在canv ...
javascript requestAnimationFrame 解决 setTimeout、setInterval 时间不准的方法。
javascript requestAnimationFrame 解决 setTimeout.setInterval 时间不准的方法. 取代 setInterval <!DOCTYPE html ...
[转]ghost手动备份及遇见的问题
昨天才发现在网上广为流传的ghost居然是赛门铁克开发的,百度百科资料介绍硬盘分区魔法大师也是出自之手,这家公司真是了得啊! ghost自动备份那个比较简单,手动备份的教程请参考:手动备份 GHOST ...
动画requestAnimationFrame
前言在研究canvas的2D pixi.js库的时候,其动画的刷新都用requestAnimationFrame替代了setTimeout 或 setInterval 但是jQuery中还是采用了s ...
神奇的requestAnimationFrame
引入计时器一直是JavaScript动画的核心技术.而编写动画循环的关键是要知道延迟时间多长合适.一方面,循环间隔必须足够短,这样才能让不同的动画效果显得平滑流畅:另一方面,循环间隔还要足够长,这样 ...
window.requestAnimationFrame
今天小猪在看一个html5的demo时一直在找他的动画是怎么实现的,按照我的理解就应该是调用setInterval来循环调用动画函数来实现.但是在Demo中就是找不到这个函数.干着急的小猪只好一步一步 ...
你需要知道的requestAnimationFrame
你需要知道的requestAnimationFrame 随着前端的发展,css已经能够实现非常多的动画特效,但是仍然存在css无法完成的动画任务(比如页面滚动),通常的解决方案都是使用js中的setI ...

遇见requestAnimationFrame

遇见requestAnimationFrame相关推荐

最新文章

热门文章