web-dev-qa-db-ja.com

iOSおよびその他のタブレットでのSVGパフォーマンスの状態は？

視覚化のためにD3.jsとSVGを使用することに決めたため、SVGはデスクトップブラウザーまたはネイティブシェルで正常に動作するように見えますが、iOSモバイルプラットフォームのパフォーマンス速度の低下に本当に困惑しています。

次のテストによると、SVGのパフォーマンスは向上しており、Canvasの速度にそれほど遅れていないようです。これは朗報です。

悪いニュースは、新しいiPadのSafariブラウザでこれらのテストを実行すると、SVGとCanvasの両方で速度が大幅に低下することです。ひどいニュースは、iPad用の新しいChromeブラウザでこれらのテストを実行すると、速度がさらに低下することです。

私は、GoogleがAppleのNitro JavaScriptエンジンによって加速されていないUIWebviewを使用することを余儀なくされていることを読みました。また、AppleはHTML5を推進していますが、デモは独自のSafariブラウザでのみ実行されます。

とにかくここの問題は何ですか？私のアプリの最適なターゲットはモバイルですが、D3.jsのような優れたAPIやSVGのパフォーマンスなどのHTML5標準が使用されている場合でも、これはAppleが自分の予定の進捗を保留したいという理由だけですか？それはとにかくそれが私にどのように見えるかです。これらのテストがAndroidでどのように表示されるかわかりませんか？知っていただければ幸いです。テストが陽性である場合は、多分私はiPadを取り除き、すでにAndroidを使用します。

結論として、これらの速度の問題のために、HTML5テクノロジーを使用してアプリを作成することが可能かどうかはわかりません。また、将来はHTML5に向かうので、私はObjective-Cの学習に興味がありません。私はウェブとその標準を信じていますが、ブロックされているようです。私はこのジレンマの解決策を知ることに非常に興味があります。

iosperformancesvgd3.js
38
user962052

iOS7は、SVGをJavaScriptでアニメーション化する際のパフォーマンスが著しく悪いですが、静的なSVGの描画は非常に高速です。私たちは iOS7リリースのパフォーマンスに関するブログ を書きました。

更新：iOS7.1では、JavaScriptアニメーションのパフォーマンスの問題が修正されました。 50 fpsに戻りました

7
Michael Mullany

最初の世代のiPadでd3.js/SVGを見つけたところ、デスクトップブラウザー（FF/Chrome/IE 9+）で同じアプリを実行するよりも非常に遅いことがわかりました。

私がここで試みたさまざまな改善点を書き留めました： http://hivemindmap.blogspot.co.uk/2013/01/html5-and-interactive-graphs.html

3
MarkH

通常、モバイルデバイスではデスクトップキットよりもパフォーマンスが低下します。一般的に、彼らのハードウェアはそれほど強力ではなく（完全な速度よりも低消費電力に向けられています）、はるかに少ないRAMと遊ぶためのストレージがあります。Chromeには複数のプロセッサが搭載されており、8 GB RAMと途方もなく強力なGPUを自由に使用できます。私のiPadでは、そのレベルの電力に近いものはありません。

サードパーティのiOSアプリケーション（Chromeを含む）はNitroを使用できません。これは、Nitroがメモリを実行可能としてマークすることができ、（セキュリティ上の理由から）サードパーティのアプリケーションがそのようにすることを信頼されていないためだと思います。ほとんどのHTML5は、iOSのどのブラウザーでも機能します（Opera Miniを除く）。キャンバスとSVGのアニメーションは、すべてJavaScriptで駆動されるため、Safariよりも遅くなります。ニトロへのアクセスはそれらを後退させます。 これはもう当てはまりません：iOS 8以降、サードパーティのアプリはWKWebViewフレームワークを使用できるようになりましたdoes同じ高さにアクセスできますSafariとしてJavaScriptエンジンを高速化します。

ネイティブコードは、ハードウェアに非常に近く、ウェブスタックを経由するのではなく、ディスプレイAPIに直接アクセスするため、通常は高速になります。

通常、解決策はすべてを単純化することです。ネイティブゲーム開発者が3Dゲームの複雑さを大幅に削減してiOSデバイスで機能させる必要があるのと同じように、Web開発者はSVGとキャンバスアプリの複雑さを削減する必要があります。ページの周りを飛ぶものが少ないほど、一般にパフォーマンスが高くなります。

あなたがすることができる多くのトリックと主題についての多くの読書があります。 http://www.html5rocks.com/en/tutorials/canvas/performance/ を読んでください http://www.html5gamedevs.com/tag/performance/ =、および残りのGoogle。個人的には、概念実証を作成し、アイデアを完全に破棄する前にテストします:)

0
Olly Hodgson