H5パフォーマンス テストといえば、多くの学生が聞いたことがあるかもしれませんが、パフォーマンス テストの方法や、H5 がどのようなパフォーマンス指標に注意を払うべきかは知りません。今日は見てみましょう。この記事を読んで何かを理解していただければ幸いです。
共通の指標
1. H5 パフォーマンス関連パラメータの導入
ホワイト スクリーン時間: ユーザーが初めて Web ページのコンテンツを見た時間、つまり、最初のレンダリング プロセスが完了した時間
最初の画面時間: ユーザーが最初の画面を見た時間、つまり Web ページ全体が完全に表示された時間
最初のリソースのダウンロード時間: 最初のリソースのダウンロード開始からダウンロード完了までの時間
リソースの合計ダウンロード時間: ダウンロードの開始からすべてのリソースの完了までの時間
ユーザー操作可能時間：ページの読み込みを開始してからユーザーがページを操作できるようになるまでの時間
APP クライアントで H5 のパフォーマンスをテストする場合は、H5 をロードする際の APP の一般的なパフォーマンス指標に注意してください。
メモリ: ページの読み込みの前後でメモリが変化します。これは、画像のサイズなど、H5 のリソースの数とサイズを反映する可能性があります。
CPU: 現在のページのスタイルが複雑すぎる場合は、ページが読み込まれるときに CPU 占有率を観察できます。CPU 占有率が長時間高い場合は、最適化を検討する必要があります。
FPS: 複雑なアニメーション効果やビデオを含む H5 ページでは、重大なフリーズを防ぐためにそれに焦点を当てる必要があります。
2. H5 性能テストのポイント
H5 のパフォーマンスに影響を与える要因はいくつかあります。ネットワーク帯域幅、DNS 解決、サーバー処理能力などです。H5 性能のテストポイントは次のとおりです。
共通ツール
現在、無料のオープンソース ツールが多数あり、ニーズに応じて選択できます。
1、Webページテスト
WebPageTest は、無料のオープンソースのオンライン パフォーマンス評価ツールです。実際のブラウザ (IE や Chrome など) を使用します。リソース読み込みウォーターフォール チャート、ページ速度の最適化チェック、改善提案などの診断情報により、各コンテンツに最終的な評価が与えられます。 。
公式ウェブサイトのアドレスを開きます。
https://www.webpagetest.org
上図の2箇所にテスト対象のURLアドレスを入力します。
3 でアドレス (テスト場所) を選択します。WebPagetest には世界中にテストマシンがあります。ユーザーのアクセスに近い場所からテストする必要があります。ドロップダウンして選択するだけです。Android、iOS、PC などのデバイスを選択できます。さまざまな国と同様に。
テストに使用するブラウザを4か所で選択します。場所が異なればサポートされるブラウザも異なります。
補足: [詳細設定] ドロップダウンをクリックして詳細設定を実行しますが、通常はデフォルトを選択します。
設定が完了したら、「START TEST」をクリックしてテストを開始します。
2、Chrome開発ツール
Chrome DevTools (Chrome Developer Tools) は、Chrome ブラウザに組み込まれた Web ページの作成とデバッグのためのツールのセットです。
テストする Web ページを開き、F12 キーを押して [ネットワーク] オプションを表示します。このオプションの下に、対応するネットワーク要求の時間とタイプ、およびリソース サイズが表示されます。
同様に、Charels などのパケット キャプチャ ツールを使用して分析することもできます。
3、ページ速度
Page Speed は Google のブラウザ プラグインであり、手動でインストールするか Google Chrome に追加する必要があります。
テストする Web サイトを開き、F12 キーを押して PageSpeed オプションを表示します。
「開始」をクリックして分析を開始すると、テスト完了後に分析レポートが生成されます。
4、灯台
Lighthouse は、Chrome プラグインとして、またはコマンド ラインから実行できるオープン ソースの自動化ツールです。
Chrome アプリ ストアで Lighthouse を検索し、ダウンロードしてインストールした後、テストする Web ページを開いて F12 キーを押すと、Lighthouse のオプションが表示されます。
開いたら、「ページ読み込みの分析」をクリックしてページング・ページのパフォーマンスを開始し、パフォーマンス分析レポートを生成します。
レポートのスタイルは次のとおりです。
関連する指標の意味:
最初のコンテンツフル ペイント: ブラウザがコンテンツ (テキスト、画像、キャンバスなど) を初めて画面に描画する時点です。
インタラクティブまでの時間: すべてのページ コンテンツが正常に読み込まれ、ユーザーの操作に迅速に応答できる時点を指します。
Speed Index (Speed Index): 最初の画面の表示コンテンツが画面上に描画される速度を測定します。ページの最初の読み込み時にできるだけ多くのコンテンツを表示すると、多くの場合、より良いユーザー エクスペリエンスがもたらされるため、速度指数の値はできるだけ小さくする必要があります。
最大コンテンツフルペイント: 表示可能領域の最大の「コンテンツ」を持つ表示要素が画面上に表示され始める時点を示します。
合計ブロッキング時間: この分析中に発生したブロッキング時間を示します。
H5 パフォーマンス指標とツールについて、これらを紹介します。読んだ後に役立つと幸いです~
最後に、私の記事を注意深く読んでくださった皆さんに感謝します。互恵性は常に必要です。それはそれほど価値のあるものではありませんが、必要な場合はそれを取り上げることができます。
ソフトウェアテストインタビューアプレット
ソフトウェア テストの質問バンクには、何百万人もの人が参加しました。！！誰が知っているのか！！！ネットワーク全体で最も包括的なクイズ ミニ プログラムです。携帯電話を使用して、地下鉄やバスの中でもクイズに答えることができます。
次の面接の質問セクションが取り上げられます。
1. ソフトウェアテストの基礎理論、2. Web、アプリ、インターフェース機能テスト、3. ネットワーク、4. データベース、5. Linux
6. Web、アプリ、インターフェイスの自動化、7. パフォーマンス テスト、8. プログラミングの基本、9. 時間面接の質問、10. 公開テストの質問、11. セキュリティ テスト、12. コンピューターの基本
これらの資料は、[ソフトウェア テスト] の友人にとって最も包括的で完全な準備倉庫となるはずです。この倉庫は、最も困難な旅を乗り越える何万人ものテスト エンジニアにも同行してきました。あなたにも役立つことを願っています。