【问题标题】：HTML5 canvas not showing redrawn content during mouse dragsHTML5 画布在鼠标拖动期间不显示重绘内容
【发布时间】：2016-10-21 04:06:20
【问题描述】：
我在 HTML5 画布上有 a circuit simulator that redraws as you drag things around。
我注意到，有时它在拖动过程中无法重绘。它保持最后绘制的帧，直到我停止移动鼠标，然后开始显示更新的内容。
起初我认为这可能是我使用节流阀绘制低于 60fps 的代码的某种问题。也许定时器事件被更高优先级的 UI 事件或类似的东西淹没了。但是我在 Chrome 中分析了代码，分析器确认绘制代码正在被调用并在合理的时间内完成。
这是我在拖动问题时收集的示例配置文件的屏幕截图。注意绘制代码在 5ms 内完成，有足够的空闲时间：
所以大部分时间我都被难住了，需要知道要检查什么。
在用户操作触发重绘时不显示重绘的常见原因有哪些？
【问题讨论】：
标签：
javascript
html
animation
canvas
profiling
【解决方案1】：
使用requestAnimationFrame 而不是setTimeout。
在我的测试过程中（Chrome、Windows 10），我发现如果我只是快速上下旋转鼠标滚轮，那么我可以阻止 setTimeout 回调运行直到我停止。这使得setTimeout 在画布动画方面成为一个非常糟糕的主意。我将节流代码切换为使用 requestAnimationFrame 循环，它会不断重新安排自身直到冷却时间结束，并且延迟明显减少。
【解决方案2】：
检查其他绘制循环。
我注意到分析器的堆栈跟踪显示了错误的重绘代码。该程序有一个对话框，其中包含有时需要动画的画布。尽管没有显示对话框，但该代码正在向requestAnimationFrame 发送垃圾邮件。不知何故，这干扰了主绘制循环，虽然我不知道确切为什么。所有的抽奖都发生在隐藏的对话框中。
一旦我修复了垃圾邮件requestAnimationFrame 的对话框代码，拖动时暂停问题就消失了。