小程序毫秒级计时优化
发布于 5 年前 作者 lei66 1163 次浏览 来自 分享

需求:在进行复杂程序操作的同时,毫秒级计时。

方案流程:

1. 使用setData进行毫秒级计时,以10s为例,代码很简单:


Ok,搞定了,测试一下,ios正常,android性能欠佳的机型、在没有执行复杂运算的情况居然差了几秒。。。?(有的甚至更多)
我们再稍微加点东西:


结果:10s的计时跑到了20多秒
原因:主线程中有其他任务在执行导致setInterval延迟执行。

2. 既然这样,我们减去延迟带来的时间差

结果:达到效果,只存在了毫秒级的误差了。
完美解决?我们来搞点事情

页面渲染出现了卡顿,会看到计时不会连续的变化,出现跳跃减少。
原因分析:数据的setData通信,造成的延迟。

3. 既然setData会有延迟,那么还有什么办法可以更新页面?——canvas

马上动手写个:


完美决绝!!,requestAnimationFrame小程序之前不支持,若支持可替代,实现方案有多种。

效果对比:
普通方式:http://video.static.logan4846.com/public/1.mp4
canvas:http://video.static.logan4846.com/public/2.mp4

代码片段: https://developers.weixin.qq.com/s/CV8mctmn7AeE

1 回复
回到顶部