我正在构建一个移动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(); }
你可能需要设计一些特性测试,运行相关动画并测量其性能(每秒帧数或类似指标),并存储结果。然后,你可以制定一个策略,根据测得的性能水平(简单图形还是复杂图形等)决定进一步在该设备上进行的操作。这样的特性测试甚至可以在应用程序启动时运行,并且可以作为您正常启动过程的一部分而出现的可见动画。实际的特性测试通常比尝试检测特定设备、处理器、时钟速率、GPU等要好得多。