Performance API

パフォーマンスエーピーアイ（API & Web機能）

意味ページ性能計測用API

Performance APIとは？

Performance APIは、ウェブページの読み込みや実行のパフォーマンスに関する情報を取得するためのAPIです。

Performance APIの具体的な使い方

Performance APIを使用してページ読み込み時間を計測する例

// ページが完全に読み込まれた後に実行
window.addEventListener('load', function() {
  // ナビゲーション開始からページ読み込み完了までの時間を計算
  let loadTime = performance.now();
  console.log('ページの読み込み時間: ' + loadTime.toFixed(2) + ' ミリ秒');

  // リソースの読み込み時間を取得
  let resources = performance.getEntriesByType('resource');
  resources.forEach(function(resource) {
    console.log(resource.name + ': ' + resource.duration.toFixed(2) + ' ミリ秒');
  });
});

👇出力結果

ページの読み込み時間: 1234.56 ミリ秒
https://example.com/image.jpg: 78.90 ミリ秒
https://example.com/script.js: 45.67 ミリ秒
https://example.com/styles.css: 23.45 ミリ秒

Performance APIを使用してページの読み込み時間とリソースの読み込み時間を計測します。ページ全体の読み込み時間と、各リソース（画像、スクリプト、スタイルシートなど）の読み込み時間をコンソールに出力します。

Performance APIに関するよくある質問

Q. Performance APIの主な目的は？

A. Performance APIの主な目的は、ウェブページのパフォーマンスに関する詳細な情報を提供し、開発者がページの読み込み速度や実行効率を分析・最適化できるようにすることです。

Q. どんな情報が取得できますか？

A. ページの読み込み時間、リソースのロード時間、JavaScriptの実行時間、メモリ使用量など、様々なパフォーマンス関連のメトリクスを取得できます。

Q. ブラウザの開発者ツールとの違いは？

A. Performance APIはJavaScriptから直接アクセスでき、プログラムによる自動計測や分析が可能です。開発者ツールは主に手動での確認や詳細な分析に使用されます。

Performance APIが学べる書籍の紹介

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

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