스택오버플로우에 관련 글이 있길래 첨부한다.
https://stackoverflow.com/questions/4396849/does-the-script-tag-position-in-html-affects-performance-of-the-webpage
기본적으로 JS 파일과 HTML 파일을 연결시킬 때 사용하는 것이 script 태그이다.
스택오버플로우에 올라온 질문에는 자바스크립트 삽입태그를
- html의 body 맨 위
- 중간
- 맨 끝
- 그리고 질문자가 찾기로는 head 태그에 script 태그를 넣는 것이 많은 사람들이 전형적으로 이용하는 방법이지만, 규칙이 아니라(not a rule)고 했다.
어떤 게 정답일까?
보통은 body 가장 아래에 작성하는 게 원칙이라고 한다. 왜냐하면 자바스크립트는 기본적으로 사용자와 상호작용을 하기 위해 만들어진 언어이기 때문이다.
웹페이지가 로딩될 때는 먼저 UI요소를 먼저 보여주고(정적인 것), 그 다음에 사용자가 그것을 보고 어느 요소와 상호작용을 할지 결정하기 때문이다.
만약에 자바스크립트로 작성된 파일의 용량이 엄청나게 크고, 그것을 body 최상단에 작성을 했다 한다면, 웹페이지는 그것을 fetching해서 parsing하는 동안 HTML 파일을 로딩하지 못하게 된다. 기본적으로 브라우저는 작성된 코드 파일을 위에서 아래로 읽어내려가기 때문이다.
그런데 위 스택오버플로우 글을 더 읽어보니 다음과 같은 글이 있었다.
This is no longer true; modern browsers do “preload scanning” and begin loading all scripts in parallel, whether listed in the head element or at the bottom of the page. External JavaScript often is loaded asynchronously and is written so it won’t execute until the page is loaded and the DOM is ready. Loading a script in the head element is no longer a bad practice.
예전에는 브라우저들이 위에서 아래로 코드를 읽고, 현재 스크립트가 실행완료되기 전까지는 다음 스크립트를 실행하지 않는다는 특징 때문에 스크립트 태그를 바디 아래에 넣었지만, 최신 브라우저들은 preload scanning이라는 것을 한다고 한다. 이것은 웹페이지 구성에 필요한 파일들이 코드의 위에 있든 아래에 있든, 병렬적으로(즉 동시에) fetching되어져서 실행되는 것을 말한다. 그렇기 때문에 더 이상 바디 하단에 스크립트 태그를 쓰지 않아도, 상관이 없다고 한다.
하지만 각자 다 장단점이 있는 법
각각의 경우를 다시 생각해보자(그림 참조)
https://sponge-handbell-9a2.notion.site/javascript-6df6ac648dbc48828e96b5332e7a89bb
1. body 태그 내의 가장 아래에 스크립트 태그를 작성
HTML에 의존적인 사이트의 경우에는 크게 문제가 되진 않는다. 하지만 JS에 의존적인 경우, 시간적인 낭비가 될 수 있다.
2. head 태그 내에 작성
위의 경우와 반대이다. 즉 HTML에 의존적인 사이트의 경우에는 중간에 JS파일을 불러오기 때문에 HTML파일을 불러오고 받는 과정이 멈춰진다. 하지만 JS에 의존적인 사이트의 경우에는 큰 문제는 되지 않는다.
async vs defer(링크 꼭 참조)
이 두 방법은 HTML의 head 태그 내에 script 태그를 작성할 경우 사용하는 방법이다 . script의 속성값에다가 boolean으로 추가가 되는 값이다.
async의 경우, js파일을 다운로드 받은 즉시 실행이 된다. JS가 실행되는 동안 HTML 파일은 파싱이 중지된다. 이 때문에 원하는 HTML 요소가, JS파일의 실행 전에 정의되어 있지 않다면 곤란할 것이다
defer의 경우, JS 파일을 받고 나서, 실행은 HTML이 다 파싱된 이후에 일어나는 방식이다. JS파일을 받은 순서대로 실행되기 때문에 순서를 지켜야 할 경우 유용하다.
