javascript - 如何调试Javascript进程和动画？

Question

调试JavaScript代码的工具很多(比如FireBug、Chrome控制台)，但是有没有调试进程的工具呢？这可能需要监控资源(例如 CPU)使用情况以找到进程中的瓶颈。

我为移动元素创建了 Javascript 动画(在更简单的情况下打开/关闭菜单)，但现在移动很流畅。不同的因素会导致过载，例如沉重的 CSS3 渐变。但是如何检测限速进程呢？

这确实是大多数网站的问题。打开网页时，javascript 进程的过载会终止页面加载。大多数动画/菜单操作都已损坏。

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

或者一个更普遍的问题，如何监控正在运行的 JS 进程的资源使用情况以使网页更轻(在资源有限的计算机上加载速度更快)？

Answer 1

我会在 Chrome 中使用时间轴->帧。 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