框架基本概念+运动框架应用于web页面的抗阻塞均匀计数器"/>
requestAnimationFrame运动框架基本概念+运动框架应用于web页面的抗阻塞均匀计数器
目录
一、requestAnimationFrame运动框架的基本概念
1、requestAnimationFrame运动框架特性
2、使用requestAnimationFrame运动框架可处理掉帧问题
3、不要用requestAnimationFrame运动框架处理的场景
二、requestAnimationFrame运动框架-精简代码
1、编辑定时器
2、调用运动函数(调用以后,每隔一个浏览器重绘周期就调用一次回调函数fn)
3、回调函数,中间写每隔一个浏览器重绘周期需要执行的代码
三、运动框架应用于web页面的抗阻塞均匀计数器
1、为什么要用requestAnimationFrame做计数器?
2、requestAnimationFrame运动框架与setInterval做计数器的控制台数据:
3、web版计数器(对照版)预览与源码下载
先了解运动框架的基本概念,如需跳过概念部分直奔主题,请在目录中选取需要跳转的内容
一、requestAnimationFrame运动框架的基本概念
- JS运动框架window.requestAnimationFrame(回调函数),简单来说就是让浏览器在下次重绘之前,执行指定的回调函数。
1、requestAnimationFrame运动框架特性
- requestAnimationFrame跟随浏览器DOM更新频率,实现细腻的特效,例如无限循环的随机满屏花瓣飘落效果,无需将动画过程录制成媒体文件——意味着流畅的视觉体验。
- css3成熟以后,style中的transition和annimation被认为是更方便的Web动画实现方式,别以为requestAnimationFrame就此消失,因为无论多么花哨的响应式动画,都绕不开浏览器DOM更新频率的限制,超过浏览器响应频率的DOM重绘,会出现掉帧,并且对浏览器性能造成浪费。
- 虽然requestAnimationFrame运动框架已经不流行,依然可以发挥作用,活用运动框架的特性,可以处理一些棘手的问题,并且在特定的场景中节省浏览器性能。
2、使用requestAnimationFrame运动框架可处理掉帧问题
- DOM重绘掉帧的现象,容易出现在频繁使用定时器的场景下,当我们用定时器高频率地回调一个函数,而视图中某些元素要跟随这个函数刷新,当定时器间隔越来越短,函数执行了,但元素没有更新。
- 很明显掉帧会影响页面的正常显示,涉及到重要信息的时候,甚至会造成不必要的误解。web显示出现掉帧的情况下,如果不想改变代码逻辑,又要高频刷新视图元素,可以选择用运动框架取代单纯的高频定时。
- requestAnimationFrame自身也消耗浏览器性能,而且相对于transition和annimation,运动框架的代码写起来更麻烦,决定使用运动框架之前需要权衡利弊。
3、不要用requestAnimationFrame运动框架处理的场景
- 不要用运动框架解决前后端交互产生的时延问题
- 不要用运动框架解决输入校验中遇到的数据-视图不一致问题
- 以上两个场景,本质上并不是DOM更新频率问题,而是要做好防抖或节流,并且以上两个交互过程,按通常的业务逻辑,没有必要按照小于浏览器重绘周期的间隔执行。
- 使用了定时器的场景,不要将运动框架作为优先的解决办法,可用数组记录定时器,并及时清除,确保网页中没有非必要的定时器。
- 当运动框架与定时器处于同一线程的时候,会发生运动框架优先运行而定时器的运行受到严重干扰的现象,H5是支持多线程的,感兴趣可以查一下Web Workers的相关内容。
requestAnimationFrame的使用需要一定的数学常识,如果只是用来当定时工具,也不需要太复杂的计算过程,有HTML、JavaScript基础是可以理解的。
二、requestAnimationFrame运动框架-精简代码
运动框架早期的实用代码有三个版本:速度版、时间版和多样式版,由于这三个版本的代码已经用得不多,而且有点复杂不利于初步理解,没有必要贴完整代码,只附上关键部分,使用时需自行补充中间要运行的过程。
1、编辑定时器
window.requestAnimationFrame = window.requestAnimationFrame || function (fn) {return setTimeout(fn, 1000 / 60);
}
window.cancelAnimationFrame = window.cancelAnimationFrame || clearTimeout;
2、调用运动函数(调用以后,每隔一个浏览器重绘周期就调用一次回调函数fn)
requestAnimationFrame(fn)
3、回调函数,中间写每隔一个浏览器重绘周期需要执行的代码
function fn(){//要执行的代码console.log(0);//再次让运动框架执行这个函数,以形成循环requestAnimationFrame(fn)
}
三、运动框架应用于web页面的抗阻塞均匀计数器
终于到了上干货的时刻,铺垫有点亢长了呢,通过目录直接跳这儿也行哦(* ̄︶ ̄*)
1、为什么要用requestAnimationFrame做计数器?
前端计时器是经常用到的知识点,基于JavaScript单线程的特性,setInterval计数器在阻塞干扰下间隔会变得不均匀,虽然已经有现成的解决方法,通常是将阻塞延迟的时间在下一个计时周期中调整过来,但并不能治本,所以才推荐用requestAnimationFrame运动框架做计数器,达到在阻塞干扰的情况下依然均匀运作的效果。
页面截图:
再来点控制台数据:
2、requestAnimationFrame运动框架与setInterval做计数器的控制台数据:
这是用requestAnimationFrame运动框架作计时器输出的控制台信息,可以看到在百分秒精度下间隔非常准确,下图无阻塞的情况:
下图是requestAnimationFrame运动框架做百分秒精度下的计数器,同时存在阻塞干扰的情况,看控制台信息,误差也是相当小的:
不过运动框架做计数器并不是万能的,由于运动框架随视图刷新,所以不能很好地支持千分秒精度的计时,如果需要用千分秒精度的计数器,还是用setInterval更合适,下图是setInterval为计数器在无附加阻塞情况下的控制台数据:
setInterval做计数器有个明显的缺点,受阻塞影响较大,甚至会出现明显的间隔波动,在阻塞干扰下无法确保计数精度,控制台数据如下图所示:
综上所述,requestAnimationFrame运动框架作为计数器的最高计数精度不如setInterval,但是运动框架对阻塞的抗干扰效果较好,setInterval在阻塞干扰下不稳定。
3、web版计数器(对照版)预览与源码下载
基于以上因素制作了这版web版计数器,可以支持两种模式,一种是千分秒精度的setInterval计数器,一种是百分秒精度的requestAnimationFrame运动框架计数器(推荐),两种模式可以切换使用。并且还附加了阻塞干扰按钮,可以在运行中随时添加/移除阻塞干扰,来观察运行效果。
需要在Vue3项目中使用,请自行安装脚手架并创建项目。ui用的element-plus。
代码已经整合到我的微型项目合集里,预览或下载源码可使用以下链接:
web版计数器(对照版)在线预览,可能需要加载一会儿,或手动刷新一次。
web版计数器(对照版)源码下载.git如有疑问或建议,请在博客下方发表留言。
更多推荐
requestAnimationFrame运动框架基本概念+运动框架应用于web页面的抗阻塞均匀计数器
发布评论