Korean subtitles

← 02-32 Cameron's Netflix Optimizations

Get Embed Code
6 Languages

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

  1. 그래서 전 제가 가장 좋아하는 웹사이트 중 하나인
    넷플릭스를 살펴보기로 했어요
  2. Cmd + Option + I 키를 눌러서
    개발자 도구를 엽니다
  3. emulation을 활성화 시키고
  4. 그리고 타임라인으로 갑니다
  5. Cmd + Shift + R 키를 눌러서
    새로 고침을 합니다
  6. 페이지가 로딩되면서 일어나는 이벤트들을 볼 수 있군요
  7. 첫 번째 몇 개를 볼까요
  8. 여기에서 홈페이지에 요청을 보낸 것을 볼 수 있네요
  9. 이것은 페이지를 로딩할 때 필요한 HTML 파일이고요
  10. 스크롤을 내려봅시다
  11. HTML 파일이 로딩을 끝냈을 때
  12. HTML을 파싱하는 것을 볼 수 있죠
    이걸 열어 볼까요
  13. 그리고 다른 두 파일에 대한 요청을 볼 수 있는데요
    둘 다 include라고 쓰여 있네요
  14. 첫 번째 것을 클릭하면, 이 CSS 파일이 나오는데요
  15. 스크롤을 내리죠
  16. 이 파일을 보면 2가지의 분명한
    최적화 방법을 쓸 수 있을 것 같아요
  17. 첫 번째 최적화 방법은
  18. CSS를 최소화시켜서 모든 공백 문자를 지우는 거죠
  19. 파일 내부의 공백 문자는
    우리가 읽기 편하도록 도와줄 뿐이에요
  20. 그건 브라우저가 파일을 파싱하는 것에는
    전혀 도움이 되지 않죠
  21. 그래서 실제로, 우리가 모든 빈 공간을 없애면
  22. 우리 데이터에서 상당한 바이트들을 절약할 수 있어요
  23. 두 번째 최적화는 중요한 CSS를
    인라인으로 만드는 거에요
  24. 그렇게 하면 이 페이지에 스타일을 입히기 위해
    또 다른 요청을 보낼 필요가 없어지죠