深入理解HTML5定时器requestAnimationFrame的使用


Posted in HTML / CSS onDecember 12, 2018

前言

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

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

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

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

特点

  • requestAnimationFrame会把每一帧中的所有DOM操作集中起来,在一次重绘或回流中就完成,并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率。
  • 在隐藏或不可见的元素中,requestAnimationFrame将不会进行重绘或回流,这当然就意味着更少的CPU、GPU和内存使用量。
  • requestAnimationFrame是由浏览器专门为动画提供的API,在运行时浏览器会自动优化方法的调用,并且如果页面不是激活状态下的话,动画会自动暂停,有效节省了CPU开销。

用法

requestAnimationFrame方法将一个callback作为参数,回调函数会被传入一个参数,DOMHighResTimeStamp,指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。返回值是一个请求 ID,表示回调列表中唯一的标识。可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。

requestID = window.requestAnimationFrame(callback);

利用这个api,可以将某些代码放到下一次重新渲染时执行,避免短时间内触发大量reflow。

例如页面滚动事件(scroll)的回调函数就很适合使用这个api, 将回调操作推迟到下一次重新渲染。但需要注意的是requestAnimationFrame 不管理回调函数,即在回调被执行前,多次调用带有同一回调函数的 requestAnimationFrame,会导致回调在同一帧中执行多次。最简单的,可以用节流函数来解决这个问题,也可以想办法让requestAnimationFrame的队列里同样的回调函数只有一个:

let scheduledAnimationFrame = false;
document.body.onscroll = () => {
    if (scheduledAnimationFrame) return;
    scheduledAnimationFrame = true;
    window.requestAnimationFrame(() => {
        scheduledAnimationFrame = false;
        // do something
    });
};

当然,最佳的应用场景还是在帧动画里,可以大幅优化性能。

面试题

如何渲染几万条数据并不卡住界面

这道题考察了如何在不卡住页面的情况下渲染数据,也就是说不能一次性将几万条都渲染出来,而应该一次渲染部分 DOM,那么就可以通过 requestAnimationFrame 来每 16 ms 刷新一次。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <ul>控件</ul>
  <script>
    setTimeout(() => {
      // 插入十万条数据
      const total = 100000
      // 一次插入 20 条,如果觉得性能不好就减少
      const once = 20
      // 渲染数据总共需要几次
      const loopCount = total / once
      let countOfRender = 0
      let ul = document.querySelector("ul");
      function add() {
        // 优化性能,插入不会造成回流
        const fragment = document.createDocumentFragment();
        for (let i = 0; i < once; i++) {
          const li = document.createElement("li");
          li.innerText = Math.floor(Math.random() * total);
          fragment.appendChild(li);
        }
        ul.appendChild(fragment);
        countOfRender += 1;
        loop();
      }
      function loop() {
        if (countOfRender < loopCount) {
          window.requestAnimationFrame(add);
        }
      }
      loop();
    }, 0);
  </script>
</body>
</html>

兼容性

一些老的浏览器是不支持这个api的,为了也能使用这个api, 可以自定义这个方法,挂载到window下面:

(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) {
            var currTime = new Date().getTime();
            var timeToCall = Math.max(0, 16 - (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);
        };
}());

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
IE下实现类似CSS3 text-shadow文字阴影的几种方法
May 11 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
详解HTML5通讯录获取指定多个人的信息
Dec 20 HTML / CSS
Html5新标签解释及用法
Feb 17 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
html5 自定义播放器核心代码
Dec 20 HTML / CSS
html5设计原理(推荐收藏)
May 17 HTML / CSS
使用Html5实现异步上传文件,支持跨域,带有上传进度条
Sep 17 HTML / CSS
VSCode 自定义html5模板的实现
Dec 05 HTML / CSS
关于flex 上下文中自动 margin的问题(完整例子)
May 20 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 HTML / CSS
手对手的教你用canvas画一个简单的海报的方法示例
Dec 10 #HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 #HTML / CSS
Html5 Canvas动画基础碰撞检测的实现
Dec 06 #HTML / CSS
canvas压缩图片以及卡片制作的方法示例
Dec 04 #HTML / CSS
canvas探照灯效果的示例代码
Nov 30 #HTML / CSS
localStorage的过期时间设置的方法详解
Nov 26 #HTML / CSS
canvas拼图功能实现代码示例
Nov 21 #HTML / CSS
You might like
在DC的漫画和电影中,蝙蝠侠的宿敌,小丑的真名是什么?
2020/04/09 欧美动漫
PHP对XML内容进行修改和删除实例代码
2016/10/26 PHP
关于Javascript 的 prototype问题。
2007/01/03 Javascript
关于document.cookie的使用javascript
2008/04/11 Javascript
使用Node.js实现一个简单的FastCGI服务器实例
2014/06/09 Javascript
浅谈EasyUI中Treegrid节点的删除
2015/03/01 Javascript
jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果
2015/08/25 Javascript
IE和Firefox之间在JavaScript语法上的差异
2016/04/22 Javascript
Java框架SSH结合Easyui控件实现省市县三级联动示例解析
2016/06/12 Javascript
jQuery实现拖拽页面元素并将其保存到cookie的方法
2016/06/12 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
Element-ui table中过滤条件变更表格内容的方法
2018/03/02 Javascript
解决bootstrap中下拉菜单点击后不关闭的问题
2018/08/10 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
[00:52]DOTA2齐天大圣预告片
2016/08/13 DOTA
[01:12:40]DOTA2-DPC中国联赛 正赛 DLG vs XG BO3 第三场 1月25日
2021/03/11 DOTA
python多进程实现文件下载传输功能
2018/07/28 Python
PyGame贪吃蛇的实现代码示例
2018/11/21 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
python matplotlib实现将图例放在图外
2020/04/17 Python
Python接口开发实现步骤详解
2020/04/26 Python
用CSS3绘制三角形的简单方法
2015/07/17 HTML / CSS
遮罩层 + Iframe实现界面自动显示的示例代码
2020/04/26 HTML / CSS
金融专业大学生自我评价
2014/01/09 职场文书
运动会广播稿500字
2014/01/28 职场文书
感恩节活动策划方案
2014/05/16 职场文书
党员干部一句话承诺
2014/05/30 职场文书
2015年银行大堂经理工作总结
2015/04/24 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
高中军训感想
2015/08/07 职场文书
聘任协议书(挂靠)
2015/09/21 职场文书
《生物入侵者》教学反思
2016/02/16 职场文书
为什么RedisCluster设计成16384个槽
2021/09/25 Redis
Python自动化工具之实现Excel转Markdown表格
2022/04/08 Python
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers