ユーザー体験向上のために、アプリケーションが起動してからウィンドウが表示されるまでの時間を計測します。
performance.now() API を使用して、ベンチマークを取得します。
1. フロントエンド（初回描画）の計測
index.html の <head> 内でスクリプトを実行し、ページのロード時間を測定します。
<script>
// ページ読み込み完了 (Load) を計測
window.addEventListener('load', () => {
// load イベント完了後に loadEventEnd が記録されるため、
// setTimeout でイベントループの次のサイクルまで待機します
setTimeout(() => {
// Navigation Timing API から正確なロード時間を取得
const [entry] = performance.getEntriesByType("navigation");
if (entry instanceof PerformanceNavigationTiming) {
console.log(`Page Load: ${entry.loadEventEnd}ms`);
}
}, 0);
});
// 初回描画 (FCP: First Contentful Paint) を計測
new PerformanceObserver((list) => {
for (const entry of list.getEntriesByName("first-contentful-paint")) {
console.log(`First Contentful Paint: ${entry.startTime}ms`);
}
}).observe({ type: "paint", buffered: true });
</script>用語解説
今回の計測で使用している API とプロパティの解説です。これらはすべて「Time Origin（計測基準点＝アプリが起動してナビゲーションが始まった瞬間）」からの経過時間（ミリ秒）を表します。
PerformanceNavigationTiming
「ページ遷移（ナビゲーション）全体の詳細な時間割」 です。performance.getEntriesByType("navigation") で取得できます。entry.loadEventEnd は、ページの読み込み開始（0ms）から、すべてのリソース（画像やスクリプト）の読み込みと load イベントの処理が完了した時点までの時間を指します。
startTime (First Contentful Paint の場合)
「そのイベントが発生した時間」 です。 FCP (First Contentful Paint) の計測において、entry.startTime は、読み込み開始（0ms）から「ブラウザが最初に画面に何か（テキストや画像など）を描画した瞬間」までの経過時間を指します。
2. Rust（バックエンド）の起動時間
Tauri v2 の標準的な構成である src-tauri/src/lib.rs の run 関数で計測する例です。
ビルダーのセットアップから Webview 生成（setup フック完了）までの時間を計測します。
use std::time::Instant;
#[cfg_attr(mobile, tauri::mobile_entry_point)]
pub fn run() {
let start = Instant::now();
tauri::Builder::default()
.setup(move |app| {
let duration = start.elapsed();
println!("Startup duration: {:?}", duration);
Ok(())
})
.run(tauri::generate_context!())
.expect("error while running tauri application");
}3. Chrome DevTools の Performance タブ
開発中は、WebView の開発者ツール (F12) にある Performance タブを使用して、JavaScript の実行やレイアウト計算にかかっている時間をフレーム単位で詳細に分析できます。
Tauri の debug ビルドではデフォルトで有効になっています。