想问老师一个拖拽动画中的性能优化的问题
来源：4-3 jsonp的应用+轮播图数据抓取
李行知
2020-01-15
这是我自己在做项目的时候遇到的问题
有一块canvas的画布，然后现在上面画了一些小方块，通过比对坐标可以让方块被拖拽走
可是性能上感觉一直有点问题。
我使用了chrome的工具看了以下
对于每帧的世界 大概在 50ms到60ms直接
而其中的cpu执行时间只有10ms左右
在前面有很多空闲的时间
这个是为什么呢？
现在我有以下的一些推测
虽然看起来执行时间短
但是因为mousemove不断触发 其实相关的内容执行了很多遍，所以才会导致时间这么长
单个任务的执行时间比如绘制canvas的时间还是太长了
我换了一个小一点的背景图片以后性能就高了一点了
想问的问题是
1、为什么会有这个间隔，这个间隔的时间里面在做啥
2、如何去分析这种不断的交互产生的动画的性能原因，我看很多的博客之类的都是在讨论怎么达到60fps这些东西的时候都是用的定时器，而没有考虑这种不断交互的情况
3、怎么进行有效的优化
4、有推荐的学习fps跟渲染直接的关系的资料吗。。。这里一个比较让我困惑的是，对渲染跟重绘之间的关系了解不足。。。即使做了一些会有重绘的工作，可是页面也不会马上渲染帧，这层关系让我现在感觉有点晕
写回答
1回答
-
ustbhuangyi
2020-01-15
你用原生的 canvas 做的？ 你先试着把问题做到最简单，只是一块画布，画一个方块，然后监听鼠标事件去拖动，看看性能如何。如果没问题肯定就是其它的问题，通过删代码的方式，找到性能瓶颈。
042020-01-15
相似问题