Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

ブラウザのPerformance APIの話

8,698 views

Published on

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

Published in: Technology

ブラウザの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

×