Japanese subtitles

← Compute performance - OSP

Get Embed Code
4 Languages

Showing Revision 1 created 05/19/2014 by K2480.

  1. 3つの柱の2番目は計算性能です
  2. アプリがフレームで実際に
    どのように時間を費やしているか
  3. 把握するためにChromeデベロッパーツールの
  4. タイムラインタブをチェックします
  5. タイムラインをロードして
  6. このRecordボタンを押します
    さあ魔法をご覧ください
  7. Biolad Disasterのプレイ方法を説明します
  8. ゲームはとてもシンプルです
  9. このRecordボタンを押すと
  10. ゲーム中のすべてのイベント情報が記録されます
  11. 特に何もしていませんが
  12. イベントが本当に起こっていることを強調したいのです
  13. 実際に起こっているものを見てみましょう
  14. サイズを変更すればいくつもイベントが表示できます
  15. これはアニメーションフレームです
  16. 展開すればその時点の
    リクエストアニメーションフレームが
  17. 実際にあることが分かります
  18. 下の段には検証するイベントを
  19. フィルタするチェックボックスがあります
  20. ボタンは色分けされています
  21. Loadingは青でScriptingはゴールド
  22. Renderingは紫でPaintingは緑です
  23. Paintingのチェックを外すと
  24. そのイベントがタイムラインから消えます
  25. では別の面をざっと見てみましょう
  26. ちょっと飽きてきましたか?
  27. タイムラインの別の部分にウィンドウをスライドすると
  28. 周囲の他のすべてのブロックより
  29. 広く見えるブロックがあることが分かります
  30. これはスクリプト作業がウィンドウ間で
  31. 他のフレームより長くかかっていることを意味します
  32. この下には実際に生じたイベントがリストされています
  33. この小さな三角形で詳細が見られます
  34. こらちには以前に見たのと同じ
  35. Animation Frame Firedがあります
  36. さらに新しくGC Eventが追加されています
  37. 1.4メガバイトのデータが実際に収集されています
  38. ポップアップダイアログが表示され
  39. ガベージコレクションイベントが2.7ミリ秒も
  40. かかったことを示します そのためこのブロックは
  41. 他のブロックよりも大きいのです
  42. ガベージコレクションイベントのために余分な2.7ミリ秒が
  43. かかっているからです 実際にこれが反映されたことを
  44. タイムラインのメモリオプションで確認できます
  45. これはアロケーションがどこで生じているかを示す
    線形のグラフです
  46. さらにご覧ください
  47. ガベージコレクションイベントが生じる場合
  48. この2者の間にアプリケーションで割り当てられた
    メモリの量がこのように落ちています
  49. メモリが解放されたことを示しているのです
  50. ではリアルタイムで見てみましょう
  51. アプリがどのようにメモリを割り当てるか見えます
  52. このように何もしていなくても時間と共に
  53. アプリが毎秒約1メガバイト程度を
    割り当てています
  54. ガベージコレクタがデータの多くを
    解放していることが分かります
  55. タイムラインに沿って
  56. オブジェクトの動的割当てを多用するWebアプリでは
  57. このようなギザギザのパターンが現れます
  58. 私がHTML5 Rocksで書いた記事の中で
    オブジェクトプールを使って
  59. ギザギザのパターンに取り組む様々な方法を
    説明しています
  60. それには今回は触れません 次に進みましょう