Resource Timing API

リソースタイミングエーピーアイ（API & Web機能）

意味リソース読み込み時間計測API

Resource Timing APIとは？

Resource Timing APIは、ウェブページ上の各リソースの読み込みタイミングに関する情報を取得するためのAPIです。

Resource Timing APIの具体的な使い方

リソース読み込み時間の詳細な計測

// リソースのタイミング情報を取得
const resources = performance.getEntriesByType('resource');

// 最初のリソースの詳細な時間を計算
const firstResource = resources[0];
const dns = firstResource.domainLookupEnd - firstResource.domainLookupStart;
const tcp = firstResource.connectEnd - firstResource.connectStart;
const request = firstResource.responseStart - firstResource.requestStart;
const response = firstResource.responseEnd - firstResource.responseStart;
const total = firstResource.responseEnd - firstResource.fetchStart;

console.log(`DNS解決: ${dns.toFixed(2)}ms`);
console.log(`TCP接続: ${tcp.toFixed(2)}ms`);
console.log(`リクエスト時間: ${request.toFixed(2)}ms`);
console.log(`レスポンス時間: ${response.toFixed(2)}ms`);
console.log(`合計時間: ${total.toFixed(2)}ms`);

👇出力結果

DNS解決: 10.50ms
TCP接続: 15.20ms
リクエスト時間: 50.30ms
レスポンス時間: 100.80ms
合計時間: 176.80ms

Resource Timing APIを使用して、最初のリソースの読み込み時間を詳細に分析します。DNS解決、TCP接続、リクエスト、レスポンス、合計時間を個別に計算し表示します。

Resource Timing APIに関するよくある質問

Q. Resource Timing APIとは？

A. Resource Timing APIは、Webページ上の各リソース（画像、スクリプト、スタイルシートなど）の読み込みタイミングに関する詳細な情報を提供するJavaScript APIです。これを使用することで、ページのパフォーマンスを分析し、最適化の機会を特定することができます。

Q. 主な利用シーンは？

A. 主な利用シーンには、ウェブサイトのパフォーマンス監視、ユーザーエクスペリエンスの改善、ネットワークの問題の診断などがあります。例えば、特定のリソースの読み込みが遅い場合に検出し、最適化することができます。

Q. ブラウザの対応状況は？

A. Resource Timing APIは、最新のモダンブラウザ（Chrome、Firefox、Safari、Edge）でサポートされています。ただし、Internet Explorer 11以前のバージョンではサポートされていないため、使用時には注意が必要です。

JavaScriptを勉強するのにおすすめな問題集アプリの紹介

楽しくプログラミングを学ぶことで、プログラミングの理解度が深まります。『JavaScript問題集』は、楽しくJavaScriptを学ぶのに最適なアプリです。AIが出題する問題に答えていくことで、自然とJavaScriptの理解度が深まります。

AppStoreからダウンロード：https://apps.apple.com/jp/app/id6737941570

JavaScriptのResource Timing APIについても学べる書籍の紹介

「プログラミング単語帳」を使って、プログラミングの単語を英単語のように学習してみませんか？
プログラミング単語帳には、JavaScriptのResource Timing APIやIndexedDB、Ambient Light API、Fetch API、などのような実務でよく使われる単語が数百以上収録されています。
この書籍には、プログラミングの単語の意味や読み方、単語の使い方がわかる例文などが掲載されており、いつでもどこでもプログラミングの学習ができます。

よく使われる単語にだけ絞って学習することができるので、効率的にプログラミングが学習できます。