YouTube

Got a YouTube account?

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

Korean subtitles

← 02-30 Analyzing the Entire CRP in DevTools

Get Embed Code
6 Languages

Showing Revision 8 created 03/16/2016 by nc_review1.

  1. 좋아요, 우리는 지금까지 크리티컬 렌더링 패스의
  2. 각각의 부분들을 모두 보았습니다
  3. 이제 처음부터 끝까지 다시 보며
    타임라인이 어떻게 되는지 봅시다
  4. 좋아요, 그게 제가 정확히 필요한 거죠
  5. >> 이해를 돕기 위해 약간의 인라인 CSS 스타일과
    몇 개의 텍스트, 이미지들을 사용하는
  6. 우리의 Hello world 페이지를 사용할 겁니다
  7. 새로고침해서 전체 트레이스를 기록해봅시다
    좋아요, 여기에서 무슨 일이 일어나는지 볼까요
  8. 예상대로 HTML 문서 요청을 볼 수 있네요
  9. 다음으로는 몇 개의 응답 헤더와 데이터를 반환하는
  10. 서버를 보여주는 이벤트를 얻을 수 있어요
  11. 이게 우리의 HTML입니다, 다음으로 넘어가면
  12. 브라우저는 HTML을 파싱하기 시작해요
  13. 이 부분이 브라우저가 받은 바이트들을
    DOM 트리로 변환하는 부분이죠
  14. 실제로, 이 부분을 펼쳐보면
  15. 우리 문서의 파서를 볼 수 있어요, 이미지를 찾아서
  16. 요청을 시작하죠, 요청이 모두 끝나고
  17. 계속해서 HTML을 파싱하면서 끝에 다다르면
  18. CSSOM을 생성합니다, 이 예제에서는
  19. CSS는 페이지 안에 인라인 형태로 직접 삽입되어 있어요
  20. 그러므로 여기에는 CSS 요청이 없습니다
    다음으로, 브라우저는 렌더트리를 만들고
  21. 화면에 보여야만 하는 내용의
  22. 모든 스타일을 계산합니다
  23. 이 부분이 스타일을 재계산하는 것을 알려줍니다
    계산이 끝나면, 레이아웃 단계로 계속되고
  24. 그 단계는 아시다시피, 렌더 트리 요소들의 위치와
  25. 크기들을 계산하는 부분이죠
    마지막으로, 그게 끝나면
  26. 그리기 이벤트를 발생시키고
    페이지가 스크린 위에 렌더링 됩니다
  27. >> 처음 이 모든 것을 시작했을 땐 매우 헷갈렸는데요
  28. 그런데 이건 정말 매우 직관적이네요, 정말 멋져요
  29. >> 그렇다니 고맙네요