問題タブ [web-performance]

こんにちは、Chrome 開発者ツールで Google フロント ページを開くと、複数のアイコンが大きな png ファイルにバンドルされており、(上記のように) 一緒にダウンロードされていることがわかりました。これは、ページの読み込みを高速化するためのやや一般的なアプローチだと思います。誰かが私にそれを行う方法を教えてもらえますか? さらに良いのは、バンドル/デバンドルを処理するライブラリがありますか?

(私はこれをオンラインで検索するのにかなりの時間を費やしましたが、必要なものを正確に見つけることができません。どんな助けも大歓迎です!)

添付されているのは、同じ Web サイトの Google Chrome Network Tools からの 3 つのスクリーンショットです。

Amplience CDN からの画像を表示するようにフィルタリングされています

[サイズ/内容] 列に表示される結果はさまざまで、その理由を理解しようとしています。

各スクリーンショットは、リピーターの視点から撮影されています。したがって、画像はキャッシュから取得する必要があります。

スクリーンショット 1 - ディスク上のサイズと転送サイズの大きな違いを示しています。スクリーンショット 2 - 画像の 1 つが現在キャッシュされていないことを示しています スクリーンショット 3 - (キャッシュからの) 用語が表示されています。

私の質問は次のとおりです。

1. スクリーンショット 1 で、(キャッシュから) と表示されないのはなぜですか? スクリーンショット 3 で発生していない少量の転送サイズで何が発生していますか?

2. ある画像が突然キャッシュされないのはなぜですか?

   

スクリプト/アセットが非同期で読み込まれるか、Google Chrome ブラウザの [ネットワーク ツール] タブから遅延して読み込まれるかを確認する方法はありますか?

Chrome 開発者ツールを使用して、Google Chrome ブラウザでスクリプト/アセットの読み込みに時間遅延を追加する方法はありますか? または、スクリプトの読み込みを完全にブロックするには?

これを行う理由は、スクリプト/アセットの読み込みの遅延または読み込みの失敗が発生したときにサイトがどのように機能するかを確認するためです。

以前は正常に動作していた Web パフォーマンス テストを作成しました。開発者は、CSRF トークン検証を追加しました (Web サイトでの CSRF 攻撃を防ぐため)。この後、テストは失敗し始めました (エラー、不正な要求)。私はそれを掘り下げて、サーバーがログイン要求で XSRF-TOKEN を生成していることを発見しました。これは、その後のすべての要求で渡す必要があります。トークンを抽出するには、ログイン リクエストへのレスポンスを解析する必要があります。どうすればそれができますか？

コード化されたテストは次のようになります。

DOM ツリーの作成方法HTML5 仕様: 8.2.1 解析モデルの概要 を読んでいるときに、疑問が頭に浮かびましたが、答えが見つかりませんでした。

仕様によると、使用document.writeは悪く、他の問題とは別に、解析を一時停止し、トークナイザー入力に新しい文字を提供します。

問題は、DOM API を使用するとどのように見えるかということです。appendChild. いつ実行されますか？

私が理解している限り、これは既に作成されたものを追加するNodeため、解析とトークン化は必要ありません。ただし、新しいノードはすぐにアタッチされますか、それとも「最初/元の」DOM ツリーを構築した後ですか?

Webpack を使用してバンドルされた小さな ReactJs アプリケーションを作成しました。バックエンドは Java (Spring Boot) を使用して行われ、ラップトップ (新しい Macbook Pro) でアプリを実行しています。Chrome でテストしたところ、REST API 呼び出し ( find_all) がバンドル ファイル ( positions_bundle.js) から呼び出されるまでにかなりの時間がかかることがわかりました。以下のスクリーンショットを参照してください。これは、これらのテクノロジを使用した通常のパフォーマンスのように見えますか? Spring Boot と Webpack dev サーバーの両方を使用してフロントエンドを実行しましたが、それらの間に大きな違いはありません。

編集。これは、REST API 呼び出しを作成する私の React クラスです。