JS 스크립트
html에 자바스크립트를 적용 시킬 때는 2가지를 고려해야 합니다.
첫 번째는 <head> 태그와 <body>태그 중 어디에 넣을 것인가?
두 번째는 async 방식과 defer 방식중 어떤 것을 선택할 것 인가?
스크립트 파일 입력 시기에 따른 차이 ( head vs body )
<head>
스크립트를 <head> 태그 내에 포함하는 경우 스크립트 파일이 HTML 문서의 파싱 과정 중에 로드되고 실행됩니다.
따라서, 스크립트 파일을 로드하는 동안에는 HTML 파싱이 일시 중단됩니다.
이는 스크립트 파일이 크거나 다운로드 시간이 오래 걸릴 경우 웹 페이지의 렌더링이 지연될 수 있는 단점이 있습니다.
과정 : parsing HTML → js script 파일 <script> 만남 → fetch → excute → parsingHTML → 페이지 준비! ( fetch + excute 시간 동안 파싱이 잠시 멈춘다. )
<body>
스크립트를 <body> 태그 내에 포함하는 경우 스크립트 파일은 웹 페이지의 나머지 내용과 함께 로드되고 실행됩니다.
따라서, 스크립트 파일의 로드 시간이 길어지더라도 웹 페이지의 렌더링은 지연되지 않습니다.
대부분의 경우, 스크립트 파일을 <body> 태그 내에 위치시키는 것이 권장됩니다.
과정 : parsing HTML → page 준비! → js script 파일 <script> 만남 → fetch → excute
defer vs async
<body> 태그 내부에 있는 스크립트에 defer와 async 속성을 사용할 수는 있지만, 이들 속성은 <head> 태그 내부의 스크립트에만 영향을 미칩니다.
async
태그에 async 속성을 추가하면 스크립트 파일의 로드와 실행이 비동기적으로 이루어집니다.
html을 파싱하다가 js 스크립트를 만나면 fetching을 시키고 parsing은 지속됩니다.
그러다가 fetching(다운로드) 이 끝나고 excuting될때 파싱을 멈추고 excuting이 끝나면 파싱을 다시 시작합니다.
그리고 최종적으로 파싱이 끝나면 페이지가 준비됩니다.
defer
js script를 만나면 fetching시키되 parsing은 멈추지 않고 끝까지 진행된다.
그리고 파싱이 완료되면 페이지가 준비되고 이때 js 파일이 실행된다. 또한 여러 스크립트를 다운로드 순으로 실행 시켜주기 때문에 순서를 보장합니다.
마무리
외부 스크립트를 불러올 때에는 defer 속성을 사용하는 것이 최선이다. 만약 스크립트 순서가 상관 없고 빨리 실행하는게 중요할 경우에는 async 속성을 사용할 수 있겠다.
물론 인터넷이 아주아주 빠른 곳에서는 눈에 띄지 않는 문제일 수도 있다. 하지만 아직은 네트워크환경이 좋지 않은 곳도 존재하기도 하거니와 작은 차이가 큰 결과를 낳기에 이런 차이를 지각하고 적용하는 것이 중요하다고 생각한다.