[パフォーマンス]2回目以降のリクエストの処理時間が短くなる理由が知りたい

Question

もしご存知の方がいらっしゃったら教えていただきたいです！

###【知りたいこと】
複数のリクエストを飛ばすと、2回目以降のリクエストの処理時間が短くなる理由が知りたい

###【経緯】

• Reactコンポーネント内で以下のような関数を定義した
• 処理時間を確認すると、画像の通り1回目だけ処理に時間がかかっていることがわかった
• Chromeの検証ツールのnetworkタブを開くと初回だけcontent downloadの時間が長い
• 2回目以降は、1回目に取得したデータをChromeかどこかにキャッシュしているためcontent downloadの時間が短いと推測される
• しかし、どういう仕組み(ReactなのかChromeなのかaxiosなのか)でキャッシュされているかわからないため、質問することにした

###【経緯の詳細】

• Reactコンポーネント内で以下のような関数を定義した

const fetchJSON = async () => {
  const apiClient = axios.create({
    baseURL: "https://jsonplaceholder.typicode.com",
  });

  console.time("request 5000 1st");
  const result1 = await apiClient.get("/photos");
  console.log("length: ", result1.data.length);
  console.timeEnd("request 5000 1st");

  console.time("request 5000 2nd");
  const result2 = await apiClient.get("/photos");
  console.log("length: ", result2.data.length);
  console.timeEnd("request 5000 2nd");

  console.time("request 5000 3rd");
  const result3 = await apiClient.get("/photos");
  console.log("length: ", result3.data.length);
  console.timeEnd("request 5000 3rd");

  console.time("request 5000 4th");
  const result4 = await apiClient.get("/photos");
  console.log("length: ", result4.data.length);
  console.timeEnd("request 5000 4th");

  console.time("request 5000 5th");
  const result5 = await apiClient.get("/photos");
  console.log("length: ", result5.data.length);
  console.timeEnd("request 5000 5th");
};

• 処理時間を確認すると、画像の通り1回目だけ処理に時間がかかっていることがわかった

• chromeの検証ツールのnetworkタブを開くと1回目だけcontent downloadの時間が長い

1回目

• 2回目以降は、1回目に取得したデータをchromeかどこかにキャッシュしているためcontent downloadの時間が短いと推測される

2回目

Answer 1

2回目以降は、1回目に取得したデータをChromeかどこかにキャッシュしているためcontent downloadの時間が短いと推測される

図を見る限り、2通りの可能性が考えられます。

• 2回目の通信では「前に取得したものかどうか」のチェックだけを投げて、304 Not Modifiedの結果を得ている（キャッシュしている主体はChrome）
• サーバ内でキャッシュ処理が行われていて、2回目は高速にデータを返してくる

どちらにしても、JavaScriptレベルでキャッシュを行っていれば通信自体が行われないので、JavaScriptレベルのキャッシュではありません。

Comments

[mball]

ありがとうございます！現状2回目以降も304ではなく200が返ってくるので、後者が考えられます。
サーバ内でキャッシュしている場合、Chromeの検証ツールなどでわかったりできるのでしょうか？

[maisumakun]

わかりません。