在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. 关于 android 中 postDelayed方法的讲解 (转载)

    转自:http://blog.csdn.net/xiabo851205/article/details/7991529 这是一种可以创建多线程消息的函数 使用方法: 1,首先创建一个Handler对象 ...

  2. 两分钟彻底让你明白Android Activity生命周期(图文)!(转载)

    转自:http://kb.cnblogs.com/page/70125/ 大家好,今天给大家详解一下Android中Activity的生命周期,我在前面也曾经讲过这方面的内容,但是像网上大多数文章一样 ...

  3. (水题)洛谷 - P1308 - 统计单词数

    https://www.luogu.org/problemnew/show/P1308 简单哈希一下判断,练练手. 注意fgets()的用法,第一个参数传存储位置,第二个参数传内存上限,第三个传std ...

  4. C++开发工程师面试题库 150~200道

    151.简述需求分析的过程和意义 152.网状.层次数据模型与关系数据模型的最大的区别是什末 153.软件质量保证体系是什末 国家标准中与质量保证管理相关的几个标准是什末 编号和全称是什末号和全称是什 ...

  5. 【Codeforces Round #411 (Div. 1)】Codeforces 804C Ice cream coloring (DFS)

    传送门 分析 这道题做了好长时间,题意就很难理解. 我们注意到这句话Vertices which have the i-th (1 ≤ i ≤ m) type of ice cream form a ...

  6. 修改 jq weui cityPicker.js原来的值

    1.对接后台接口,拿到返回来的值,注意数据格式要一样 var raw; $.ajax({ type: "GET", url: "/web/region/list.json ...

  7. 第十六篇 .NET高级技术之序列化

    .net framework的类库中提供了三个可以用于序列化和反序列化的类,分别为BinaryFormatter.SoapFormatter和XmlSerializer. BinaryFormatte ...

  8. 普通app自动化测试与手游app自动化测试的区别

    [转载] 手游自动化测试与App自动化测试技术上的区别 手游和App的开发技术不同,导致了两者的自动化测试技术完全不同.一般来说,安卓应用是使用Android SDK开发的,利用Java编写.那么在A ...

  9. 如何用Python在10分钟内建立一个预测模型

    转载自:https://baijia.baidu.com/s?old_id=307995 最近,我从孙子(指<孙子兵法>——译者注)那里学到了一些策略:速度和准备 “兵之情主速,乘人之不及 ...

  10. 浅析String

    浅析String String的设计结构: 首先我们看一下 String的源码 public final class String     implements java.io.Serializabl ...