ブラウザに入っているPerformance APIの話、超入門者向けにざっくりと。

1. ブラウザの
Performance APIの話
2016年3月25日
川田 寛(ふろしき)
!?

2. ふろしき
仕事： ピクシブ株式会社
趣味： Performance API

3. Webパフォーマンスが好きです
The Web Explorer
→ Webパフォーマンス技術の今
Software Design 2015年11月号
→ すいすいわかるHTTP/2

4. Webパフォーマンスが好きです
The Web Explorer
→ Webパフォーマンス技術の今
この内容の話をします。

5. 今日話すこと
1. Performance Monitoring
2. Network Optimizations
3. Task Optimization
→ パフォーマンス計測用APIの話
→ ネットワーク最適化用APIの話
→ タスク最適化用APIの話

6. 1. Performance Monitoring
パフォーマンス計測用APIの話

7. Performance Timeline
Webページを遅くする要因を
探したり監視するためのJavaScript API
タイムスタンプを記録して
JavaScriptオブジェクトを返してくれる
画像読込!!
どれぐらい
かかったの？
121
ミリ秒
ササッ

8. なにが計測できる？
Navigation Timing
Resource Timing
User Timing
Frame Timing
Server Timing

9. Navigation Timing
Webページの読み込みを開始してから
表示が完了するまでのタイムスタンプを記録

10. Navigation Timing

11. Resource Timing
画像/css/jsなどのリソースを
読み込み始めてから完了するまでの
タイムスタンプを記録する

12. Resource Timing

13. User Timing
任意のタイミングで
タイムスタンプを記録
processing
mark mark

14. User Timing

15. 2. Network Optimizations
ネットワーク最適化用APIの話

16. Network optimizations
Webページ読み込みには
パフォーマンスを低下させる
いろんな問題が隠れている

17. Network optimizations

18. どうやってネットワーク最適化できる？
Resource Hints
Preload

19. Resource Hints
dns-prefetch

20. Resource Hints
preconnect

21. Resource Hints
prefetch

22. Resource Hints
prerender

23. 3. Task Optimization
ネットワーク最適化用APIの話

24. どんなタスクを制御できる？
requestIdleCallback
requestAnimationFrame
setImmediate
Page Visibility
Web Workers
setTimeout/setInterval

25. requestIdleCallback
ブラウザは同時に
1つのタスクしか実行できない…

26. requestIdleCallback
私たちが作ったJSの実行がヘビーだと
ブラウザの描画処理を遅らせてしまう

27. requestIdleCallback
何もタスクが無いときに
JSを実行させる

28. requestIdleCallback

29. requestIdleCallback
実際に使ってみた

30. requestIdleCallback

31. requestIdleCallback

32. 最後に

33. Web-perf周りの仕様の話って、
国内では私ぐらいしか
騒いでいる人がいませんが…
最後に

34. 実は需要があると
信じてる。
最後に

35. 流行らせるためにも…
入門書が必要だ!!
最後に

36. 2016年冬
p社オフィスにて

37. Performance apIについての
入門みたいなドキュメントが
全世界どこさがしても無いの
ふろしき ひつじさん

38. 俯瞰的に知りたいって人
絶対いると思うの
ひつじさんふろしき

39. おれはそういう
ドキュメントを書きたい
ひつじさんふろしき

40. 日本語で一回書き起こして
そのあと英語版つくるんだ!!
ひつじさんふろしき

41. いいね!書こう!
ひつじさんふろしき

42. それで！！
ひつじさん
ふろしき
わかめさん

43. 日本語版をまず書いてみた
(※同人誌にして冬コミにだしてみた)

44. 脱稿した日

45. W3CのWebサイトにも
あるドキュメントが追加された

48. 訳：Web Performance Timing API入門
↓

49. ごめん
無駄足だった ・・・。
ひつじさん
ふろしき わかめさん

50. 無駄足になった私の同人誌、まだ売ってます
https://techbooster.booth.pm/items/178228

51. → C90につづく

52. Thank You!
@_furoshiki