JS를 사용하기 위해서는 script를 html 파일에 import해주어야 한다.
그렇다면 script는 html의 상단에 import 해야 할까? 하단에 import 해야 할까?
즉 html body보다 전에 넣어야 할까 혹은 그 후에 넣어야 할까?
먼저 상단에 import했다고 치자. 브라우저는 html의 body를 실행하기 전에, script의 파일을 다운로드하고, 실행하게 된다. 이렇게 되면 두 가지 문제가 생긴다.
1. 브라우저는 아직 html의 body를 읽지 못한 상태이므로 script에서는 body에 있는 DOM에 접근하지 못하게 된다.
2. script 파일이 너무 크게 되면 html body를 사용자에게 보이기까지 너무 오래 걸린다.
그렇다면 하단에 import 하면 될까? 이렇게 되면 html body를 먼저 출력할 수 있다.
하지만 반대로 html의 용량이 너무 크게 될 경우, script를 가져오기까지 한참이 걸린다는 문제가 생긴다.
이를 해결하기 위한 script의 속성이 있다. defer과 async이다.
이런 식으로 사용이 되는데, defer과 async를 상단에 사용하면 어떤 점이 달라지는지 알아보자
defer
일단 defer에 대해 설명하기 전에 브라우저가 html과 script를 사용자에게 보이려면 다음과 같은 것들을 해야한다고 볼 수 있다.
-html parsing
-script download
-script execute
defer은 상단에 사용을 하더라도 html의 파싱을 멈추지 않는다. 대신 Html이 파싱되는 동안 script의 다운로드를 시행한다. script의 다운로드가 끝나면 그때 script를 execute한다. script가 시행되는 순서는 코드를 작성한 순서이다. 여러 script 파일을 import했을 때, 위에 작성된 파일부터 순서대로 시행된다는 것이다.
async
한편 async(비동기)를 사용하게 되면 쉽게 말해 html을 신경쓰지 않고 script가 시행된다고 볼 수 있다. html의 파싱하고 있던 거 그대로 파싱은 진행이 되고 그와는 별개로 script의 다운로드 및 실행이 이루어진다. 만일 여러 script에 대해서 속성 async를 추가하였다면 script의 실행 순서는 로드가 완료된 순서이다. 즉 코드 상 윗 부분에서 script를 import했다고 하더라도 다운로드가 완료된 순서에 따라 순서는 얼마든지 달라질 수 있다는 것이다.
이 때문에 script를 import 할 때에는 주로 defer을 사용하게 된다.
위의 설명을 그림으로 나타내면 다음과 같다.
