html문서에서 script태그의 위치와 속성

1. html 문서 중 head 안에 script 태그를 그냥 포함하게 되면 일어나는 일

: 사용자가 html 파일을 다운 받으면 브라우저는 html 파일을 한 줄 한 줄 분석한다. (html을 파싱 한다고 함)

그렇게 한 줄씩 파싱하다가 js파일이 연결된 script태그를 만나면 파싱을 잠시 멈추고 필요한 js파일을 서버에서 다운 받고, 실행한 다음에 다시 파싱을 이어간다.

-> 인터넷이 느리거나 js파일의 용량이 크면 사용자가 html파일을 보기까지 시간이 오래 걸린다.

 

2. body태그 안, 끝 부분에 script 태그를 넣으면 일어나는 일

: 브라우저가 html을 파싱 해서 화면에 보여질 페이지가 준비된 뒤에 script 태그를 만나기 때문에, js 파일을 다운받기 전에 사용자가 html페이지를 볼 수 있다.

-> 웹사이트가 js파일에 의존적이라면 사용자가 기본적인 html 파일을 볼 수 있다고 해도, js파일을 다운 받고 실행하기까지 기다려야만 의미 있는 웹사이트를 볼 수 있다.

 

3. head 안에 script 태그를 넣고 속성 값으로 async 옵션을 주면 일어나는 일

: 브라우저가 html 파일을 파싱 하다가 script 태그를 만나면 파싱과 동시에 js파일을 다운 받는다. 다운이 완료되면 html 파싱을 잠시 멈추고 js파일을 실행한다. 그 뒤에 나머지 html 파일을 파싱 한다.

-> body 끝에 script 태그를 넣는 것보다는 js파일을 다운 받는 것이 html 파싱과 함께 일어나기 때문에 다운로드 받는 시간을 아낄 수 있지만, html이 파싱 되기 전에 js가 실행되기 때문에 문제가 생길 수 있다. 또한 html을 파싱 하는 중간에 js파일을 실행하기 위해 파싱을 멈추기 때문에 사용자가 html 파일을 보는데 시간이 오래 걸릴 수 있다.

 

4. head 안에 script 태그를 넣고 differ 옵션을 주면 일어나는 일

: 브라우저가 html을 파싱 하다 script를 만나면 파싱과 함께 js파일도 다운 받는다. 그리고 html 파싱이 끝난 뒤에 js파일을 실행한다.

-> html을 파싱 하는 동안 필요한 js파일을 다운 받아놓고, 먼저 사용자에게 보여줄 html 파일의 파싱을 마친 뒤 js파일을 실행한다.

-> 가장 효율적인 옵션!