有没有办法测试HTML5画布性能？

Question

目前我知道如何获取诸如每秒帧数（FPS）之类的信息以及渲染最后一帧（在MS中）所花费的时间。

我想获得更多信息，它可能是任何东西，但有关内存使用的更多信息，这将是伟大的。

有什么想法吗？谢谢！

EDIT-PRECISION：我需要从代码中获取此信息！ （JavaScript的）;从任何浏览器，或尽可能多。

编辑：我仍在寻找更多信息，如内存使用等。 C：

Answer 1

使用内置分析工具

当您使用 Firefox 时，会有非常强大的Firebug插件，其中包含一个Javascript调试器和一个探查器。

Chrome 的开发者工具，包括Profiler，可以使用Ctrl + Shift + I或工具 - >开发人员工具中的菜单启用。

按F12可以访问 Internet Explorer 的Javascript调试程序和分析器。

实施您自己的分析代码

如果要在Javascript中实现自己的性能分析代码，可以在代码的关键位置使用performance.now()函数。这将以毫秒为单位返回当前时间作为浮点数（实际精度因浏览器而异，从平台到平台不同）。将它与之前的测量值进行比较，以查看两次调用之间的代码执行的时间。

var before = performance.now();
veryExpensiveFunction();
var after = performance.now();
console.log("veryExpensiveFunction took " + (after - before) + "ms to execute.");

performance.now（）函数是一个相当新的非标准功能，但根据the documentation on MDN，大多数常见浏览器的最新版本都支持它。为了获得更好的兼容性，您可以使用不太精确的new Date().now()。它还以毫秒为单位返回时间，但只返回一个整数。

Answer 2

按F12并转到分析器并在加载页面时记录配置文件。这将告诉您在每个功能中花费了多长时间。非常有帮助。