Script Tag type

script, script async, script 차이점

HTML 문서 안에서 JavaScript 파일을 로드하는 방법은 여러 가지가 있습니다.

가장 일반적인 세 가지 방법은 script, script async, script defer입니다.

이 세 가지 방법은 각각 다른 방식으로 스크립트를 로드하며, 이는 페이지 로딩 속도나 실행 타이밍에 영향을 줄 수 있습니다.

이 글에서는 이 세 가지 방법의 차이점을 살펴보고, 각각의 사용 시나리오에 대해 설명합니다.

세 가지 방식의 비교

먼저 표를 통해 간단하게 살펴보겠습니다.

차이점 설명과 예시

기본적인 script 태그

<script> 태그는 HTML 문서 내에서 스크립트를 동기적으로 로드합니다.

이는, 스크립트 파일을 로딩하고 실행하는 동안 웹 페이지의 나머지 파싱이 중단됨을 의미합니다. 즉, 크고 복잡한 스크립트 파일을 로딩할 경우, 페이지의 로드 시간이 길어질 수 있습니다.

...
<script src="example.js"></script>
...

예를 들어, 웹페이지 상단에 큰 자바스크립트 파일을 로드하는 코드가 있다면, 사용자는 전체 페이지가 로드되기까지 기다려야 할 수 있습니다. 이는 사용자 경험을 저하시킬 수 있습니다.

script async

async 속성이 있는 <script> 태그는 스크립트를 비동기적으로 로드합니다.

즉, HTML 문서의 파싱과 동시에 스크립트를 다운로드할 수 있습니다. 하지만, 스크립트 다운로드가 완료되는 즉시, HTML 문서의 파싱을 멈추고 스크립트를 실행합니다.

...
<script async src="example.js"></script>
...

이 방식은 주로 의존성이 없는 스크립트를 로드할 때 유용합니다.

예를 들어, 분석 툴이나 광고 스크립트를 페이지에 추가할 때 async를 사용할 수 있습니다. 이렇게 하면, 이러한 스크립트가 페이지 로딩을 방해하지 않도록 할 수 있습니다.

script defer

defer 속성이 있는 <script> 태그도 스크립트를 비동기적으로 로드하지만 실행 타이밍이 다릅니다.

스크립트 로딩은 HTML 문서의 파싱과 동시에 이루어지지만, 스크립트의 실행은 문서의 파싱이 완전히 끝난 후에 이루어집니다.

...
<script defer src="example.js"></script>
...

defer는 주로 HTML 문서의 파싱과 관련 없이 실행되어야 할 스크립트에 사용됩니다.

또한, 여러 개의 defer 스크립트가 있을 경우, 이들은 스크립트가 선언된 순서대로 실행되므로 스크립트 간의 실행 순서가 중요한 경우에 유용합니다.

예를 들어, 웹페이지가 완전히 로드된 후에만 표시되어야 하는 대규모의 스크립트나, 스크립트 실행 순서가 중요한 경우에는 defer 속성을 사용하는 것이 적합합니다.

결론

HTML 문서 내에서 JavaScript를 로드하는 방법은 각기 다른 특징과 장단점을 가지고 있습니다.

사용자의 요구 사항과 스크립트의 성격에 따라 적절한 로딩 전략을 선택하는 것이 중요합니다.

기본적으로는 defer를 사용하는 것이 좋으며, 특정 상황에서 async의 비동기 로딩이 더 적합할 수도 있습니다.