エントリーレベルのスマートフォンは、リソースが限られたハードウェアにて動作し、しばしばネットワーク接続が遅く、位置情報の取得が粗い環境で使われます。このガイドでは、このような機器で性能試験を実施する際に厳しく考慮すべき、アプリの性能・安定性に影響を与える要素と、調査・最適化に使用できるツールを概説します。

このガイドのターゲットはアプリがローエンドのFirefox OS端末、及びその他要素にてどのように動作するかの影響を判断する必要があるアプリ開発者、レビュアーとします。必ずしもこのガイドを使う人全員がローエンド端末に触れた事があるとは想定していません。

: このガイドは開発中のアプリをデスクトップPCのブラウザー、Firefox OS Simulator、最終的には端末上などで開発(Different ways to run Gaiaを参照のこと)を行う際の手助けになります。異なるバージョンのFirefox OSに対してテストを行う場合、ツールを切り替える必要があるかもしれません。あなたのテストするバージョンにて利用可能な最も強力なツールを選択してください。

メモリー

このセクションではどのようにデバッグし、メモリー制約のために最適化するかを議論します。

端末上での開発

Firefox DevTools WebIDE Monitor (2.1以降)

新しいWebIDE Monitorは接続された実行中のFirefox OSの動作中のすべてのプロセスを対話型のメモリーグラフとして表示します。このモニターツールは開発中であり、Nightlyでのみ使用可能です。現在はFirefox OSの端末が2.1以上の場合使用できます(古いバージョンのFirefox OSまたはFirefox Simulatorでは動作しません)。 実行するには、WebIDEを起動し、Firefox OSが2.1のデバイスとPCを接続し、正常に接続ができたことを確認後、WebIDEのメインメニュー画面の「Runtime」をクリックし、その後「Monitor」をクリックしてください。

あなたのアプリケーションが使用している平均メモリ使用量、予想外のメモリグラフの跳ね上がりを確認してください。ガベージコレクションが動作した時にグラフが落ちることを確認できるでしょう。いくつかのメモリーがプロセス間で共有されていることを注意してください。

Firewatch (1.1以降)

FirewatchはWebIDE Monitorツールの前身となったツールであり、接続したFirefox OS端末(1.4までのバージョンサポート)の実行中のメモリーを表示することができるノードベースのコマンドラインツールです。このツールはまた「performance profiles」を取得し、「about:memory details」を読み込むことができます。インストールして実行するにはGitHubのページから取得し、手順にしたがって実行してください。

メモリーを監視することは開発中のアプリケーションテストする上で負担が少なく実施できるツールです。WebIDE Monitorと同じように使用することが可能です。

On-device Developer HUD (1.4以降)

Developer HudはFirefox OS 1.4のデバイス上に存在する開発ツールです。端末のディスプレイにて様々な性能とプラットフォームの詳細をリアルタイムに表示します。現在の使用ケースのために最も重要なのは、現在のApp memoryの使用状況、JS objectsJS stringsJS otherDOM、Styleなどへ分解して表示ができることです。

このツールを全体のメモリー使用量の感覚を得るためにテストの間に実行し続けてください。基本のメモリー使用量をわかっていると、メモリー使用量を削減できたか、または最適化を適用する時に後退したかをあなたは確認することができるようになります。どのインタラクションにより使用メモリが減少するのか、<wbr></wbr>増加するのかが直ちにわかるようになります。

デスクトップ上での開発

about:memory

最も基本的なメモリーの使用状況のレポートを取得する方法は、デスクトップ版FirefoxのURLにて「about:memory」を入力することです。command-line toolはFirefox OSにて同じレポートを取得可能です。

Chrome Devtools

Firefox devtoolsにメモリー監視ツールが登場するまでは、デスクトップ版Firefoxのメモリー使用情報を得るために、Chrome’s Heap Profilerが使用可能です。

帯域

このセクションでは、帯域幅の過剰な使用についてのデバッグを行うために利用可能なツールを議論します。

デスクトップ版

ネットワークモニタ

ほとんどの開発者はネットワークモニタでネットワークの要求を追跡します。どれほど効率的にあなたのサーバーが静的なデータ(準備されたキャッシュ)をキャッシュし、ユーザー(空のキャッシュ)のために初期のペイロードがどれほど重いかも測定できます。しばしばローエンドの端末が利用するであろうEDGE(実測150KB/s)を使用することだけを考慮して、全体の要求サイズをできる限り小さくしておきます。空のキャッシュ上の1.5メガバイトプライミングキャッシュ500キロバイトを推奨限度ですが、これはより軽いアプリケーションと、より良いユーザーエクスペリエンスを生み出します。

デバイス機能

このセクションでは、低メモリ端末でのデバッグそしてどのようにそれらに対処するに留意すべきであるいくつかの既知の端末の機能/制限を詳しく説明します。

App Storage

アプリが保存できるFirefoxプロファイルのための内部ストレージの最大は、約80Mbです。この領域を考慮しパッケージ型アプリは5 MB以下にすることが一般的なルールです。

メモリー

最も少ないRAMでのForefox OSを動作可能なハードウェア構成は、コードネームTarakoと呼ばれる128MBの構成です。 より一般的な256MB構成においてさえ、アプリケーションがバックグラウンドで動作時は、メモリー使用量を回復するために使用メモリを回収します。Firefox OSのリファレンス機であるFlameではテストを行う際にメモリの使用量を1GBから最低256MBまで設定変更することが可能です。

位置情報

ローエンドのFirefox OS端末ではA-GPSを持たないため、Wi-Fi位置システムを使用し精度の低い位置情報を使用できるだけです。あなたのアプリが都市レベル精度を期待する場合、それで問題ないはずです。もしより高い精度が要求されるならば、代替の位置オプションを考慮する必要があるでしょう。

接続性

低メモリー端末が一般的な市場では、不安定な2G接続性は信頼できないデータサービスとなることがあります。データを格納したり、サーバー·ラウンドトリップペイロードを最小化したり、リクエストが失敗したときにきちんとフォールバックしたりすることにより、オフラインで動作するようにアプリケーションを最適化します。アップデートのために定期的にサーバに接続する必要がある場合必要なAPIリクエストをスケジュールするためにFirefoxのプッシュ通知を使用してください。

メモリーを使用するベスト・プラクティス

電話でのメモリが少なくなるとバックグラウンドで動作しているアプリケーションはクリーンアップされます。このタスク終了システムはLow-Memory-Killer (LMK)と呼ばれ、メモリをクリーンアップする閾値は各端末のバージョン、アプリケーションのプライオリティ構成により異なります。 最前面で動作しているアプリケーションはより高いプライオリティを持ち、メモリーが危険なほどに低くなった場合のみ終了されます。深刻さを表示するために、このタスク終了システムはOut-Of-Memory (OOM)と呼ばれ、ユーザーにはクラッシュしたように見えます。

: どのようにFirefox OSにてメモリー管理が処理されるかについてもっと知りたい場合は、Out of memory management on Firefox OSの記事を読んでください。

タスク終了システムにアプリケーションを終了させられることを避けるためには、 メモリ使用量を考慮してください。ただ必要なぶんを取得して、できるぶんだけ開放します。下記にいくつか従うべき好例があります。

DOM

画像のリサンプリング

反応を良くするためには画像のサイズを大きな画像サイズから表示するサイズに合わせて調整した画像を使用し、大きな画像を使用することは避けるべきです。低解像度の画像を起動し、高い解像度の画像が必要になった時にのみ高い解像度の画像を使用すべきです

スプライトをイメージする

メモリーに蓄積したイメージインスタンスの量を最小化するために、CSSスプライトのアイコンとイメージを結合してください。これは圧縮されたファイルで通信することにより、通信量を減らすことになります。

イメージを<img>にするかCSSにするか

CSSにおいて、その時それらが使われない時にさえ、CSSにおいて定義されたすべてのイメージがロードされるため、レイアウトとアプリデザインのために必要なものに定義されたイメージを最小化してください。メッセージアプリの絵文字のようなものは<img>要素を使う時にオンデマンドでイメージをロードし使用しなくなった時にメモリーから削除することができます。

アイコンフォント

フォントはアプリケーションアイコンおよび均一な顔文字を実装するための好まれた方法です。他のオプションはCSSスプライトとSVGですが、すべてより多くのメモリーを使用し性能が低いです。アイコンセットをカスタマイズするためにフォントジェネレータを使用することを考慮してください。実際あなたが使うものを含んでいるはずです。より多くの絵文字をダウンロードする必要はなくメモリーと帯域幅の浪費とわかるでしょう。

破棄または再利用エレメント

要素を後に使用するためにはDOMまたはメモリーに保持することが、共通のテクニックです。いくつかのサイトは1ページアプリの前の表示していた画面を保存しており、ユーザーが画面に戻ってきた時に再利用しています。別のメモリの大食いは、ユーザーがこれ以上既存のものに追加された要素が無いとボタンを押すまで終了しないリストです。隠されたDOM要素は、特にたくさんのイメージを含んでいる時に、しばしば最も大きいメモリ使用量のページになるときがあります。

メモリ内のページを維持することはより速く閲覧することができたとしても得られる性能メモリのオーバーヘッドのバランスを考える必要があります。無限のスクロールに親切な選択肢は、単にページレイアウトであり、古い要素を新しいリストと取り替えます。別のより精巧な解決策はリスト要素をプールすることであり、例えば新しいものをロードする際に古いエントリをリサイクルすることです。

ストレージ

ストレージ vs メモリーキャッシュ

共通の性能向上のテクニックはIndexedDBのようにクライアント側データベースからデータをロードし、メモリーに記憶しておくことでそれ以降により早く処理を行えるようにすることです。これは、構造化されたデータだけではなく、テンプレート、またはローカライズ情報も含みます。 データの量と複雑さに応じて、かなりのメモリを取得することができます。

メモリが問題になる場合必要なときにデータをロードし、パフォーマンスヒットを取ります

オーディオ

Web Audio APIは、特にゲームのために、オーディオ再生を実施するために推奨され、より多くのメモリー効率的な方法です。バッファーに読み込み、キューに追加することでメモリの制御をきめ細かく行うことができるようになります。HTML5の <audio>という要素は例えばストリーミングのようなユースケースがあります。どちらの場合もどちらの両方の最も向いた方法にて使用し、結びつけることができます。

ドキュメントのタグと貢献者

 このページの貢献者: T.Ukegawa, Uemmra3
 最終更新者: T.Ukegawa,