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

Question

目前我知道如何获取诸如每秒帧数（FPS）和渲染最后一帧所花费的时间（以毫秒为单位）等信息。

我想获得更多信息，它可以是任何东西，但更多有关内存使用情况的信息会很棒。

有任何想法吗？谢谢！

编辑精度：我需要从代码中获取此信息！（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() 函数是一个相当新的非标准功能，但根据MDN 上的文档，大多数常见浏览器的最新版本都支持它。为了获得更好的兼容性，您可以使用不太精确的Date.now()或new Date().getTime()。它还返回以毫秒为单位的时间，但仅返回整数。