在requestAnimationFrame出现之前,我们一般都用setTimeout和setInterval,那么html5为什么新增一个requestAnimationFrame,他的出现是为了解决什么问题?

优势与特点:

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

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

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

一句话就是:这玩意性能高,不会卡屏,根据不同的浏览器自动调整帧率。如果看不懂或者不理解,也没有什么关系,这玩意跟浏览器渲染原理有关。我们先学会使用它!

如何使用requestAnimationFrame?

使用方式跟定时器setTimeout差不多,不同之处在于,他不需要设置时间间隔参数

  1. var timer = requestAnimationFrame( function(){
  2. console.log( '定时器代码' );
  3. } );
  1. cancelAnimationFrame( timer ); //取消定时器
  2.  
  3. 文章来源 https://blog.csdn.net/qq3401247010/article/details/78135534

html5新增的定时器requestAnimationFrame的更多相关文章

  1. [js高手之路] html5新增的定时器requestAnimationFrame实战进度条

    在requestAnimationFrame出现之前,我们一般都用setTimeout和setInterval,那么html5为什么新增一个requestAnimationFrame,他的出现是为了解 ...

  2. HTML5新特性-- -定时器

    一.定时器:一次性定时器/周期性定时器 #requestAnimationFrame 智能定时器 #此定时器主要使用范围:动画和游戏中 特点: setTimeout(fn,500); setInter ...

  3. HTML5 学习总结(二)——HTML5新增属性与表单元素

    一.HTML5新增属性 1.1.contextmenu contextmenu的作用是指定右键菜单. <!DOCTYPE html> <html> <head> & ...

  4. HTML5新增及移除的元素

    HTML经过10多年的发展,其元素经历了废弃与不断重新定义的过程.为了更好的处理现在的互联网应用,HTML5新增了图形绘制.多媒体播放.页面结构.应用程序存储.网络工作等新元素.http://hove ...

  5. HTML5 学习笔记(二)——HTML5新增属性与表单元素

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  6. 过段时间逐步使用HTML5新增的web worker等内容

    想来快2017年了,2013年前的手机应该很少有人用了,以后逐渐使用HTML5新增的高级API吧. 先把web worker的内容再熟悉一下,因为微软虚拟学院的'面向有经验开发人员的 JavaScri ...

  7. HTML5新增标签与属性

    目录 一.HTML5新增属性 1.1.contextmenu 1.2.contentEditable 1.3.hidden 1.4.draggable 1.5.data-* 1.6.placehold ...

  8. 【原】HTML5 新增的结构元素——能用并不代表对了

    做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.html ...

  9. HTML5探秘:用requestAnimationFrame优化Web动画

    本文转载自: HTML5探秘:用requestAnimationFrame优化Web动画

随机推荐

  1. 【华为2016上机试题C++】最高分是多少

    [编程题] 最高分是多少 时间限制:1秒 空间限制:65536K 老师想知道从某某同学当中,分数最高的是多少,现在请你编程模拟老师的询问.当然,老师有时候需要更新某位同学的成绩. 输入描述: 输入包括 ...

  2. HDU6050: Funny Function(推公式+矩阵快速幂)

    传送门 题意 利用给出的式子求\(F_{m,1}\) 分析 直接推公式(都是找规律大佬) \(n为偶数,F_{m,1}=\frac{2(2^n-1)^{m-1}}3\) \(n为奇数,F_{m,1}= ...

  3. dwr学习 之 一、dwr+spring的简单集成

    1. 环境搭建 我采用的环境为SpringMVC + myBatis + mySql + maven: 关于使用Eclipse构建Maven的SpringMVC项目,请参考: http://limin ...

  4. SQL Server 查询入门

    普通查询跟带条件的查询 声明:这里我将用通俗易懂的语言去教大家如何理解 SQL Server里的代码. 实例: 1.查询学生表中所有的信息 select * from Student 下面是我的理解 ...

  5. NOIp2016 蚯蚓 【二叉堆/答案单调性】By cellur925

    题目传送门 $Sol$ $50pts$:我们考虑$q==0$的情况,每次在所有的蚯蚓中找到一只长度最大的,这非常二叉堆.所以我们可以用一个优先队列,随便水一下就有50分.($NOIp$的分真这么好拿? ...

  6. vlc media player

    还是很好用的目前来看 倍速播放: [      减速播放 ]      加速播放 =     恢复原速度

  7. C# 中使用Image.FromFile(string path)后,提示该文件正在被另一进程使用XXX的问题

    C# 中使用Image.FromFile(string path)后,提示该文件正在被另一进程使用XXX的问题 C# 中使用Image.FromFile(string path)后,提示该文件正在被另 ...

  8. Window下完全卸载删除Nodejs

    如何从Windows中删除Node.js: 1.从卸载程序卸载程序和功能. 2.重新启动(或者您可能会从任务管理器中杀死所有与节点相关的进程). 3.寻找这些文件夹并删除它们(及其内容)(如果还有). ...

  9. background-size属性

    background-size:属性有 auto:length :百分比 length 如:10px 20px 固定的 或者是写成一个 ,10px  另外一个就默认为 auto; 写成百分比的形式 是 ...

  10. python3_linux安装

    python安装包地址 https://www.python.org/ftp/python/ 如果没有c complie,就安装: yum -y install gcc gcc-c++ 在编译安装之前 ...