背景

パフォーマンスは Web サイトとアプリケーションの根幹です。Web サイトのパフォーマンスが高いほど、ユーザーエクスペリエンスが向上します。同時に、Web サイトの速度も検索エンジンのランキングの要素となります。したがって、Web サイトのパフォーマンスの良さは収益指標に直接影響するため、技術的な観点からビジネス上のメリットを得るには Web サイトのパフォーマンスを向上させる必要があります。

パフォーマンス最適化のための指標

RAIL モデルは、Google が提供するユーザー中心の一連のパフォーマンスモデルであり、パフォーマンスを考慮するための構造を提供します。このモデルは、ユーザーエクスペリエンスを主要なアクション (クリック、スクロール、ロードなど) に分類し、各アクションのパフォーマンス目標を定義するのに役立ちます。RAIL は次の略称です。

応答: 応答
アニメーション：アニメーション
アイドル: アイドル
荷重: 次の図に示すように荷重します。

応答

ユーザー入力によって開始された遷移は 100 ミリ秒以内に完了するため、ユーザーはインタラクションを瞬時に感じられます。

100 ミリ秒以内に応答を可視化するには、ユーザー入力イベントを 50 ミリ秒以内に処理する必要があります。これは、ボタンのクリック、フォームコントロールの切り替え、アニメーションの開始など、ほとんどの入力に対して機能します。ただし、これはタッチドラッグやスクロールでは機能しません。
逆説的に聞こえるかもしれませんが、ユーザー入力に即座に応答することが常に正しいとは限りません。この 100 ミリ秒の時間枠を使用して、リソースを大量に消費する他の作業を実行できますが、ユーザーの邪魔にならないように注意してください。可能であればバックグラウンドで動作する必要があります。
完了までに 50 ミリ秒以上かかる操作に関するフィードバックをお気軽にお寄せください。

现在我也找了很多测试的朋友，做了一个分享技术的交流群，共享了很多我们收集的技术文档和视频教程。
如果你不想再体验自学时找不到资源，没人解答问题，坚持几天便放弃的感受
可以加入我们一起交流。而且还有很多在自动化，性能，安全，测试开发等等方面有一定建树的技术大牛
分享他们的经验，还会分享很多直播讲座和技术沙龙
可以免费学习！划重点！开源的！！！
qq群号：110685036

50ミリ秒ですか、それとも100ミリ秒ですか?

目標は入力に 100 ミリ秒以内に応答することですが、なぜ予算が 50 ミリ秒しかないのでしょうか? これは、多くの場合、入力処理以外に実行する必要のある作業があり、その作業により、許容可能な入力応答に使用できる時間の一部が消費されるためです。アプリケーションがアイドル時間中に推奨される 50 ミリ秒のチャンクで作業を実行する場合、これらの作業チャンクのいずれかで入力が発生すると、最大 50 ミリ秒キューに入れられる可能性があることを意味します。これを念頭に置くと、実際の入力処理に使用できるのは残りの 50 ミリ秒だけであると想定しても問題ありません。この影響は次の図に示されています。アイドル状態のタスク中に受信した入力がどのようにキューに入れられ、利用可能な処理時間が短縮されるかを示しています。

アニメーション

10ミリ秒でフレームを生成

アニメーションの各フレームを 10 ミリ秒以内に生成します。技術的には、フレームあたりの最大バジェットは 16 ミリ秒 (1000 ミリ秒/1 秒あたり 60 フレーム ≈ 16 ミリ秒) ですが、ブラウザーがフレームをレンダリングするのに約 6 ミリ秒かかるため、ガイドラインはフレームあたり 10 ミリ秒です。
目標は滑らかなビジュアルです。ユーザーはフレームレートの変化に気づくでしょう。

アイドル状態

アイドル時間を最大化して、ページが 50 ミリ秒以内にユーザー入力に応答する可能性を高めます。

負荷

ユーザーのデバイスとネットワークの機能に応じて、関連する高速読み込みパフォーマンスを最適化します。現在、低速の 3G 接続を使用するミッドレンジのモバイルデバイスでは、最初のロードで5 秒以内にインタラクティブになることが望ましいです。
以降の読み込みでは、ページを 2 秒以内に読み込むことが理想的な目標です。

API を通じてメトリクスを動的に取得する

API を介して Web ページのリアルタイムのインデックスデータを取得する方法は、最適化する上で非常に重要です。一般に、パフォーマンスオブジェクトを通じて定期的なパフォーマンス指標データを取得します。

以下に、最も一般的に使用される値のみを示します。

NavigationStart: ブラウザが現在の Web ページを処理する開始時刻
fetchStart: ブラウザがドキュメントを読み取るために HTTP を開始したときのミリ秒のタイムスタンプ
DomainLookupStart: ドメイン検索が開始されたときのタイムスタンプ
domainLookupEnd: ドメイン検索の終了のタイムスタンプ
connectStart: HTTP リクエストのサーバーへの送信が開始されるタイムスタンプ
connectEnd: ブラウザとサーバー間の接続が確立されました
requestStart: ブラウザが HTTP リクエストをサーバーに送信するときのタイムスタンプ
responseStart: ブラウザがサーバーから最初のバイトを受信したときのタイムスタンプ
responseEnd: ブラウザがサーバーから最後のバイトを受信したときのタイムスタンプ
domLoading: ブラウザが Web ページの DOM 構造の解析を開始する時刻
domInteractive: Web ページの DOM ツリーが作成され、埋め込まれたリソースの読み込みが開始される時刻
domContentLoadEventStart: Web ページの domContentLoad イベントが発生する時刻が間違っています
domContentLoadedEventEnd: Web ページ上で実行する必要があるすべてのスクリプトが完了した時刻と domReady の時刻
loadEventStart: 現在の Web ページのロードイベントコールバック関数の実行が開始されるタイムスタンプ
loadEventEnd: 現在の Web ページのロードイベントコールバック関数の実行終了のタイムスタンプ

パフォーマンスデータ名	説明する	計算方法
時間のかかるDNSクエリ	時間のかかるDNS解決	ドメインルックアップ終了 - ドメインルックアップ開始
時間のかかるリクエストへの応答	時間のかかるネットワークリクエスト	応答開始 - 要求開始
DOM 解析に時間がかかる	DOM 解析に時間がかかる	domInteractive - 応答終了
時間のかかるリソースの読み込み	時間のかかるリソースの読み込み	ロードイベント開始 - domContentLoadedEventEend
DOM_READY 時間がかかる	DOM ステージのレンダリングに時間がかかる	domContentLoadedEventEend - fetchStart
最初のレンダリング時間	最初のレンダリング時間/白画面時間	応答終了 - フェッチ開始
初めてのインタラクティブで時間がかかる	初めてのインタラクティブで時間がかかる	domInteractive - fetchStart
最初のパッケージには時間がかかる	初回パッケージ時間	応答開始 - ドメインルックアップ開始
ページが完全に読み込まれるまでに時間がかかります	ページの全読み込み時間	ロードイベント開始 - フェッチ開始
TCP接続時間	時間のかかる TCP 接続	接続終了 - 接続開始

カスタムインジケーター収集いくつかのインジケーターをカスタマイズすることで、必要なデータを収集できます

const observer = new PerformanceObserver((list) => {
    for(const entry of list.getEntries) {
        console.log(entry)
    }
})
observer.observe({ entryTypes: ['longtask'] })

パフォーマンス最適化のためのツール

RAIL 測定の自動化に役立つツールがいくつかあります。どちらを使用するかは、必要な情報の種類と、好みのワークフローの種類によって異なります。

以下はサポート学習教材です。[ソフトウェアテスト] を行う友人にとって、これは最も包括的で完全な準備倉庫となるはずです。この倉庫は、最も困難な旅を私に同行させてくれました。あなたにも役立つことを願っています。

ソフトウェアテストインタビューアプレット

ソフトウェアテストの質問バンクには、何百万人もの人が参加しました。！！誰が知っているのか！！！ネットワーク全体で最も包括的なクイズミニプログラムです。携帯電話を使用して、地下鉄やバスの中でもクイズに答えることができます。

次の面接の質問セクションが取り上げられます。

1. ソフトウェアテストの基礎理論、2. Web、アプリ、インターフェース機能テスト、3. ネットワーク、4. データベース、5. Linux

6. Web、アプリ、インターフェイスの自動化、7. パフォーマンステスト、8. プログラミングの基本、9. 時間面接の質問、10. 公開テストの質問、11. セキュリティテスト、12. コンピューターの基本

情報取得方法：

フロントエンドのパフォーマンスの最適化 - ページのパフォーマンス指標とツール

背景