测量渲染HTML Canvas的性能

Question

我想在我的JavaScript呈现HTML5 Canvas时从浏览器“确保性能”。

首先，我画了一个简单的2D画布并记录了完成前后的时间：

HTML

<canvas id="myCanvas" width="200" height="100"></canvas>

JS

var start = performance.now(); 
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
ctx.moveTo(0, 0);
ctx.lineTo(200, 100);
ctx.stroke();
var end =performance.now();
alert(end-start); //alert for testing only

这返回了一个非常小的值，如预期的那样。

为了确保性能，我应该渲染一些更复杂的东西，所以我做了一段代码来渲染3D图像并对其进行动画处理。

但是现在由于动画是一个恒定的循环，因此计算前后的时间非常棘手。我尝试记录下第一个动画的时间，然后再继续播放，但是时间差仍然很小。

我想看看我是朝正确的方向还是有更好的做法。我的主要目的是检查尽可能多的浏览器之间的性能差异，使用JavaScript ，我认为在执行复杂的任务（例如渲染3D）时最好记录下来画布。