Javascript “检测”；“强有力的”；能够以相当快的速度绘制图形的浏览器

我正在构建一个移动HTML5服务，在地图图像上显示多声道标记。我通过绘制标记并应用CSS3动画来设置标记的动画

这部分是成功的。像安卓Galaxy S这样的设备可以流畅地显示动画，但第二代iPod Touch却不能。这两款浏览器都有一个WebKit浏览器，具有几乎相似的功能集。另一个有500 MHz GPU 64 MB内存，另一个有1 Ghz CPU和700 MB内存

问题是，如何将设备分为低端和高端两类。这更像是拥有内存和CPU的问题，这两个事实永远不会暴露在Javascript中（这很糟糕）

• 您能否轻松获得Javascript的某种渲染速度度量

• 是否有基于用户代理告知设备CPU、内存和加速状态的预装配表

目前，我通过尝试确定标记的大小添加了简单的heurestics，并且在移动设备上总是返回到非动画矩形。然而，这意味着许多移动设备将错过他们可以轻松做到的闪光点

    var pixelAreaThreshold = 200*200;

    var area = (this.bounds[1][0] - this.bounds[0][0]) * (this.bounds[1][1] - this.bounds[0][1]); 

    if(area > pixelAreaThreshold && isMobile()) {
        // <canvas> is very big and may slow down mobile devices
        // (iPod)
        drawUsingCanvas = false;
    }

    var marker;

    if(drawUsingCanvas) {
        // Go for animated polygon if the polygon is small,
        // or if we are using a desktop browser             
        marker = this.drawPolyCanvas(canvas, context)
        marker.addClass("room-marker-animated");
    } else {
        marker = this.drawRectangle();                                                           
    }

var pixelAreaThreshold=200*200；
var area=（this.bounds[1][0]-this.bounds[0][0]）*（this.bounds[1][1]-this.bounds[0][1]）；
如果（区域>像素区域阈值（&isMobile（））{
//非常大，可能会减慢移动设备的速度
//（iPod）
drawUsingCanvas=false；
}
var标记；
如果（使用画布绘制）{
//如果多边形很小，则选择动画多边形，
//或者如果我们使用的是桌面浏览器
marker=this.drawPolyCanvas（画布，上下文）
marker.addClass（“房间标记动画”）；
}否则{
marker=this.drawRectangle（）；
}

您可能需要设计某种功能测试来运行相关动画，然后测量其性能（每秒帧数或类似值）并存储结果。然后，您可以根据测量的性能（简单图形与复杂图形，等等），为您希望在该设备上执行的操作制定策略

这样的功能测试甚至可以在应用程序首次启动时的启动过程中运行，并且可以是一个可视的动画，似乎是正常启动过程的一部分

---

实际的功能测试几乎总是比试图检测特定设备、处理器、时钟频率、GPU等更好。

有关此方法的详细信息，请参阅。问题是Javascript没有公开功能“CPU”：（功能测试几乎总是更好。@lowtechsun-这不是我的答案所说的吗？是的，完全是这样，因为我目前正在研究类似的方法，所以我想强调这种方法是有效的。但是，当第一次测量到的性能因打开的选项卡较少或释放的系统资源较多而发生变化时，会发生什么情况？人们必须这样做定期性能测试，以避免在暂时堵塞的高端设备上提供低端动画/gif。