2011-07-11 20 views
3

我正在建立一個移動HTML5服務,其中我在地圖圖像上顯示多邊形標記。我通過繪製然後應用CSS3動畫來爲標記生成動畫。檢測能夠以合適的速度執行圖形的「強大」瀏覽器

這是部分成功。像Android Galaxy S這樣的設備可以流暢地顯示動畫,但第二代iPod觸摸屏卻沒有。兩者都具有幾乎相似功能集的WebKit瀏覽器。另一個具有500 MHz GPU 64 MB內存,另一個具有1 Ghz CPU和700 MB內存。

問題是,我如何將設備分成低端和高端類別。這更像是有內存和CPU的事情,這兩個事實從來沒有暴露給JavaScript(這很糟糕)。

  • 您可以輕鬆獲得某種Javascript的渲染速度測量?

  • 所有基於用戶代理告知設備CPU,內存和加速狀態的預組合表?

目前我已經試圖確定標記的大小始終回落到非動畫矩形在移動設備上添加簡單heurestics。然而,這意味着大量的移動設備將錯過Bling Bling的,他們可以很容易地做到

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

回答

3

你可能需要制定某種功能的測試運行相關的動畫,然後測量其性能(每秒幀或類似的東西)並存儲結果。然後,您可以根據測量的性能(簡單的圖形與複雜的圖形等)設計一個策略,以便在該設備上進行的操作。

這樣的功能測試甚至可以在應用程序第一次啓動時在啓動過程中運行,並且可以是看起來是您正常啓動過程一部分的可見動畫。

實際特性測試幾乎總是比試圖檢測特定設備,處理器,時鐘速度,圖形處理器等更好的...

+0

見http://stackoverflow.com/questions/6499776/is-it-可能對基準測試的用戶系統用JavaScript在瀏覽器中詳細說明此方法 – Ian

+0

問題是Javascript不公開功能「CPU」:( –

+0

功能測試幾乎總是**更好**。 – lowtechsun