想问老师一个拖拽动画中的性能优化的问题

Question

这是我自己在做项目的时候遇到的问题
有一块canvas的画布，然后现在上面画了一些小方块，通过比对坐标可以让方块被拖拽走
可是性能上感觉一直有点问题。
我使用了chrome的工具看了以下
对于每帧的世界 大概在 50ms到60ms直接
而其中的cpu执行时间只有10ms左右
在前面有很多空闲的时间
这个是为什么呢？

现在我有以下的一些推测
虽然看起来执行时间短
但是因为mousemove不断触发 其实相关的内容执行了很多遍，所以才会导致时间这么长
单个任务的执行时间比如绘制canvas的时间还是太长了

我换了一个小一点的背景图片以后性能就高了一点了
想问的问题是
1、为什么会有这个间隔，这个间隔的时间里面在做啥
2、如何去分析这种不断的交互产生的动画的性能原因，我看很多的博客之类的都是在讨论怎么达到60fps这些东西的时候都是用的定时器，而没有考虑这种不断交互的情况
3、怎么进行有效的优化
4、有推荐的学习fps跟渲染直接的关系的资料吗。。。这里一个比较让我困惑的是，对渲染跟重绘之间的关系了解不足。。。即使做了一些会有重绘的工作，可是页面也不会马上渲染帧，这层关系让我现在感觉有点晕

Answer 1

ustbhuangyi 2020-01-15 13:58:59

你用原生的 canvas 做的？ 你先试着把问题做到最简单，只是一块画布，画一个方块，然后监听鼠标事件去拖动，看看性能如何。如果没问题肯定就是其它的问题，通过删代码的方式，找到性能瓶颈。

• 提问者 李行知 #1

  是用原生的去做的。大概已经猜到问题在哪里了
  一个是因为用来当背景图的图片太大了，canvas画布的尺寸很大，每次都对画布进行清除重绘导致了性能损耗很大
  一个可能是是因为内容太多
  加入换一个小画布就能稳定帧了

• ustbhuangyi 回复 提问者 李行知 #2

  如果是基于 canvas 做游戏的话，可以考虑使用一些框架比如 cocos2djs，内部对 canvas 的渲染做了一些优化。

• 提问者 李行知 #3

  可是问题是为啥会这样呢？火焰图上这个大的间隔时间到底是在做什么呢？

点开查看后面1条评论