有没有一种方法可以测试HTML5画布的性能？

Question

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

我想获取更多信息，可以是任何内容，但关于内存使用情况等更多信息将会很棒。

有什么想法吗？谢谢！

编辑-准确性：我需要从代码中获取此信息！（JavaScript）；并且来自任何浏览器，或尽可能多的浏览器。

编辑：我仍在寻找更多信息，例如内存使用情况等。c:

- Pheelbert

---

http://www.html5rocks.com/en/tutorials/canvas/performance/ - Rahul R.

Answer 1

使用内置的分析工具

当您使用 Firefox 时，非常强大的 Firebug 插件包括 Javascript 调试器和分析器。

Chrome 的开发者工具，包括一个分析器，可以通过 Ctrl+Shift+I 或从菜单中的“工具”->“开发者工具”启用。

Internet Explorer 的 Javascript 调试器和分析器可以通过按 F12 键访问。

实现自己的分析代码

如果您想在 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()。它也返回毫秒级时间，但只返回整数。

- Philipp

---

非常感谢，我一定会记住的！PS：我希望我能给你点赞，但是我需要15个声望才能这样做。:c - Pheelbert

@Pheelbert 当你觉得我的回答最好时，可以通过点击旁边的勾选图标来接受它。 - Philipp

为了支持旧浏览器，只需重写代码： var before = performance ? performance.now() || new Date().getTime(); - user1693593

Answer 2

按下 F12 并进入分析器，在加载页面时记录一个分析文件。这将告诉您每个函数花费的时间有多长。非常有帮助。

- JMG

---

我需要以代码方式获取这些信息，抱歉没有说明清楚。我会将其添加到我的问题中！还是很有趣的，谢谢。 - Pheelbert