ブラウザのPerformance APIの話

ブラウザのPerformance APIの話

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