Korean subtitles

← 03-28 The Preload Scanner

Get Embed Code
6 Languages

Showing Revision 5 created 03/25/2016 by nc_review1.

  1. 캐머런씨, 이 예제의 크리티컬 렌더링 패스 도표를
    그려보는 건 어떨까요?
  2. >> 좋죠, 봅시다
  3. 첫 번째로는 이 HTML을 요청합니다
  4. 그 후 DOM을 생성하기 시작하고
  5. 또한 요청해야 하는 이 CSS 파일을 발견하죠
  6. 그리고 DOM을 생성하기 시작합니다
  7. 그리고 바로 파싱을 막는 app.js를 만나게 되죠
  8. 그러므로 DOM의 생성을 중단하고
  9. 파일을 요청하고 기다립니다
  10. CSS를 얻고 CSSOM의 생성을 마치면
  11. 이제 app.js를 마침내 실행하고 DOM 생성을 계속합니다
  12. 그러면 다음 스크립트인 timing.js를 만나게 되죠
  13. 그리고 그 파일을 내려받을 때까지 파싱을 막습니다
    제가 맞게 설명했나요?
  14. >> 네, 맞아요, 하지만 app.js에 의해 멈추고
  15. 파일이 도착할 때까지 기다리는 것은
    꽤 오랜 시간이 걸릴거예요
  16. timing.js의 경우도 마찬가지로 도착할 때까지
    기다려야 하죠, 이런 특수한 경우들을 최적화하기 위해
  17. 브라우저는 Preload Scanner라는 특별한 과정을 거칩니다
  18. 이 과정은 문서의 앞부분에서
  19. timing.js같은 크리티컬 CSS와
    자바스크립트 파일들을 알아내려고 하죠
  20. >> 음, 영리하네요
    그렇다면 파서가 막히더라도
  21. timing.js를 발견하고
  22. 크리티컬 리소스이므로 다운로드를
    시작할 수 있다는 건가요?
  23. >> 네, 정확해요, 그러니 CSSOM을 생성하기를 기다리고
  24. timing.js을 요청하기 전에 app.js를 실행하지 않아도 되죠
  25. Preload Scanner는 파서가 막힌 동안에 timing.js를 찾고
  26. 그것을 요청합니다
  27. >> 멋져요, 매우 흥미롭네요
  28. 어디서 Preload Scanner를
    좀 더 배울 수 있을까요?
  29. >> instructor note를 확인하세요
    Preload Scanner가 왜 존재하고
  30. 어떻게 동작하는지 몇 가지
    좋은 자료들을 찾을 수 있을 거예요