English subtitles

← The Render Tree - Website Performance Optimization

Get Embed Code
6 Languages

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

  1. [BLANK_AUDIO]
  2. Okay. So, the DOM contains all the content of the page.
  3. The CSSOM contains all the styles of the page. So how
  4. do we take the content and styles and turn them onto
  5. pixels on the screen? I feel like we're missing an intermediate step.
  6. >> That's good intuition. Now we need to combine the
  7. DOM and the CSSOM trees into the render tree which will
  8. capture exactly what you described. One of the most important properties
  9. of the render tree is that it only captures visible content.
  10. And to see this in action, let's work through the
  11. simple example we have in front of us. At the top,
  12. we have the DOM tree and at the bottom the CSSOM
  13. object model. To construct the render tree, we start at the
  14. root of the DOM tree, which in this case is the
  15. paragraph node and check if there is any CSS rules. That
  16. match it. In this case, we see that we do have
  17. a matching rule that makes all the text render in 16
  18. pixel font size and in bold. So we
  19. copy the paragraph node to our render tree alongside
  20. with its CSS properties. Okay. We're done with
  21. the paragraph node. Let's walk down the tree. Next,
  22. we see, hello, which is just a text
  23. node. So we copy that through our render tree.
  24. Next we arrive at the span node. We have a matching CSS rule for it. We have
  25. a span and it is indeed a child of the paragraph node. But notice that
  26. one of the properties in this rule is that it's marked as display none, which
  27. tells us that the contents of this span should not be rendered. And since as
  28. we said the render tree only captures visible
  29. content. We can skip it and its children.
  30. >> We skip the children, because display,none cascades down, right?
  31. >> Exactly. And as a result, we can skip all
  32. the children nodes of the span node and go to the
  33. next node, which in this case is just another text
  34. node. And we copy that to our render tree once over.
  35. >> So the render tree captures both the content and the styles.
  36. >> Right. Now let's take a look at our Hello World page. Okay, here we
  37. have the dom and CSS trees for our Hello World page. To build a render
  38. tree we start at the HTML node in the
  39. dom tree. The HTML and the head sections don't
  40. contain any visible information. So we can just quickly
  41. prune them out of our render tree. Next, we have
  42. the body node. Let's copy that over. This left
  43. part of the tree should look familiar. This is what
  44. we just built. So let's copy that over as
  45. well. Finally, we have the div and the image nodes.
  46. Both of these contain visible content, so we
  47. also copy them over, and their styles, into
  48. our render tree. With that done, compare this
  49. render tree to what we have on the screen.
  50. >> Huh. Yeah. The render tree is a pretty good
  51. representation. The unnecessary text is gone. I can see that there
  52. should be an image on the screen and it should
  53. be displayed on the right. So, are we all done now?
  54. >> Not quite. We still have to do layout. But first a quick quiz.