Korean subtitles

← 03-07 JavaScript and the CRP

Get Embed Code
6 Languages

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

  1. >> 좋아요, 이제 전 HTML과 CSS 최적화에 대한
  2. 감을 잡은 것 같아요
    그러면, 이제 렌더 트리로 옮겨가나요?
  3. >> 거의요, 아직 자바스크립트는 다루지 않았어요
  4. 그리고 자바스크립트는 가장 중요한 단계이니
    한 번 짚고 넘어가도록 합시다
  5. 좋아요, 음
    맞춰볼게요, 최소화하고, 압축하고, 캐싱 하나요?
  6. 맞아요, 그 전략들은 아주 좋은 것들이죠
  7. 하지만 지금까지 보았던 자바스크립트도
  8. 파서 방해 스크립트라는 문제가 있어요
  9. 그 의미가 무엇인지 보도록 합시다
  10. 그리고 우리가 어떻게 최적화시킬 수 있는지
    보도록 해요
  11. 저는 우리 Hello world 페이지의 아래편에
  12. 간단한 인라인 스크립트를 추가했어요
  13. 살펴봅시다, 첫 번째로, DOM이 완성되면
    첫 span 요소를 찾게 됩니다
  14. 보시다시피 그건
  15. web performance라는 텍스트를 포함하고 있죠
  16. 그다음 내부 텍스트와 CSS 속성을 바꾸어서
    DOM 요소를 수정합니다
  17. >> 매우 간단해 보이네요
  18. >> 그렇죠, 이 예제는 자바스크립트가
  19. DOM과 CSSOM 모두 조종할 수 있음을 보여주고 있어요
  20. 자바스크립트는 매우 강력한 도구이죠
  21. 그리고 여기서부터 좀 더 흥미로운 부분입니다
  22. 새로운 div 요소를 생성하고, 텍스트 내용을 설정하고
  23. CSS 색상 속성을 설정하고, 페이지에 덧붙이죠
  24. 폰에서 페이지를 로드해 봅시다
  25. 텍스트는 이제
    Hello web performance students가 아니라,
  26. Hello interactive students로 보이게 되죠
    그리고 바로 아래에 새로운 요소가 있어요
  27. >> 맞아요, 예상한 대로네요
  28. 그렇다면 여기에서 우리가
    성능을 최적화할만한 요소가 있나요?
  29. >> 확실히 있죠, 자바스크립트의 최적화만으로도 한 과정이 될 수 있어요
  30. 하지만 이 특정 예제에서는, 코드 자체에 관한 것이 아니라
  31. 어떻게 페이지에 포함되어 있는지를 볼 거에요
    다시 뒤로 돌아가서
  32. 이 페이지를 만들 때 브라우저가
    어떻게 작동하는지 생각해 봅시다