检测“强大”的浏览器，能够以较快速度处理图形

Question

我正在构建一个移动HTML5服务，在地图图像上显示多边形标记。我使用绘制标记，然后在

上应用CSS3动画来实现标记的动态效果。

这个方案在Android Galaxy S等设备上表现良好，但第二代iPod Touch却无法流畅显示动画效果。这两者都拥有几乎相同的WebKit浏览器功能集，但一个具有500 MHz GPU、64 MB内存，而另一个则配备了1 GHz CPU和700 MB内存。

问题是，如何将设备分为低端和高端类别。这更像是一个关于内存和CPU的问题，但这两个事实从未暴露给JavaScript（这很糟糕）。

你能否轻松获得某种JavaScript渲染速度的测量结果？是否有任何预先组装的表格可以根据用户代理告知设备的CPU、内存和加速状态？

目前，我已经添加了简单的启发式算法，通过尝试确定标记的大小，并始终在移动设备上回退到非动画矩形。然而，这意味着许多移动设备将错过它们本应该轻松实现的闪亮效果。

    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();                                                           
    }

- Mikko Ohtamaa

Answer 1

你可能需要设计一些特性测试，运行相关动画并测量其性能（每秒帧数或类似指标），并存储结果。然后，你可以制定一个策略，根据测得的性能水平（简单图形还是复杂图形等）决定进一步在该设备上进行的操作。

这样的特性测试甚至可以在应用程序启动时运行，并且可以作为您正常启动过程的一部分而出现的可见动画。

实际的特性测试通常比尝试检测特定设备、处理器、时钟速率、GPU等要好得多。

- jfriend00

---

请参考 https://dev59.com/eFjUa4cB1Zd3GeqPTq5F 了解此方法的详细说明。 - Ian

问题在于JavaScript没有暴露“CPU”功能 :( - Mikko Ohtamaa

功能测试几乎总是更好的。 - lowtechsun

@lowtechsun - 那不是我的回答说的吗？ - jfriend00

是的，完全正确。由于我目前正在处理类似的问题，所以我想强调这种方法是可行的。但是，当第一个测量性能由于关闭更少的选项卡或释放更多系统资源而发生变化时，会发生什么呢？为了不在高端设备上提供低端动画/ GIF，需要进行定期性能测试，以避免出现临时阻塞的情况。 - lowtechsun