JavaScript
script태그의 위치에 따른 차이점
JS를 body 맨 밑에 둬야 하는 이유는 무엇인가요?
-
자바스크립트 코드를 body 태그 맨 밑에 두면, 무거운 스크립트 코드가 있다고 하더라도 html태그와 CSS가 모두 동작한 다음 불러오기 때문에 미완성된 화면이 오랫동안 지속되지 않습니다.
또한 문서의 DOM(Document Object Model)구조가 완료된 시점에서 실행되기 때문에 따로 추가 설정을 할 필요가 없어진다. 따라서 특별한 사유가 없는 경우에는<script>위치는<body> 태그 맨 마지막에 선언하는 것입니다. -
브라우저는 HTML을 읽다가 script 태그를 만나면 스크립트를 먼저 실행해야 하므로 DOM 생성을 멈춥니다.
이럴경우 브라우저의 동작 방식은 두 가지 중요한 이슈를 만듭니다.
-
스크립트에서는 스크립트 아래에 있는 DOM 요소에 접근할 수 없습니다. 따라서 DOM 요소에 핸들러를 추가하는 것과 같은 여러 행위가 불가능해집니다.
-
스크립트에서는 스크립트 아래에 있는 DOM 요소에 접근할 수 없습니다. 따라서 DOM 요소에 핸들러를 추가하는 것과 같은 여러 행위가 불가능해집니다.즉, 화면에 표시되는 것이 지연됩니다.
=> 이런 부작용들을 피하기 위해 스크립트를 페이지 맨 아래 놓는 것이 하나의 방법입니다.
이렇게 하면 스크립트 위에 있는 요소에 접근할 수 있습니다. 또한, 페이지 콘텐츠 출력을 막지 않게 됩니다.
-
head에 둬야 하는 경우가 있을까요? 어떨 때인가요?(defer async 제외)
- 문서를 초기화하거나 설정하는 가벼운 Script 파일은
<head>안에 넣어도 된다.
defer, async 스크립트
- 다행히 이런 문제를 해결할 수 있는
<script>속성이 있습니다. 바로defer와async입니다.
async 속성
async속성은<head>에<script>를async속성과 함께 사용async속성은 파싱과 JS 불러오기를 병렬적으로 진행- 병렬적으로 진행하기 때문에 기존 방법들보다는 다운로드 받는 시간이 절약되어 효율적
하지만 JS를 실행하는 단계에서는 파싱을 중지하게 되고, JS실행이 끝나면 다시 파싱을 재시작 하게 되기 때문에 HTML이 모두 실행되기 전에 JS가 실행되게 된다.
다수의 스크립트 파일을 다운로드 받게되면 다운로드가 완료되는 순으로 JS파일을 실행하기 때문에 순서에 상관없이 실행하게 된다. 만약 순서에 의존적인 페이지라면 문제가 될 수 있기 때문에 유의해야한다.
defer 속성
defer속성은async속성과 마찬가지로<head>에<script>를defer속성과 함께 사용- 병렬적으로 파싱과 JS 불러오기를 진행하게 되고 파싱이 모두 끝나면 JS를 실행
- 병렬적으로 진행되기 때문에 다운로드 시간이 절약되고 async 속성과는 다르게 파싱하는 중에 JS파일을 모두 다운로드 받아놓고 파싱이 끝난 후 순서대로 JS파일을 실행하기 때문에 원하는 방향대로 스크립트를 실행할 수 있다.
💡 결론 💡
- 외부 스크립트를 불러올 때에는 defer 속성을 사용하는 것이 최선이다. 만약 스크립트 순서가 상관 없고 빨리 실행하는게 중요할 경우에는 async 속성을 사용할 수 있겠다.
함께 일하는 프론트엔드 개발자 이성은입니다🐥