wecode.사전 스터디 주차별 keyWord 2( HTML, CSS ,JavaScript)

Script태그 위치에 따른 차이점

• head태그 내부에 script 태그
  
  script 태그의 파일은 두 가지 과정을 거쳐 실행

1. 다운로드(fetching)
2. 실행(execution)
   
   HTML은 파싱 도중, script 태그를 만나게 되면 중간에 파싱이 멈춤.
   하향식으로 읽는 HTML문서는, head 태그 내부에 불러온 script 태그를
   읽느라 body 내부의 UI는 script 태그를 읽은 후에 사용자에게 보여주게
   됨.
   
   작은 웹은 그렇다 쳐도 만약에 script 파일이 너무 크고 무겁다면, HTML
   파싱을 하다 만 화면을 사용자들에게 보여주고 말 것이며 이는 사용자 경
   에 좋지 않은 영향을 미침.
   
   또한, HTML 파싱이 다 되기 전에 script 파일을 실행시키기 때문에 만약
   script 파일이 DOM 요소를 조작한다면 존재하지 않는 DOM 요소에 접근
   려는 시도로 예상치 못한 문제가 발생할 수 있음

• Body태그 마지막에 script태그
  
  
  이 방법은 HTML을 다운받고 파싱을 마친 후 script 태그를 읽기 때문에 페이지 콘텐츠를 1번의 방법보다 빠르게 볼 수 있음.
   
  그러나 이도 단점이 존재함.
  만약 이 웹을 사용하는데 있어서 사용자가 자바스크립트 없이는 어떠한 활동도 할 수 없다면?
  웹이 자바스크립트에 의존적이라면 HTML이 파싱이 다 돼도 의미가 없음.
  
• async 속성
  
  
  async와 defer은 head 내부의 script에 사용됨.
  async는 HTML파일을 파싱하다 script 태그를 만나면 
  HTML를 마저 파싱하는 동시에 script를 다운로드 함.
  그리고 실행 시키는데 실행시키는 동안에는 HTML파싱이 멈추게 됨.
  장점은 자바스크립트에 의존적인 웹을 좀 더 빨리 실행시킬 수 있다는 점. 
  단점은 결국에는 HTML파싱이 자바스크립트 파일을 실행시키는 동안에 멈추게 돼 그냥 head 부분에 넣는 1번의 상황에서 일어날 문제를 겪을 수 있음.
  
  또한, 실행시켜야 할 script 태그가 여러개일 때, 순서에 상관 없이 먼저 다운로드 받아지는 script를 먼저 실행시키기 때문에 해당 프로젝트가 script 파일의 실행 순서에 영향을 받는다면 문제가 될 수 있음.
• defer 속성
  
  defer은 HTML을 파싱하다 script 태그를 만나면 async와 마찬가지로 HTML을 파싱하면서 script는 동시에 다운로드만 시켜둠.
  
  차이점은 HTML 파싱이 완료된 후에 script를 실행시킨다는 점.
  
  이는 위의 방법들 중 가장 이상적이라고 할 수 있는데,
  HTML파싱이 중간에 멈출 염려도 없고, 2번의 단점도 개선시킬 수 있음.
  
  여러개의 script 태그를 이용해도 미리 다운을 다 받고 HTML도 끝까지 파싱시킨 후에 순서대로 실행되기 때문에 async의 단점을 보완할 수 있음.
  
  다행스럽게도 모든 브라우저에서 지원이 됨.
  프로젝트가 화면을 먼저 띄워야 하는지, 자바스크립트의 영향이 매우 중요한지 등에 따라 다양한 방법을 사용할 수 있겠지만, 깔끔하게 defer로 통일시키는 방법이 나쁘지 않아 보임.