Tried Timing API

Webブラウザに実装されている各種時間計測用APIを調べてみました

Transcript

1. Tried Timing API 2018. 05. 21 @ariaki4dev We Are JavaScripters! @19th
2. 森川　晃 (@ariaki4dev) 株式会社メディアドゥ - 高校の頃からフリーソフト開発 - 着メロ時代からWeb系 - B2B2Cプロダクトオーナーを10年位 - いまは新規事業開発 About Me も　り　か　わ　　　あ　き　ら
3. Types of Timing API Type Description Navigation Timing API ページ表示にかかった時間を計測する Resource Timing API リソースのロード時間を計測する User Timing API 任意のラベルでプログラム実行時間を計測する First Paint Timing API ** First Paint, First Content Paint 時間を計測する Frame Timing API ** レンダリングパフォーマンスを計測する Server Timing API ** サーバ処理時間を計測する High Resolution Time API マイクロ秒単位の時刻を計測する Performance Observer パフォーマンス情報の変更を監視する ** Only available on Google Chrome.
4. 出典：http://ascii.jp/elem/000/000/675/675568/ performance.timingで得られる2値の差から所要時間を計測 Navigation Timing API
5. ▪ Waiting (TTBF) = responseStart - requestStart ▪ Content Download = responseEnd - responseStart Resource Timing API コンテンツ毎にナビゲーション開始からの 相対時間を計測
6. ユーザが任意のタイミングで markを設定し、2点間の経過時間をmeasureで計測 User Timing API
7. 取得データはお好みで解析しよう！ - Navigation Timing API … DOM描画完了までの概要を取得 - Resource Timing API … リソース毎の処理時間を取得 - User Timing API … ビジネスロジックの処理時間を計測 Summary
8. Thank You For Your Attention. 社内勉強会やってます！ ゲスト&コラボ募集中！！！ https://twitter.com/ariaki4dev