( ꒪⌓꒪) ゆるよろ日記

( ゚∀゚)o彡°オパーイ!オパーイ! ( ;゚皿゚)ノシΣ フィンギィィーーッ!!!

Navigation Timing APIでブラウザの処理時間を可視化するツール作った

最近のブラウザでは、 Navigation Timing API ってのがサポートされていて、これを利用すればブラウザがページをロードするのに要した処理時間の内訳を知ることができる。


例えば、"DNSのlookupに要した時間"や"DOMの構築処理時間"、"onloadイベントの処理時間"などを見ることができるので、クライアントサイドのパフォーマンス計測に役立てることができる。


この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にしておいて、任意のページで実行すると、こんな感じで各処理時間が可視化される。

f:id:yuroyoro:20121002213256p:plainf:id:yuroyoro:20121002213307p:plainf:id:yuroyoro:20121002213315p:plain