YouTube

Got a YouTube account?

New: enable viewer-created translations and captions on your YouTube channel!

English subtitles

← Analyzing the Entire CRP in DevTools - Website Performance Optimization

Get Embed Code
6 Languages

Showing Revision 5 created 05/25/2016 by Udacity Robot.

  1. Alright, we've looked at all of the individual
  2. pieces of the critical rendering path. Now, let's
  3. take a look at an end to end view and see how the timeline comes together.
  4. >> Awesome, that's exactly what I need.
  5. >> To keep things manageable we'll use our hello world page
  6. that has a few inline CSS styles, some text, and image. Let's
  7. refresh to capture the full trace. Okay, let's see what's going on
  8. here. As you would expect, first we see the request go out
  9. for the HTML document. Next, we get an event
  10. showing that the server returned some response headers, followed by
  11. some data. That's our HTML. Next up, the browser
  12. begins parsing the HTML. This is where the browser is
  13. converting the received bytes to the DOM tree, and
  14. in fact, if we expand this note, you can see
  15. that our document parser. Finds the embedded image reference
  16. and initiates the request. Once that is done, it continues
  17. to parse the HTML and once it gets to the
  18. end it constructs the CSS object model. In this example
  19. our CSS was inline directly into the page. So, there
  20. are no CSS requests. Next, the browser builds the render
  21. tree and computes all the styles for the content that
  22. should be visible. On the screen. That's what this recalculate
  23. style event indicates. Once that's done, we continue to layout,
  24. which as you know now, is where compute the location and
  25. the size of the render tree elements. Finally, once done, we
  26. issue a paint event and our page is rendered on the screen.
  27. >> You know, when we first started looking at everything, it felt
  28. really confusing. But this is actually
  29. pretty straight forward. This is pretty awesome.
  30. >> Glad to hear