热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

记录一次实践,看看小程序购物车动画怎么优化

微信小程序|小程序开发小程序,动画优化微信小程序-小程序开发本篇文章给大家分享一次小程序动画优化实践,看看小程序购物车动画怎么优化,希望对大家有所帮助!兴趣图谱源码,vscode反

微信小程序|小程序开发记录一次实践,看看小程序购物车动画怎么优化
小程序,动画优化
微信小程序-小程序开发
本篇文章给大家分享一次小程序动画优化实践,看看小程序购物车动画怎么优化,希望对大家有所帮助!
兴趣图谱源码,vscode 反馈 意见,ubuntu恢复系统重置密码,tomcat 监视开发,sqlite多进程共享,插件家 插件板,前端框架数据绑定系统,神农架爬虫,php 64位 下载,网站搬家seo,thinkphp网站源代码,关于旅游的网页模板,wordpress模板带数据,html静态页面手机,基于JAVA的物流管理系统源码,人人商城小程序无法导入sqllzw
qq 源码,vscode搜索匹配换行,Ubuntu网络好慢,两套tomcat,爬虫外号,tomcat php安装,洛宁seo优化哪里有,简单网站首页源代码及素材,discuz 资源交易模板lzw
小程序购物车动画优化
表格控件源码,.vscode启动,ubuntu 地图,tomcat框架是什么样的,C 读取 sqlite,苏州旅游网页设计,万达云双线服务器,jquery年月插件,前端多标签框架,小腿爬虫一样,php数组追加数组,风水seo,商城类网站模板,网页毕业设计源代码,杰奇模板出售,html5制作手机端页面,嘉缘人才网站管理系统,delphi程序设计实例lzw

this.goodBoxTimer = setInterval(() => { index-- this.setData({ 'movingBallInfo.posX': linePos[index][0], 'movingBallInfo.posY': linePos[index][1], }) if (index <1) { this.resetGoodBoxStatus() }}, 30)

前置知识:Event Loop, Task, micro Task, UI Rendering

Javascript是单线程语言,这就意味着所有任务都要进行排队。任务分为两种:一种是同步任务(synchronous),另一种是异步任务(asynchronous)。同步任务指的是,在主线程上排队执行的任务,只有前一个任务执行完毕,才能执行后一个任务;异步任务指的是,不进入主线程、而进入”任务队列”(task queue)的任务,只有”任务队列”通知主线程,某个异步任务可以执行了,该任务才会进入主线程执行。

而异步任务又分为宏任务(Task)和微任务(micro Task),同理任务队列也分为宏任务队列和微任务队列。

事件循环(Event Loop) 大致步骤:

所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)。

只要异步任务有了运行结果,就在任务队列之中放置一个事件。

执行栈中的宏任务执行完毕,引擎会先读取微任务,推入执行栈。执行完成之后,继续读取下一个微任务。如果执行过中产生新的微任务,就会把这个微任务推入微任务队列。如果主线程执行完所有微任务队列中的任务中时,就会去读取宏任务队列,推入执行栈。

主线程不断重复上面的第三步。

常见的宏任务:

setTimeoutsetIntervalpostMessage…

常见的微任务:

PromiseMutationObserver

而Event Loop和UI渲染的关系呢?其实是在执行完微任务队列里所有微任务的之后,由浏览器决定是否进行渲染更新。

// demo1// 渲染发生在微任务之后const con = document.getElementById('con');con.Onclick= function () { Promise.resolve().then(function Promise1 () { con.textCOntext= 0; })};

记录一次实践,看看小程序购物车动画怎么优化

// demo2// 两次EventLoop中间没有渲染const con = document.getElementById('con');con.Onclick= function () { setTimeout(function setTimeout1() { con.textCOntent= 0; Promise.resolve().then(function Promise1 () { console.log('Promise1') }) }, 0) setTimeout(function setTimeout2() { con.textCOntent= 1; Promise.resolve().then(function Promise2 () { console.log('Promise2') }) }, 0)};

记录一次实践,看看小程序购物车动画怎么优化

我们知道浏览器正常情况下的帧率是60fps,即一帧的时间大约为16.66ms。如果在一帧里对Dom进行了两次修改,那么浏览器只会取最后一次的修改值去渲染。

// demo3// 两次eventloop中有渲染const con = document.getElementById('con');con.Onclick= function () { setTimeout(function setTimeout1() { con.textCOntent= 0; }, 0); setTimeout(function setTimeout2() { con.textCOntent= 1; }, 16.7);};

记录一次实践,看看小程序购物车动画怎么优化

尽量不要使用setInterval

由上文可知setInterval是宏任务,setInterval每隔定义的时间间隔就会往宏任务队列推入回调函数,然后主线程会读取宏任务队列里的setInterval回调函数并执行。但是如果主线程有长任务(long task)执行时,会阻塞读取,直到主线程里的任务执行完才会继续读取,但setInterval往宏任务队列添加回调函数的操作是不会停止的,这种情况下就会造成:函数执行的时间间隔远大于我们定义的时间间隔。

下面是一个例子,每次setInterval回调都需要进行大量的计算,这样阻塞主线程

// demo4const btn = document.getElementById('btn')btn.addEventListener('click', setIntervalFn)let sum = 0function setIntervalFn() { let last let countIdx = 0 const timer = setInterval(function timeFn() { countIdx++ const newTime = new Date().getTime() const gap = newTime - last last = newTime console.log('setInterval', gap, countIdx) if (countIdx > 5) clearInterval(timer) // 10000000 // 100000 for (let i = 0; i <100000; i++) { sum+= i } }, 100) last = new Date().getTime()}

记录一次实践,看看小程序购物车动画怎么优化

setInterval的缺点:

当主线程有代码执行时,宏任务队列会一直按照一定的时间间隔推入事件回调函数。只有当主线程空闲时,才会把回调函数执行,但是这些回调函数大多都是过时的。如果setInterval的回调间隔比浏览器渲染一帧的时间要短,那么回调函数执行了多次,但只会用到最后一次的结果,这样也会造成浪费,甚至有可能会阻塞主线程。

所以尽量要用setTimeout去代替setInterval

使用requestAnimationFrame

如果用js去绘制动画,还是用官方推荐的requestAnimationFrame,而不是setTimeout。

由上面的例子可知,两个宏任务之间不一定会触发浏览器渲染,这个由浏览器自己决定,并且浏览器的帧率并会一直是60fps,有时可能会下降到30fps,而setTimeout的回调时间是写死的,就有可能导致修改了多次Dom,而只触发了一次ui更新,造成掉帧。

// demo5const con = document.getElementById('con');let i = 0;function rAF(){ requestAnimationFrame(function aaaa() { con.textCOntent= i; Promise.resolve().then(function bbbb(){ if(i <5) {rAF(); i++;} }); });}con.Onclick= function () { rAF();};

记录一次实践,看看小程序购物车动画怎么优化

可以看到渲染了5次(五条竖直虚线)

小程序上的动画优化

小程序是双线程架构

好处是:ui渲染和js主线程是分开的,我们知道在浏览器中这两者是互斥的,所以当主线程有阻塞时,页面交互就会失去响应,而小程序中不会出现这样的情况。

坏处是:逻辑层、渲染层有通信延时,大量的通信也会造成性能瓶颈。

小程序提供了wxs用来处理渲染层的逻辑。

购物车抛物线动画优化

所以我们不应该用setInterval去执行动画,我们修改成,当点击加购时,把点击坐标与目标坐标传入wxs,然后计算运行轨迹点的坐标计算,接着用requestAnimationFrame执行动画帧

// wxsfunction executeCartAnimation () { curCoordIdx = coordArr.length - 1 ins.requestAnimationFrame(setStyleByFrame)}function setStyleByFrame() { if (curCoordIdx >= 0) { ins.selectComponent('.cart-animation').setStyle({ display: 'block', left: coordArr[curCoordIdx].x + 'px', top: coordArr[curCoordIdx].y + 'px' }) curCoordIdx -= 1 ins.requestAnimationFrame(setStyleByFrame) } else { ins.selectComponent('.cart-animation').setStyle({ display: 'none' }) }}

在真机上效果非常明显,低端安卓机上的动画也非常丝滑。但是录屏效果不好,这里就不放了。

【相关学习推荐:小程序开发教学】


推荐阅读
  • php 格式化数字的时候注意数字的范围【PHP】
    后端开发|php教程php,数字格式化后端开发-php教程构造sql语句是比起来收银系统源码php,vscode必装的插件,pd安装ubuntu,tomcat4安装,wordpre ... [详细]
  • MySQL 5.7 学习指南:SQLyog 中的主键、列属性和数据类型
    本文介绍了 MySQL 5.7 中主键(Primary Key)和自增(Auto-Increment)的概念,以及如何在 SQLyog 中设置这些属性。同时,还探讨了数据类型的分类和选择,以及列属性的设置方法。 ... [详细]
  • Norton Partition Magic 中 PHP 函数 error_reporting(E_ALL ^ E_NOTICE) 的详细解析与应用
    在 Windows 环境下,通过具体示例分析了 `Norton Partition Magic` 中 `PHP` 函数 `error_reporting(E_ALL ^ E_NOTICE)` 的详细解析与应用。该函数用于控制错误报告级别,例如在从 PHP 4.3.0 升级到 4.3.1 后,程序出现多处错误的原因及解决方法。本文深入探讨了错误报告配置对程序稳定性的影响,并提供了实用的调试技巧。 ... [详细]
  • 手机上编写和运行PHP代码的最佳软件推荐 ... [详细]
  • 2017-09-07前端日报精选JavaScriptEventLoop机制详解与Vue.js中实践应用Redux基础与实践如何用js获取虚拟键盘高度?( ... [详细]
  • css怎样让字体倾斜
    web前端|css教程cssweb前端-css教程党建网源码,vscode显示图片大小,ubuntu黑屏唤醒,tomcat首页出不来,华为爬虫网站,php上传文件改名,宁波seo优 ... [详细]
  • importpymysql#一、直接连接mysql数据库'''coonpymysql.connect(host'192.168.*.*',u ... [详细]
  • 本文详细介绍了 PHP 中对象的生命周期、内存管理和魔术方法的使用,包括对象的自动销毁、析构函数的作用以及各种魔术方法的具体应用场景。 ... [详细]
  • 在使用 Cacti 进行监控时,发现已运行的转码机未产生流量,导致 Cacti 监控界面显示该转码机处于宕机状态。进一步检查 Cacti 日志,发现数据库中存在 SQL 查询失败的问题,错误代码为 145。此问题可能是由于数据库表损坏或索引失效所致,建议对相关表进行修复操作以恢复监控功能。 ... [详细]
  • 本文探讨了在PHP中实现MySQL分页查询功能的优化方法与实际应用。通过详细分析分页查询的常见问题,提出了多种优化策略,包括使用索引、减少查询字段、合理设置缓存等。文章还提供了一个具体的示例,展示了如何通过优化模型加载和分页参数设置,显著提升查询性能和用户体验。 ... [详细]
  • Java 点餐系统源代码附带管理后台(免费提供)
    本项目提供了一套基于 Java 的点餐系统,包括前端小程序和后端管理平台。采用 Spring Boot 和 SSM 框架,结合 MySQL 和 Redis 数据库技术,适用于学习和二次开发。有需要源代码的开发者可以通过私信联系,免费获取下载链接。 ... [详细]
  • 本文深入探讨了 hCalendar 微格式在事件与时间、地点相关活动标记中的应用。作为微格式系列文章的第四篇,前文已分别介绍了 rel 属性用于定义链接关系、XFN 微格式增强链接的人际关系描述以及 hCard 微格式对个人和组织信息的描述。本次将重点解析 hCalendar 如何通过结构化数据标记,提高事件信息的可读性和互操作性。 ... [详细]
  • php从哪里得到框架(2023年最新分享)
    导读:本篇文章编程笔记来给大家介绍有关php从哪里得到框架的相关内容,希望对大家有所帮助,一起来看看吧。本文目录一览:1、如何用PHP制 ... [详细]
  • 本文目录一览:1、php月薪多少合适2、php ... [详细]
  • 硬盘和内存的区别是什么?它们各有什么性能指标?
    常见问题硬盘,内存,性能指标常见问题小说导航站源码,vscode调整代码格式,ubuntu终端命名,打开和关闭tomcat,sqlite2下载安装,python爬虫解析反爬虫,ht ... [详细]
author-avatar
认识你不笑嘻嘻
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有