3

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

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

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

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

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

4

3 回答 3

5

我会在 Chrome 中使用时间线-> 帧。Paul Irish 对此进行了很多精彩的讨论，这里有一个https://www.youtube.com/watch?v=Vp524yo0p44

另外做动画的时候不要使用setTimeout/setInterval，精度不够好。而是使用 requestAnimationFrame。有关 requestAnimationFrame 的更多信息可以在这里找到。http://paulirish.com/2011/requestanimationframe-for-smart-animating/

编辑：Paul 的这次谈话关于浏览器中的速度和调试速度也很有趣：https ://www.youtube.com/watch?v=MllBwuHbWMY ，这是最近讨论的 2D 变换与绝对定位：https： //www.youtube.com/watch?v=NZelrwd_iRs

于 2013-01-11T13:40:21.520 回答
1

不同的机器 => 不同的性能 => 不同的瓶颈

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

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

于 2013-01-11T13:34:38.720 回答
0

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

于 2013-01-11T13:32:27.920 回答