English subtitles

← Compute performance - Mobile Web Development

Get Embed Code
4 Languages

Showing Revision 4 created 05/24/2016 by Udacity Robot.

  1. Now, the second of our 3 pillars is going to be
  2. compute performance. And, to get a sense of how your application is
  3. actually spending it's time during a given frame, you really want
  4. to check out the timeline tab inside of Chrome developer tools. How
  5. this works, is that you actually load the timeline, hit this
  6. beautiful record button down here on the bottom, and then watch magic
  7. unfold. So, let's take look at how this plays out with
  8. Biolad Disaster. If I start the game, it goes up very simple.
  9. Now, when I hit the record button down here on the bottom, you
  10. can actually see that it's logging all of the event information that's occurring
  11. while this game is happening. Now, I'm not doing anything, I want to point
  12. that out, yet events are actually being fired. So, let's take a look at
  13. what's actually going on under the hood here. So, if I size this
  14. up, I can actually see the number of events inside of my window
  15. and drill down into what's going on. So, I've an animation frame here.
  16. And if I expand that, you can see that there's actually a request animation
  17. frame that has occurred at that point. Now,
  18. you'll notice down here on the bottom that there's
  19. actually different type of check boxes to filter
  20. out what events you're looking at. And each one
  21. has a respective color. For example, loading is
  22. blue, scripting is gold, rendering is purple and painting
  23. is green. So, if I toggle painting you can
  24. see that those events actually disappear from the timeline.
  25. Now, I did another quick little capture while you weren't looking,
  26. I saw you going to get peanuts from the bag. Now, if
  27. I slide my visibility window to another part of the timeline,
  28. you can see that there's actually a little block here that seems
  29. to be wider than all the other blocks around it, what
  30. this implies is that there's some scripting occurring between our windows here
  31. that is taking longer than the other frames. Now, below us, we
  32. actually have a list of events that occurred, plus as you remember
  33. these little triangles that allows us to drill down into the
  34. event. On here in the side, you can see that we
  35. have the same animation Frame Fire that we saw earlier, but
  36. the new one that we see showing up, is a GC Event,
  37. where 1.4 megabytes of data was actually collected. Hovering over it
  38. brings a popup dialogue that shows you that this actually took
  39. 2.7 milliseconds, out of our frame budget to actually do a
  40. garbage collection event. That's why you can see that this block here,
  41. is actually larger then the block next to it, because
  42. we have an extra 2.7 miliseconds that went to do
  43. a garbage collection event. We can actually see this mirrored,
  44. by clicking on the memory option for the timeline. Now, what
  45. this's actually going to show us is a linear graph of
  46. where allocations are actually occuring, and lo and behold, you can
  47. see, between our 2 divets here, when that GC event
  48. occurs, the amount of memory allocated in our application drops down,
  49. thus showing the garbage collection freed memory. Now, I want to show
  50. you what this looks like live, because it's really interesting to watch.
  51. How an application, actually allocates its memory. So, you can see
  52. that over time, this application, when I'm doing nothing on the screen,
  53. is actually allocating about 1 megabyte every second or so. And
  54. then you can see the garbage collector actually kicks in, and frees
  55. a lot of that data. This type of sawtooth pattern that
  56. you're seeing along the timeline here, is very common in different web
  57. applications, that do a lot of dynamic allocation of objects. Now, there's an
  58. article out there that I've written on HTML 5 Rocks, that details different ways
  59. to address this type of sawtooth pattern,
  60. using object pools. But, we're not going to
  61. go into that right now. Let's stay focused on what's in front of us.