如何调试Javascript进程和动画？

Question

有许多用于调试JavaScript代码的工具（如FireBug，Chrome控制台），但是有一个用于调试进程的工具。这可能需要监视资源（例如CPU）的使用情况，以找出流程中的瓶颈。

我创建了用于移动元素的Javascript动画（在更简单的情况下打开/关闭菜单），但移动现在很流畅。不同因素可能导致过载，例如沉重的CSS3渐变。但是如何检测速率限制过程？

这确实是大多数网站的问题。打开网页时，javascript进程的重载会导致页面加载。大多数动画/菜单操作都被破坏了。

当JavaScript动画运行不顺畅时，如何调试问题？

或者更一般的问题，如何监控运行JS进程的资源使用情况，使网页更轻（在资源有限的计算机上加载速度更快）？

Answer 1

我会在Chrome中使用时间轴 - ＆gt;框架。 Paul Irish对此有很多很好的讨论，这里有一个https://www.youtube.com/watch?v=Vp524yo0p44

另外，当做动画时不使用setTimeout / setInterval，精度不够好。而是使用requestAnimationFrame。有关requestAnimationFrame的更多信息，请访问此处。 http://paulirish.com/2011/requestanimationframe-for-smart-animating/

编辑：保罗的这篇演讲对于浏览器的速度和调试速度也很有意思：https://www.youtube.com/watch?v=MllBwuHbWMY，这是最近讨论的2D变换与绝对定位：https://www.youtube.com/watch?v=NZelrwd_iRs

Answer 2

不同的机器=＆gt;不同的表现=＆gt;不同的瓶颈

如果动画运行不顺畅，我会尝试降低图形或动画本身。谁说用户使用的功能与您一样强大？所以他们可能比你更早地解决这个问题。

但我仍然建议Process Explorer，因为它可以单独显示特定进程的负载。通常，与Windows提供的默认任务管理器相比，它是一种更具洞察力的工具。

Answer 3

我在Windows中只使用任务管理器，但可以使用http://www.compuware.com/application-performance-management/ajax-performance-testing.html（不仅适用于JavaScript）。