H5 クラッシュ リサーチ_html/css_WEB-ITnose

Webview でページが適切に実行されるための前提条件は、効率的で安定した Webview コンテナーを備えていることであることはわかっています。コンテナーの効率と安定性は、コンテナー プロバイダーによって保証されるだけでなく、コンテナー ユーザーにも準拠する必要があります。そうしないと、ページがクラッシュする可能性があります。これらのガイドラインは何ですか?どのような上位レベルのコードがコンテナを異常終了させるのでしょうか?これがこの記事で説明する必要があることです。

H5 クラッシュ問題の概要

以下の図は H5 クラッシュの大まかなフローチャートです:

フロントエンドはページクラッシュのステータスとスタックをキャプチャできないため、H5 ページで発生したエラーは に渡されます。 Java および下位レベルのネイティブは、コンテナーが異常終了するまで待機し、終了時にコンテナーがスタックをログに書き込み、次回コンテナーが開かれたときにスタック情報が報告されます (定期的に報告される場合もあります)。 ）。

H5 クラッシュ初期調査

テストコード倉庫アドレス:

git clone https://github.com/barretlee/h5crash.git;cd demo;

注: コードは Webview コンテナーでテストする必要があり、PC ブラウザーでは例外は発生しません。

H5 クラッシュの原因は明らかではありませんが、経験と調査から判断すると、次の 3 つのタイプに大別できます:

1. メモリの問題

• テスト方法: クロージャを使用し、メモリ量を継続的に増加します。 、増加するかどうかを確認します どの間隔サイズで、WebView コンテナーが異常になります
• テストアドレス: https://rawgit.com/barretlee/h5crash/master/demo/crash-memory.html (このページを開くユーザーWeChat、Weibo、またはその他のクライアントでは、クリックしてテストし、100M メモリを選択できます。予想通り、クライアントはクラッシュします。)

既存の干渉: この種のテストには、次のような多くの干渉があります。デバイスタイプ、システムタイプ(iOS/Android)、デバイスメモリ動作状態など

2. レイヤー数の問題
Chrome ドライバーにはこのデータのインターフェイスが用意されておらず、現時点ではこのデータを取得するより良い方法はありません。

テスト方法: さまざまな方法でレイヤーを作成し、ページのクラッシュ状況を観察します

テストアドレス: https://rawgit.com/barretlee/h5crash/master/demo/crash-layer.html

• <script>var Closure = function() { var _cache = []; var cache = 0; var add = function(size) { cache += size; size = size * 1024 * 1024; _cache.push(new Array(size).join('x')); refresh(); }; var refresh = function() { r.innerHTML = '内存消耗： ' + cache + 'M'; }; return { cache: _cache + 'M', add: add, refresh: refresh }};var closure = Closure();</script><button onclick="closure.add(1)">增加 1M 内存消耗</button><button onclick="closure.add(10)">增加 10M 内存消耗</button><button onclick="closure.add(20)">增加 20M 内存消耗</button><button onclick="closure.add(50)">增加 50M 内存消耗</button><button onclick="closure.add(100)">增加 100M 内存消耗</button><div id="r">内存消耗：0 M</div>

実際、複数のレイヤーを作成するとメモリが大量に消費されます。ページクラッシュは過剰なメモリ消費が原因である可能性があります

3. 同時実行性の問題

テスト方法: 複数の異なるリクエストを同時に発行してみてください。フェッチリクエスト、

既存の干渉: デバイスの種類、デバイスの CPU 使用率、ネットワーク状態など。
• H5 クラッシュ テスト結果

テスト結果:

不透明度、アニメーション、位置などを使用してレイヤーを作成します。1 ワットがあってもページは大きく変わりませんが、変換を使用して 2k ～ 5k のレイヤーを作成します。ページがスタックします 数秒後にすぐにクラッシュします。

メモリは一度に 20M を消費すると、クライアントがすぐにクラッシュすることが判明しました。
同時リクエストでも応答の問題が発生します。 API と CSS リソースは 1k の同時実行です。リクエストには問題ありませんが、XHR とスクリプト リソースのリクエストでは特に問題が顕著です。ページはクラッシュしませんが、ページは一時停止アニメーション状態に入ります。

上記の臨界値は依然として正確である可能性があります。

概要

この記事は主に H5 クラッシュに関する予備調査であり、テストには多くの誤りがある可能性があり、テスト方法も改善する必要がありますが、これらの方向に沿って結論を見つけるのは簡単です。
将来的には、より意味のある境界データと検出ツールが提供される予定です。