ブラウザのperformance apiの話
TRANSCRIPT
ブラウザの Performance APIの話
2016年3月25日 川田 寛(ふろしき)
!?
ふろしき仕事： ピクシブ株式会社
趣味： Performance API
Webパフォーマンスが好きです
The Web Explorer→ Webパフォーマンス技術の今
Software Design 2015年11月号
→ すいすいわかるHTTP/2
Webパフォーマンスが好きです
The Web Explorer→ Webパフォーマンス技術の今
この内容の話をします。
今日話すこと
1. Performance Monitoring
2. Network Optimizations
3. Task Optimization
→ パフォーマンス計測用APIの話
→ ネットワーク最適化用APIの話
→ タスク最適化用APIの話
1. Performance Monitoringパフォーマンス計測用APIの話
Performance Timeline
Webページを遅くする要因を 探したり監視するためのJavaScript API
タイムスタンプを記録して JavaScriptオブジェクトを返してくれる
画像読込!!
どれぐらい かかったの？
121 ミリ秒
ササッ
なにが計測できる？
Navigation Timing
Resource Timing
User Timing
Frame Timing
Server Timing
Navigation Timing
Webページの読み込みを開始してから 表示が完了するまでのタイムスタンプを記録
Navigation Timing
Resource Timing
画像/css/jsなどのリソースを 読み込み始めてから完了するまでの
タイムスタンプを記録する
Resource Timing
User Timing
任意のタイミングで タイムスタンプを記録
processing
mark mark
User Timing
2. Network Optimizationsネットワーク最適化用APIの話
Network optimizations
Webページ読み込みには パフォーマンスを低下させる いろんな問題が隠れている
Network optimizations
どうやってネットワーク最適化できる？
Resource Hints
Preload
Resource Hints
dns-prefetch
Resource Hints
preconnect
Resource Hints
prefetch
Resource Hints
prerender
3. Task Optimizationネットワーク最適化用APIの話
どんなタスクを制御できる？
requestIdleCallback
requestAnimationFrame
setImmediate
Page Visibility
Web Workers
setTimeout/setInterval
requestIdleCallback
ブラウザは同時に 1つのタスクしか実行できない…
requestIdleCallback
私たちが作ったJSの実行がヘビーだと ブラウザの描画処理を遅らせてしまう
requestIdleCallback
何もタスクが無いときに JSを実行させる
requestIdleCallback
requestIdleCallback
実際に使ってみた
requestIdleCallback
requestIdleCallback
最後に
Web-perf周りの仕様の話って、 国内では私ぐらいしか
騒いでいる人がいませんが…
最後に
実は需要があると 信じてる。
最後に
流行らせるためにも… 入門書が必要だ!!
最後に
2016年冬 p社オフィスにて
Performance apIについての 入門みたいなドキュメントが
全世界どこさがしても無いの
ふろしき ひつじさん
俯瞰的に知りたいって人 絶対いると思うの
ひつじさんふろしき
おれはそういう ドキュメントを書きたい
ひつじさんふろしき
日本語で一回書き起こして そのあと英語版つくるんだ!!
ひつじさんふろしき
いいね!書こう!
ひつじさんふろしき
それで！！
ひつじさんふろしき
わかめさん
日本語版をまず書いてみた(※同人誌にして冬コミにだしてみた)
脱稿した日
W3CのWebサイトにも あるドキュメントが追加された
訳：Web Performance Timing API入門
↓
ごめん 無駄足だった ・・・。
ひつじさんふろしき わかめさん
無駄足になった私の同人誌、まだ売ってます
https://techbooster.booth.pm/items/178228
→ C90につづく
