YouTube

Got a YouTube account?

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

Korean subtitles

← Converting CSS to the CSSOM - Website Performance Optimization

Get Embed Code
6 Languages

Showing Revision 6 created 03/15/2016 by nc_review1.

  1. >> 좋아요, 따라서 DOM은 페이지의 내용을 가지게 되죠
  2. 하지만 우리가 또한 알아야 할 것은
  3. 실제 페이지가 그 자체로 어떻게 표시되느냐에요
  4. 그리고 그것을 가능하게 하려면, CSSOM을 만들어야 합니다
  5. 이름만 봐서는 DOM과 비슷해 보이네요?
  6. 매우 가까워요, 보시죠
    자, 우리가 다음과 같은 CSS를 받는다면
  7. 브라우저가 첫 번째로 하는 일은
  8. 올바른 토큰이 있는지 확인하는 작업이에요
  9. >> 하지만 여기에는 꺾쇠괄호가 없는데요, 그렇죠?
  10. >> 맞아요, CSS는 유효한 토큰이 있는지 알기 위해
  11. 자신만의 규칙을 가지고 있죠
    여기의 세부적인 내용은 그렇게 중요하지 않지만
  12. 그것이 궁금하다면, instructor note의
  13. CSS 링크를 참고하시면 됩니다
  14. 여기서 중요한 점은 파서가 토큰들을 노드로 바꾸는 것이에요
  15. 이번 경우에는, 첫 번째가 body이고
  16. 폰트의 크기를 속성으로 가지고 있죠
  17. 다음은 paragraph 노드를 받아요
    이 부분이 중요하죠
  18. 모든 보이는 내용은 body의 일부분이므로
    paragraph 노드는 body의 자식이죠
  19. >> 잠시만요, 그건 CSS 표준 규칙인가요?
  20. >> 네, 맞아요
  21. 또한 body 노드의 자식은
  22. 폰트 크기가 16px이라는 부모의 스타일 규칙을 상속받죠
  23. 이것이 종속 규칙과
  24. Cascading Style Sheets (CSS)를 의미해요
  25. >> 흥미롭네요, 그렇다면 CSS라는 것은
    DOM 구조와 비슷하지만
  26. 종속적 규칙 때문에
  27. 완전히 같은 것은 아니군요, 흠 신기하네요
  28. 많은 규칙을 가진 스타일 시트가 있다고 생각해보죠
  29. 우리가 HTML에서 했던 것과 같이
    페이지가 더 빠르게 표시되도록
  30. 점진적 처리 기술을 사용할 수 있나요?
  31. >> 아주 좋은 질문이에요
  32. 불행히도 우리는 그럴 수 없어요
  33. 우리는 부분적인 CSS 트리를 사용할 수 없습니다
  34. 왜 그런지 살펴보죠
  35. 우리가 방금 CSS의 첫 번째 몇 바이트들을 받았고
  36. 그 바이트들은 여기에 있는
    두가지 규칙을 포함한다고 가정해 봅시다
  37. 그러면, 계속해서 CSSOM을 만들게 되죠
  38. 페이지를 렌더링하기 위해 이 트리를 써야 해요
  39. 하지만 한가지 문제가 있습니다
  40. 우리가 지금 CSS의 다음 부분을 받았다고 치면
    그 부분은 더 많은 규칙을 포함하죠
  41. 이 경우에는, 폰트의 두께가 일반으로 되어있죠
  42. CSS는 스타일 속성을 재정의하는 것을 허용합니다
    완벽히 가능하죠
  43. 하지만 이 규칙은 우리의 CSS 트리를 변경할 수가 있어요
  44. 그리고 이 규칙은 paragraph 노드를
    일반 두께로 보이도록 하죠
  45. >> 아 그렇군요, 그 말은 우리가
    부분적인 CSS 트리를 절대 사용할 수 없다는 것이네요
  46. 부분을 사용하면 우리가 페이지를 렌더링할 때
  47. 잘못된 스타일을 사용할 수 있기 때문이죠
  48. >> 정확해요, 브라우저는 모든 CSS를 받고 처리할 때까지
  49. 페이지 렌더링을 차단합니다
  50. CSS는 렌더링 방해물이에요