YouTube

Got a YouTube account?

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

English subtitles

← Converting CSS to the CSSOM - Website Performance Optimization

Get Embed Code
6 Languages

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

  1. [BLANK_AUDIO]
  2. >> All right. So the DOM captures the content
  3. of the page. But we also need to know
  4. how to display the actual page itself. And to
  5. do that, we need to build a CSS Object Model.
  6. >> Mm. And judging by its name, I guess it's similar to the DOM?
  7. >> It's very close. Let's take a look. Ok. Let's say we've received the
  8. following CSS. The first thing the browser
  9. has to do is identify the correct tokens.
  10. >> But there's no angle brackets here,
  11. right?
  12. >> Yeah. CSS has its own set of rules
  13. for how to identify valid tokens. The details are not
  14. that important. If you're curious, you can check out
  15. the CSS specification link in the instructor notes. The important
  16. part is that the parser would convert the tokens
  17. to nodes, and in this case, the first would be
  18. the body, with its font size property. Next, we would
  19. get the paragraph node, and this is the important part.
  20. It is a child of body because all of visible content is part of body.
  21. >> Wait- Is that some CSS specification rule?
  22. >> Yeah. Exactly.
  23. >> Also note that the children of the
  24. body node, inherit it's parent's styling rules of
  25. sixteen pixel font size. This is what we
  26. mean by cascading rules and cascading style sheets.
  27. >> Interesting. So it's similar to, but not
  28. quite the same as, the DOM construction because
  29. CSS rules cascade down. Hm curious. Let's see I got
  30. a style sheet with a lot of rules. Could we also
  31. apply the same incremental processing trick, like we do with HTML,
  32. to make the page display faster? That's a great question. Unfortunately,
  33. we can't. We can't use a partial CSS tree. Let
  34. me show you why. Let's say we just received the first
  35. view bites of our CSS and it contains the two rules
  36. we have here. So, we go ahead and build the CSS
  37. object model. It's tempting to use this tree
  38. to render a page, but there's a problem. Let's
  39. say we now get the next chunk of CSS and it contains more rules. In this case,
  40. we have the paragraph font weight normal. CSS allows us to redefine
  41. and refine the style properties. This is perfectly valid. But notice
  42. that this rule would allow us to change our CSS on tree.
  43. And make the text in paragraph node display with normal weight.
  44. >> So that's a gotcha. So, you're saying we can't really use a partial C-S-S on
  45. tree. Because then it could lead us to
  46. use the wrong styles when we render the page.
  47. >> Exactly, the browser blocks page rendering, until it receives
  48. and processes all of the CSS. CSS is render blocking.