评论

小程序毫秒级计时优化

持续优化

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

方案流程:

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

最后一次编辑于  2020-01-19  
点赞 13
收藏
评论

3 个评论

  • 韦小宝
    韦小宝
    2020-04-13

    降级版的 requestAnimationFrame

    2020-04-13
    赞同
    回复
  • Peter👊
    Peter👊
    2020-03-30

    牛逼plus

    2020-03-30
    赞同
    回复
  • 放轻松点 主角
    放轻松点 主角
    2020-01-19

    哈斯ki

    2020-01-19
    赞同
    回复
登录 后发表内容