文档章节

详细介绍HTML5新增的定时器requestAnimationFramerequestID = requestAnimationFrame(callback);

青石细雨一拖鞋
 青石细雨一拖鞋
发布于 2017/09/03 17:06
字数 885
阅读 26
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

        与setTimeoutsetInterval不同,requestAnimationFrame不需要设置时间间隔。这有什么好处呢?为什么requestAnimationFrame被称为神器呢?本文将详细介绍HTML5新增的定时器requestAnimationFrame .

引入

  计时器一直是javascript动画的核心技术。而编写动画循环的关键是要知道延迟时间多长合适。一方面,循环间隔必须足够短,这样才能让不同的动画效果显得平滑流畅;另一方面,循环间隔还要足够长,这样才能确保浏览器有能力渲染产生的变化

  大多数电脑显示器的刷新频率是60Hz,大概相当于每秒钟重绘60次。大多数浏览器都会对重绘操作加以限制,不超过显示器的重绘频率,因为即使超过那个频率用户体验也不会有提升。因此,最平滑动画的最佳循环间隔是1000ms/60,约等于16.6ms

  而setTimeout和setInterval的问题是,它们都不精确。它们的内在运行机制决定了时间间隔参数实际上只是指定了把动画代码添加到浏览器UI线程队列中以等待执行的时间。如果队列前面已经加入了其他任务,那动画代码就要等前面的任务完成后再执行

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

 

特点

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

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

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

 

使用

  requestAnimationFrame的用法与settimeout很相似,只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用。它返回一个整数,表示定时器的编号,这个值可以传递给cancelAnimationFrame用于取消这个函数的执行

requestID = requestAnimationFrame(callback); 
//控制台输出1和0
var timer = requestAnimationFrame(function(){
    console.log(0);
}); 
console.log(timer);//1

cancelAnimationFrame方法用于取消定时器

//控制台什么都不输出
var timer = requestAnimationFrame(function(){
    console.log(0);
}); 
cancelAnimationFrame(timer);

  也可以直接使用返回值进行取消

var timer = requestAnimationFrame(function(){
    console.log(0);
}); 
cancelAnimationFrame(1);

兼容

  IE9-浏览器不支持该方法,可以使用setTimeout来兼容

【简单兼容】

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame    ||
          function( callback ){
            window.setTimeout(callback, 1000 / 60);
          };
})();

【更全面的兼容方法】

(function() {
    var lastTime = 0;
    var vendors = ['webkit', 'moz'];
    for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
        window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
        window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||    
                                      window[vendors[x] + 'CancelRequestAnimationFrame'];
    }

    if (!window.requestAnimationFrame) {
        window.requestAnimationFrame = function(callback, element) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16.7 - (currTime - lastTime));
            var id = window.setTimeout(function() {
                callback(currTime + timeToCall);
            }, timeToCall);
            lastTime = currTime + timeToCall;
            return id;
        };
    }
    if (!window.cancelAnimationFrame) {
        window.cancelAnimationFrame = function(id) {
            clearTimeout(id);
        };
    }
}());

 

青石细雨一拖鞋
粉丝 0
博文 2
码字总数 170
作品 0
宜昌
程序员
私信 提问
加载中
请先登录后再评论。
中州韵输入法引擎--rimeime

Rime全名是「中州韵输入法引擎」,它不仅仅是一个输入法,而是一个输入法算法框架。Rime的基础架构十分精良,一套算法支持了拼音、双拼、注音、五笔、仓颉等所有音码和形码输入法,远比基于码...

tsl0922
2012/11/13
6.3K
2
HTML5移动页面框架--Junior

Junior 是一个前端的框架,用来构建 HTML5 的移动 Web 应用,外观跟原生应用一致,特点: 为移动性能优化的 CSS3 转换 使用 flickable.js 的可滑动旋转效果 集成 backbone.js 视图和路由 CS...

匿名
2013/01/05
4W
5
QtCipherSqlitePlugin

这是一个带有加密功能的 SQLite3 Qt 插件,可以同其它 SQL 插件一样在 Qt 程序中使用。Qt 原始携带的 SQLite 插件不带有加密功能,本插件则提供了加密功能,适合于保存密码等敏感信息。 详细...

devbean-豆子
2013/01/10
1.1K
0
C多线程网络库--xs

基于C多线程网络库,欢迎大家使用,例子在代码example目录下,以后我会再增加一些例子。 文档暂时没有,有问题请邮件我:-) 获取代码:https://github.com/xueguoliang/xs xs致力于1)多线程网...

薛国良
2013/05/01
4.4K
0
JS实现的1080p视频解码方案--ORBX.js

ORBX.js是Mozilla、OTOY、Autodesk和南加州大学联合开发的一款基于JavaScript和WebGL的HD编解码器,让1080p视频解码和云游戏都可以完全靠JS完成。这为HTML5高清视频提供了一种纯JavaScript替...

匿名
2013/05/07
2.4K
0

没有更多内容

加载失败,请刷新页面

加载更多

Hacker News 简讯 2020-08-12

最后更新时间: 2020-08-12 00:01 Single Page Applications using Rust - (sheshbabu.com) 使用Rust的单页应用程序 得分:126 | 评论:68 The case for why Google should be regulated as a ......

FalconChen
12分钟前
19
0
在关系数据库中存储分层数据有哪些选择? [关闭]

问题: Good Overviews 良好的概述 Generally speaking, you're making a decision between fast read times (for example, nested set) or fast write times (adjacency list). 一般来说,您......

fyin1314
昨天
7
0
创建myBatis项目

1、简介 1.1、核心组件 SqlSessionFactoryBuilder(构造器):根据配置信息或者代码生成SqlSessionFactory SqlSessionFactory(工厂接口):依靠工厂来生成SqlSession(会话) SqlSession(会话): ...

执键走天涯
昨天
5
0
Tomcat集群带来的问题和解决思路

Tomcat集群 存在问题 解决方案 基于Redis+Cookie+Jackson+Filter的原生解决集群Session共享问题 使用Spring Session零侵入解决Session共享 单点登录实现 Redis构建Session服务器 使用Redis+C...

code-ortaerc
昨天
17
0
小福利

点击有福利 本文分享自微信公众号 - V5codings(gh_c1ec2d16ec93)。 如有侵权,请联系 support@oschina.cn 删除。 本文参与“OSC源创计划”,欢迎正在阅读的你也加入,一起分享。...

V5codings
2019/11/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部