web-dev-qa-db-ja.com

iOSのモバイルSafariが大きなページでクラッシュする

ページが大きくなりすぎてjQueryでDOMをロードおよび操作すると、Mobile Safariがクラッシュするという問題があります。

IPhoneとiPadの両方で同じ問題が発生します。

モバイルページをトラブルシューティングしてエラーを見つける最良の方法は何ですか？ Mobile Safariをクラッシュさせる可能性のある既知の問題はありますか？

javascriptcssdebuggingmobile-safari
36
Johan Nordberg

私は実際に問題を見つけました。私が思ったようにJSではなく、CSSでした。いくつかの要素をフェードインするCSSトランジションを作成するクラスを追加しました。匿名ユーザーの場合、これらの要素にはdisplay: none;そして、おそらく不透明度の遷移を実行したことはありません。

奇妙なことは、遷移がちょうど2つの要素にあったことです。では、なぜ100以上のコメントがある長いスレッドでのみクラッシュするのでしょうか？

要するに、-webkit-transitionはモバイルサファリのページをクラッシュさせました。

28
Johan Nordberg

同じ問題を抱えていた私にとっては、-webkit-transform: translateZ(0);がSafariのクラッシュの原因でした。

21
IndrekV

私はこの質問に首尾よく答えられたことを知っていますが、私はこれについても何度も頭を壁にぶつけているので、私も5セントを入れたかったです：

ほとんどの答えがすでに指摘しているように、通常はメモリの問題に帰着します。ほぼすべてがtranslateZまたは他の何かのように「メモリパイル」を最終的にひっくり返す最後のビットになる可能性があります。

ただし、私の経験では、実際のCSS（またはJS）コマンドとは特に関係ありません。たまたま、最後の移行が多すぎたのです。

私に大いに役立つ傾向があるのは、display: none。これはプリミティブに聞こえるかもしれませんが、実際にはトリックを行います。これは、ブラウザーのレンダラーに、現時点ではこの要素が不要であるためメモリを解放することを伝える簡単な方法です。これにより、現時点で使用していない要素を非表示にしている限り、あらゆる種類の3D効果を持つ1マイルの長さの垂直スクローラーを作成できます。

19
Mathias

IOSアプリの主な問題は、メモリ使用量です。そのため、ページのメモリ使用量が多すぎる可能性があります。

Mobile Safariは巧妙なテクニックを使用しているため、ページ全体をメモリに常駐させる必要はなく、その一部のみをメモリに常駐させる必要があります。ページ内の何かがこのメカニズムを無効にしているのか、それとも効果が低いのかを確認できます。

いずれにせよ、ポイントの提案をもっと与えるために、あなたのページについてのより多くの情報は本当に素晴らしいでしょう。

ところで、デバイスが保存するクラッシュログからいくつかのヒントを得ることができます。 [設定]で見つけられるかどうかを確認します。

  1. 全般
  2. 約
  3. 診断と使用
  4. 診断と使用状況データ

メモリに問題がある場合は、「signal（0）」のようなものを見つける必要があります。これが「メモリ使用量のために殺された」ことだけを意味するかどうかはわかりませんが、私は通常、シグナル（0）を見つけたときにこれを当たり前だと思っています。

そうでなければ、何が悪いのかを教えてくれるかもしれません...

お役に立てれば。

12
sergio

メモリ制限とJavascript実行時間制限の両方がありますが、実際にそれらにヒットする方法については少し曖昧です。一般的なレポートでは、サイズが10MBを超えるページでは問題が発生し、Javascriptの実行は10秒に制限されます。

詳細については、 Appleのドキュメント を参照してください。

3
Joshua

最近、多くの画像（30以上で十分）とメニューのいくつかの変換を含むWebアプリページでモバイルサファリがクラッシュする問題がありました。多くの試行錯誤の後、 LinkedIn が行うものと同様のソリューションで解決しましたが、angularjsを使用した無限スクロールです。 requestAnimFrameと2つのexpanding/shrinking divs（jsスタイル属性を使用） ）リストの上下で、ビューポートの近くにあるいくつかのイメージコンテナを除くすべてのイメージコンテナ（上にオーバーレイされている他のもの）を削除します。スクロールパフォーマンス（ネイティブ、jsなし）は良好であり、メモリ消費は抑制されています。

1
Florian

同様の問題がありました。WebページはAndroidデバイスでチャームのように機能し、IOS（iphoneおよびシミュレーター）でクラッシュしました。

多くの調査の後（ios_webkit_debug_proxyも使用）、問題がjQuery readyイベントに関連していることがわかりました。

少しタイムアウトを追加することで問題は解決しました。私のアプリケーションもiframeを使用していました。

$(document).ready(function () {
    window.setTimeout(function () { ready(); }, 10);
});
0
Matteo Conta