Navigation Timing APIでブラウザの処理時間を可視化するツール作った
最近のブラウザでは、 Navigation Timing API ってのがサポートされていて、これを利用すればブラウザがページをロードするのに要した処理時間の内訳を知ることができる。
例えば、"DNSのlookupに要した時間"や"DOMの構築処理時間"、"onloadイベントの処理時間"などを見ることができるので、クライアントサイドのパフォーマンス計測に役立てることができる。
- Navigation Timing
- Navigation Timing APIの仕様 #JavaScript - Qiita
- HTML5で Speed Test, Navigation Timing APIによる性能データ収集 - ぼちぼち日記
- Navigation TimingでWebアプリの読み込み時間ログ取得 - l4l
このAPIは、 window.performance.navigationオブジェクトやwindow.performance.timingオブジェクトを用いて、"リクエストを開始した時刻"や、"onloadイベントを発火した時刻"などがunixtimeで取得できる。例えばこんな具合
JSON.stringify(performance.timing, null, " ") "{ "loadEventEnd": 1349180345342, "loadEventStart": 1349180345269, "domComplete": 1349180345269, "domContentLoadedEventEnd": 1349180339973, "domContentLoadedEventStart": 1349180339915, "domInteractive": 1349180339915, "domLoading": 1349180339069, "responseEnd": 1349180338993, "responseStart": 1349180338987, "requestStart": 1349180338822, "secureConnectionStart": 0, "connectEnd": 1349180338822, "connectStart": 1349180338812, "domainLookupEnd": 1349180338810, "domainLookupStart": 1349180338805, "fetchStart": 1349180338805, "redirectEnd": 0, "redirectStart": 0, "unloadEventEnd": 1349180338992, "unloadEventStart": 1349180338990, "navigationStart": 1349180338805 }"
で、これは単に各イベントが発生したunixtimeが取れるだけなので、こいつを可視化するbookmarklet作った。
yuroyoro/nvtl-bookmarklet · GitHub
javascript:(function(){var s=document.createElement('script');var head=document.getElementsByTagName('head')[0];var done=false;s.charset='UTF-8';s.language='javascript';s.type='text/javascript';s.src='https://raw.github.com/yuroyoro/nvtl-bookmarklet/master/navigation_timeline.js';head.appendChild(s);})();
こいつをbookmarkletにしておいて、任意のページで実行すると、こんな感じで各処理時間が可視化される。