0

合計約 200Mb-250Mb の大量の外部 JPG/PNG 画像を HTML5 Image() オブジェクトにロードすると、Javascript のパフォーマンスが影響を受ける理由を知っている人はいますか? パフォーマンスもキャッシュの影響を受けるようです。すなわち。以前のブラウジングでキャッシュがいっぱい (-ish) の場合、現在のサイトのパフォーマンスは大幅に低下します。

私はそれを大まかに解決できると言います。

  1. キャッシュを手動でクリアします。
  2. ブラウザを最小化し、約 20 秒待ってブラウザを再度開きます。その後、iOS/ブラウザはメモリを再利用し、JS を正常に実行します。

iOS が現在のタスクを実行するために必要なメモリを再利用することを期待していましたが、そうではないようです。もう 1 つの回避策は、200Mb の「キャッシュ クリア」画像を Image() オブジェクトにロードし、src = "". これは役立つようですが、エレガントなソリューションではありません...

助けてください？

4

2 に答える 2

2

まず第一に、 LinkedInEngineeringブログの優れた投稿を読んでください。それを注意深く読み、アプリケーションで試すことができる最適化があるかどうかを確認してください。それらすべてを試しても、それでもパフォーマンスの問題が解決しない場合は、読み進めてください。

ページに画像ギャラリーまたは雑誌スタイルのコンテンツ領域があると思います

この画像領域を別の場所に配置するのはiframeどうですか？次にできることは次のとおりです。

  1. 2つのiframeがあります。1つだけが表示され、時間内にアクティブである必要があります。

  2. 画像を最初のiframeに読み込みます。ロードされた画像のサイズを追跡します。正確なサイズの追跡が難しい場合

    numberOfLoadedImages * averageImageSize

    かなり良い近似かもしれません。

  3. その数がしきい値に近づくと、現在表示されているコンテンツを2番目のiframeにプリロードし始めます。
  4. iframeの表示を反転して、2番目のiframeがアクティブになるようにします。
  5. 最初のフレームの内部コンテンツをクリアします。
  6. 必要に応じて手順全体を繰り返します。

これがうまくいくかどうかはわかりませんが、iPadのWebKitエンジンがフレームのメモリを個別にクリアすることを願っています。

編集：あなたがゲームを書いていることが判明しました。

ゲームの場合、同時に多くのゲームオブジェクトを画面に表示したいので、それらの一部を単純にアンロードすることはできないと思います。その場合のいくつかの提案があります：

  1. ゲームにDOMを使用しないでください。メモリが多すぎます。幸いなことに、あなたはcanvasすでに使用しています。
  2. 画像をスプライトします。画像スプライトは、リクエストの数を減らすのに役立つだけではありません。また、Imageオブジェクトの数を減らし、ファイルごとのオーバーヘッドを低く抑えることができます。IEブログcanvasで、アニメーションにスプライトを使用する方法について読んでください。
  3. 画像を最適化します。画像用のファイルサイズオプティマイザはいくつかあります。SmushItはその1つです。あなたの画像のためにそれを試してみてください。YUIブログのStoyanStefanovによるこの素晴らしいシリーズで議論されている他のテクニックに注意を払ってください。
  4. ベクターグラフィックを試してください。SVGは素晴らしく、canvgはそれをキャンバスの上に描画できます。
  5. ゲームの世界を単純化してみてください。たぶん、いくつかの背景オブジェクトはそれほど詳細である必要はありません。または多分あなたはそれらのためのより少ないスプライトで逃げることができます。または、同じグループの異なるオブジェクトに画像フィルターとマスクを使用することもできます。Dave Newtonが言ったように、iPadは非常に制約のあるデバイスであり、比較的低品質のスプライトで逃げることができる可能性があります。

これらはすべて、ロードする必要のあるデータの削減に関連する提案でした。あなたのために働くかもしれない他のいくつかの提案。

  1. 必要になるイメージをプリロードし、不要になったイメージをアンロードします。ゲームに「レベル」または「ミッション」がある場合は、現在のスプライトにのみ必要なスプライトをロードします。
  2. 最初に「人気のある」画像を読み込んで、残りの画像をバックグラウンドで1回ダウンロードしてみてください。<iframe>メインのゲームループがダウンロードによって中断されないように、個別に使用できます。ダウンローダーフレームを調整するために、クロスフレームメッセージングを使用することもできます。
  3. 最も人気のある画像を、、に保存localStorageできApplication CacheますWebSQL。それぞれ5MBのストレージを提供できます。これは、 15メガの永続キャッシュです。localStorageとに型付き配列を使用できることに注意してくださいWebSQL。また、これを操作するのApplication Cacheは非常に難しいことにも注意してください。
  4. ゲームをPhoneGapアプリケーションとしてパッケージ化してみてください。このようにして、ゲームをプレイする前にユーザーが大量のデータをダウンロードするのを防ぐことができます。ページを開くためだけに1回のダウンロードで200メガバイトを使用するのは多すぎます。ほとんどの人はそれを待つことすらしません。

それ以外は、画像でキャッシュを上書きするという最初の提案は実際に有効です。すぐにやらないでください。代わりに、ゲームのダウンロードサイズを減らす可能性を探ってください。

于 2012-05-14T13:19:46.497 に答える
0

現在ビューポートにないすべての画像を display:none に設定することで、影響を軽減することができました。これは背景画像でしたが、100Mb を超える画像をテストしていないため、これが本当に役立つかどうかはわかりません. しかし、試してみる価値は間違いありません。

于 2012-05-14T12:22:11.660 に答える