请求动画帧、历史记录、worker

最新推荐文章于 2023-07-10 09:18:54 发布
最新推荐文章于 2023-07-10 09:18:54 发布
阅读量402 收藏
点赞数
分类专栏： H5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39403733/article/details/89248604
版权
本文介绍了前端动画优化的方法，重点讲解了requestAnimationFrame的工作原理和优势，包括根据屏幕刷新率同步执行、CPU节能和函数节流。同时，讨论了历史记录管理在单页面应用中的应用，以及如何利用popstate和hashchange事件。最后，阐述了worker在处理异步操作中的作用，以避免主线程阻塞。
摘要由CSDN通过智能技术生成

requestAnimationFrame（请求动画帧）

导读： 前端要实现动画效果目前可以用CSS3、定时器、jquery等。

  1. 定时器动画时间并不准确，甚至当设置的时间过小时，就会出现掉帧的现象（动画是一帧一帧的图片）
  2. 屏幕刷新率：屏幕上每秒钟能够显示的图片数目。目前主流设备屏幕刷新率为60Hz,部分高端设备达到120Hz.
  3. 以60Hz刷新率为例，则每张图片显示时间为 1000ms/60 =16.6666667,就是约每16ms才会刷新一次屏幕显示，当把定时器动画设为10ms时，过了10ms的时间，动画开始移动，到屏幕并没有刷新，此时就会掉帧，即此帧图片并没有显示出来。
  4. 而requestAnimationFrame是根据屏幕刷新率同步执行的，在页面刷新的前一刻执行一次，就是说假如是60Hz的屏幕，就16ms刷新一次，如果是120Hz就自动8ms刷新一次。不会出现掉帧的现象！
除此之外，requestAnimationFrame还有以下两个优势：

CPU节能：使用setTimeout实现的动画，当页面被隐藏或最小化时，setTimeout 仍然在后台执行动画任务，由于此时页面处于不可见或不可用状态，刷新动画是没有意义的，完全是浪费CPU资源。而requestAnimationFrame则完全不同，当页面处理未激活的状态下，该页面的屏幕刷新任务也会被系统暂停&#

最低0.47元/天 解锁文章
菜鸡的全栈路
关注
专栏目录
一些前端大牛都在学习的github库
孙叫兽的博客
03-02 2272
前端知识比较杂，长时间的工作容易沉浸在业务当中，技术提升有限，这里发现了前端的新大陆，可以帮助小伙伴们巩固基础知识，完善自己的知识体系，欢迎点赞收藏，兄弟们，赶紧干起来吧！1.JavaSc...
干货阿里巴巴 开源软件列表
科技D人生
06-01 9251
阿里的开源项目很多，这也跟@淘宝正明的开源态度密不可分。有很多重量级的项目，例如LVS、Tengine，或者很有实践价值的中间件，今天小编为大家汇总了阿里开源的项目，快来看看吧！ 服务框架 Dubbo Dubbo 是阿里巴巴公司开源的一个高性能优秀的服务框架，使得应用可通过高性能的 RPC 实现服务的输出和输入功能，可以和 Spring框架无缝集成。 JDBC连接
Jquery,js的逐帧动画实现
12-07
Jquery,js的逐帧动画实现，将一帧一帧的静态图片实现动画效果demo。
请求动画帧
十里不故梦
01-16 395
实现动画效果的方法 css3可以使用transition和animation来实现 JS中可以通过定时器setInterval和setTimeout来实现 html5中的canvas也可以实现，html5还提供一个专门用于请求动画的API（requestAnimationFrame） setInterval和setTimeout卡顿和抖动现象 通过设定间隔时间来不断改变图像位置，达到动画效果，但是容易出现卡顿、抖动的现象 <style> div { width:
requestAnimationFrame（请求动画帧）
最新发布
CYL_2021的博客
07-10 1万+
在Web应用中，实现动画效果的方法比较多，Javascript 中可以通过定时器 setTimeout 来实现，css3 可以使用 transition 和 animation 来实现，html5 中的 canvas 也可以实现。除此之外，html5 还提供一个专门用于请求动画的API，那就是 requestAnimationFrame，就是请求动画帧。
requestAnimationFrame 请求动画帧
别告诉我有Bug
04-02 3479
requestAnimationFrame动画请求帧-----它是一个浏览器的宏任务。 requestAnimationFrame的用法与setTimeout、setInterval很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行
requestAnimationFrame请求动画帧
undefined_521的博客
05-05 703
对浏览器相关知识的总结/积累
2018春招前端面试: 闯关记(精排精校) | 掘金技术征文
CRPER
03-13 6486
前言 去年年末研发组解散失业, so选择回去学车了,也顺利拿到了驾照 最近回归大深圳….开始踏上漫漫的找工作之路; “拉勾上吊一百年不匹配!!!”,”BOSS直聘日夜没反应!!!” 题目范围涵盖我最近遇到的笔试题和面谈的(CSS/JS/HTTP/Node/Hybrid/Vue/NG/React) emm…..这里不列举哪些公司了, 若是你完整的阅读一...
强攻 前端HTML5 渡一学习记录
m0_46424423的博客
07-22 619
1.内容大纲 1.新增的属性 placeholder Calendar, date, time, email, url, search ContentEditable Draggable Hidden Content-menu Data-Val(自定义属性) 2.新增的标签 语义化标签 canvas svg Audio(声音播放) Video(视频播放) 3.API 移动端网页开发一般指的是h5 定位（需要地理位置的功能） 重力感应（手机里面的陀螺仪（微信摇一摇，赛车转弯）） request-an
vue请求,动画
liutianxiao123的博客
03-29 183
引入resource 放在引入vue后面 一般 在 created()生命周期函数内写请求和数据初始化 get请求地址栏传参?num=3 post请求两个参数 url 和data （请求体） 浏览器内置对象FormData let form = new FormData 两个参数 属性名，属性值 form.append(“type”, “free”) v-enter v-enter-active定义进入的过渡状态 v-enter-to定义进入过渡的开始状态 v-leave v-leave-activ
性能优化之请求动画帧requestAnimationFrame（）的使用
WanFengZhou
02-18 2757
requestAnimationFrame是什么？ requestAnimationFrame()即请求动画帧，是HTML5中提供的动画API，简称rAF。可以优化浏览器中并行的动画动作，更合理的重新排列动作序列，并把能够合并的动作放在一个渲染周期内完成，从而呈现出更流畅的动画效果。 与setTimeout相比，requestAnimationFrame最大的优势是由浏览器来决定回调函数的执行时机，即紧跟浏览器的刷新步调。 具体一点讲，如果屏幕刷新频率是60Hz，那么回调函数每16.7ms被执行一次，如果屏
前端学习：js-请求帧动画，圆周运动，闭包
qq_45926448的博客
07-16 338
js-请求帧动画，圆周运动，闭包
requestAnimationFrame()请求动画帧的兼容IE9及以下写法
yiting123456789的博客
08-28 4230
兼容性IE9及以下与setTimeout()对比 不需要设置时间间隔，会贴合浏览器的刷新频率。 在切到另外的页面时，会停止运动。（sertTimeout还会运行，但速度变慢） <head> <meta charset="UTF-8"> <meta name="Author" content="FengYu"> <title>1</title> </head> <script>
Android动画-Frame Animation（帧动画）
小菜鸟的专栏
12-14 386
Android动画-Frame Animation（帧动画）
window.requestAnimationFrame与Tween.js配合使用实现动画缓动效果
weixin_34345560的博客
02-13 158
window.requestAnimationFrame 概述 window.requestAnimationFrame()这个方法是用来在页面重绘之前，通知浏览器调用一个指定的函数，以满足开发者操作动画的需求。这个方法接受一个函数为参，该函数会在重绘前调用。 注意: 如果想得到连贯的逐帧动画，函数中必须重新调用 requestAnimationFrame()。 如果你想做逐帧动画的时候，...
帧动的使用animation(动画)
leigangg的博客
02-19 279
帧东的使用: 帧动的意思是在一个操作中可以让画面可以移动多个帧.让画面实现多动画效果 帧动,让一个图片移动到另一个位置.这叫一帧,然后在移动到另外一个位置,那么一共就移动了两帧. 要想让图片实现帧动效果用transform:translate(100px);和transition:transfom 1s ease;再配合hover等等事件就可以实现, 具体代码: <style>...
requestAnimationFrame，读懂这篇文章就够了
知之为知之，不知为不知
05-03 1939
requestAnimationFrame 请求动画帧； 它是一个浏览器的宏任务； requestAnimationFrame的用法与setTimeout很相似，只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。它返回一个整数，表示定时器的编号，这个值可以传递给cancelAnimationFrame用于取消这个函数的执行
webworker与canvas动画
06-28
### 回答1： WebWorker是一种在后台运行JavaScript代码的技术，可以让浏览器在执行JavaScript代码的同时执行其他任务，从而提高网页的性能和响应速度。而Canvas动画则是一种基于HTML5 Canvas元素的动画技术，可以让开发者通过JavaScript代码控制Canvas元素的绘制，从而实现各种动态效果。两者可以结合使用，通过WebWorker来处理一些复杂的计算任务，然后将计算结果传递给Canvas动画进行展示，从而实现更加流畅和高效的动画效果。 ### 回答2： WebWorker和Canvas都是HTML5技术的一部分，它们都可以用来实现动画效果。但是他们之间有着不同的作用和特点。 WebWorker是一个能够在后台运行的JavaScript程序，这意味着它运行在主线程之外，不会阻塞主线程。WebWorker可以为复杂的计算和处理大量数据提供帮助。因此，在开发动画时，WebWorker可以用来为主线程提供支持。特别是在要处理大量数据时，可以将这些数据传递给WebWorker进行处理，然后将处理后的结果返回主线程进行显示。这样可以保持UI的流畅性，保证用户看到的动画效果是流畅的。 与此相反，Canvas是一种图像绘制技术，利用它可以创造出各种各样的动画效果。Canvas在Web开发中非常常用，因为它可以创建高度定制的交互式用户界面和动画效果。Canvas通过JavaScript的API来控制绘图过程，使用户能够更加灵活地创建复杂的动画场景。 总之，WebWorker和Canvas都是Web开发中非常重要的技术。WebWorker可以提供高效的计算处理和数据传输，而Canvas可以提供灵活的动画绘制和场景构建。在开发动画效果时，开发人员可以同时使用这两种技术，提高用户体验和交互性能。 ### 回答3： Web Worker 是 HTML5 新增的 API，它允许开发者创建后台线程来执行复杂的操作，从而避免主线程被 长时间的脚本执行所阻塞。这意味着在 Web Worker 中执行的 JavaScript 代码不会影响页面的性能，使得我们能够开发更加优化且更快的 Web 应用。 相比之下，Canvas 动画是一种比较常见的动画方式，它使用 HTML5 的 canvas 元素和 JavaScript 来进行绘制动画。相比于以前使用 JavaScript 和 CSS 实现的动画，Canvas 动画更加灵活和强大，可以绘制更加丰富、复杂的图形，能够实现比较高级的图形动画效果，如粒子动画、曲线运动等。 Web Worker 可以和 Canvas 动画相结合，Web Worker 可以处理耗时的逻辑运算，并将结果传递到主线程，主线程接收到 Web Worker 的数据后，立即将其用于 canvas 的绘制。这样做能够很好地优化动画的性能，避免了在主线程进行耗时操作导致动画卡顿的情况。 使用 Web Worker 可以更有效地管理 Canvas 动画的性能，因为在 Web Worker 中运行的逻辑代码不会影响 Canvas 动画的帧率，而且不会影响用户体验。同时，Web Worker 还能够处理计算密集型的操作，从而使 Canvas 动画更加流畅、快速。 总的来说，Web Worker 和 Canvas 动画的结合能够使得 Web 应用更加优化和快速，这种方式能够帮助我们开发出更加高效的 Web 动画应用，从而提高用户体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值