【Node.js24.x】Object::PerformanceResourceTiming()メソッドの使い方

PerformanceResourceTimingメソッドは、ウェブアプリケーションで使用されるリソース（画像、スクリプトファイル、CSSスタイルシートなど）の読み込みタイミングに関する詳細なパフォーマンス情報を取り扱うメソッドです。このメソッドは、特定のリソースがネットワークを介してどのように取得され、いつ利用可能になったかという一連のプロセスについて、非常に細かく時間を計測したデータを提供します。具体的には、リダイレクトの開始・終了、ドメインネームシステム（DNS）の解決にかかった時間、サーバーとのTCP接続の確立時間、実際のデータのリクエストからレスポンスの最初のバイト受信までの時間、そしてリソース全体のダウンロード完了時間といった、多様なタイミング情報にアクセスすることを可能にします。これらの詳細なデータは、ウェブアプリケーションの読み込み速度の遅延要因であるボトルネックを正確に特定し、ユーザー体験を大幅に改善するためのパフォーマンス最適化において、開発者にとって不可欠な情報源となります。Node.js環境において、特にネットワークリソースの効率的な監視や管理、そしてアプリケーションのパフォーマンス分析ツールを構築する際に、中心的な役割を果たします。このメソッドはObjectクラスに属しており、開発者がリソースのライフサイクルを深く理解し、より高速で応答性の高いアプリケーションを構築するための基盤を提供します。

Copy
1const { performance } = require('node:perf_hooks');
2
3(async () => {
4  // ダミーのリソースをフェッチしてPerformanceResourceTimingエントリを生成します。
5  // Node.js 24ではグローバルにfetch関数が利用可能です。
6  await fetch('https://example.com/favicon.ico');
7
8  // 'resource' タイプのエントリを取得します。
9  const resourceEntries = performance.getEntriesByType('resource');
10
11  if (resourceEntries.length > 0) {
12    const resourceTimingEntry = resourceEntries[0];
13
14    // PerformanceResourceTimingオブジェクトのプロパティへのアクセス構文
15    console.log(resourceTimingEntry.name);
16    console.log(resourceTimingEntry.entryType);
17    console.log(resourceTimingEntry.startTime);
18    console.log(resourceTimingEntry.duration);
19    console.log(resourceTimingEntry.initiatorType);
20    console.log(resourceTimingEntry.nextHopProtocol);
21    console.log(resourceTimingEntry.workerStart);
22    console.log(resourceTimingEntry.redirectStart);
23    console.log(resourceTimingEntry.redirectEnd);
24    console.log(resourceTimingEntry.fetchStart);
25    console.log(resourceTimingEntry.domainLookupStart);
26    console.log(resourceTimingEntry.domainLookupEnd);
27    console.log(resourceTimingEntry.connectStart);
28    console.log(resourceTimingEntry.secureConnectionStart);
29    console.log(resourceTimingEntry.connectEnd);
30    console.log(resourceTimingEntry.requestStart);
31    console.log(resourceTimingEntry.responseStart);
32    console.log(resourceTimingEntry.responseEnd);
33    console.log(resourceTimingEntry.transferSize);
34    console.log(resourceTimingEntry.encodedBodySize);
35    console.log(resourceTimingEntry.decodedBodySize);
36    console.log(resourceTimingEntry.serverTiming);
37  }
38})();

引数なし

引数はありません

戻り値なし

戻り値はありません