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

【问题标题】：Is there a way to test HTML5 canvas performance?有没有办法测试 HTML5 画布性能？
【发布时间】：2014-02-04 18:03:47
【问题描述】：

目前我知道如何获取信息，例如每秒帧数 (FPS) 和渲染最后一帧所需的时间（以 MS 为单位）。

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

有什么想法吗？谢谢！

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

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

【问题讨论】：

html5rocks.com/en/tutorials/canvas/performance

标签： performance html5-canvas

【解决方案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，大多数常见浏览器的最新版本都支持它。为了获得更大的兼容性，您可以使用不太精确的Date.now() 或new Date().getTime()。它还以毫秒为单位返回时间，但只返回一个整数。

【讨论】：

非常感谢，我一定会注意的！ PS：我希望我能投票给你，但我不能，因为我需要 15 个代表才能这样做。 :c
@Pheelbert 如果您最喜欢我的回答，您可以点击旁边的勾号图标接受它。
要支持旧版浏览器只需重写：var before = performance ? performance.now() || new Date().getTime();

【解决方案2】：

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

【讨论】：

我需要以代码方式获取此信息，抱歉不精确。我将把这个添加到我的问题中！还是很有趣，谢谢。