html에서 script 태그의 적절한 위치
script 태그의 위치는 렌더링에 많은 영향을 끼치기 때문에,
코드를 작성할 때 script 태그를 어디에 삽입해야할지 충분히 생각을 해야한다.
body 끝 부분에 넣으면 된다고 얘기를 들었지만,
실제로 다른 분들의 코드를 봤을 때 head에 있는 경우가 많아서 관련 강의를 찾아봤다.
잘 알려져있는 방법으로는 총 4가지가 있다.
ⓐ head 안에 존재하는 경우
ⓑ body 끝 부분에 존재하는 경우
ⓒ head + async
ⓓ head + defer
ⓐ head 안에 존재하는 경우
가장 피해야하는 방법으로, html을 파싱하다가 중간에 멈추고 js를 가져오게 된다.
ⓑ 바디 끝 부분에 존재하는 경우
장점 : 기본적인 html 태그들을 빠르게 볼 수 있다.
단점 : 웹 사이트가 많이 js에 의존적일 경우엔 정상적인 페이지를 보기까지 오래 기다려야한다.
ⓒ head + async
html을 파싱하다가 js를 만나면 일단 병렬로 fetching 한다.
fetching이 완료되면 실행을(executing) 한다.
executing 마저 완료되면 html을 파싱한다.
장점 : 다운로드 시간을 줄일 수 있다.
단점 : 아래 이미지처럼 html 파싱이 완료되기 전에 js가 실행되기 때문에, js에서 DOM요소를 다루는 코드가 있을 경우 위험해질 수도 있다.
또한, 여러개의 작업을 병렬처리하다가 먼저 끝난 애부터 실행하기 때문에, js가 순서대로 동작해야하는 경우에는 제대로 동작되지 않는다.
ⓓ head + defer
가장 좋은 방법으로, html 파싱을 하는 동안에 js를 fetching하고, html 파싱이 끝나면 js를 실행(execute)한다.
우리가 원하는 것과 같이 순서대로 동작한다.
아래 강의를 참고했습니다.
'Web > Javascript' 카테고리의 다른 글
| AJAX, JSON, XML이 뭘까? (0) | 2021.12.16 |
|---|