JavaScript <script> 태그의 defer 속성, async와 차이

JavaScript의 <script> 태그의 defer 속성, async와의 차이

 

 

자바스크립트는 웹 개발에서 중요한 역할을 하며 웹 페이지를 동적으로 만드는 데 사용됩니다. 웹 페이지에서 자바스크립트 코드를 로드하고 실행하는 방법 중 하나는 script 태그를 사용하는 것입니다. 이 글에서는 script 태그의 defer 속성에 대해 알아보겠습니다.

 

 

<script> 태그의 기본 사용

 

JavaScript 함수와 메서드 개념, 차이, 활용, 예시코드

 

먼저, script 태그를 사용하여 자바스크립트 코드를 HTML 문서에 포함시키는 방법을 살펴봅시다.

 

<script>
    // 자바스크립트 코드 작성
    console.log("안녕, 자바스크립트!");
</script>

 

위의 코드는 HTML 내에 직접 자바스크립트 코드를 작성하는 방법을 보여줍니다. 이렇게 하면 스크립트가 HTML을 파싱하는 동안 실행되며, 웹 페이지의 렌더링을 차단할 수 있습니다.

 

 

<script> 태그의 defer 속성

 

JavaScript 전역변수와 지역변수의 소개, 특징, 차이점, 예시 코드

 

defer 속성을 사용하면 스크립트를 비동기로 로드하고, HTML 파싱을 차단하지 않으면서 스크립트를 실행할 수 있습니다.

 

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

 

위의 코드에서 src 속성을 사용하여 외부 스크립트 파일인 script.js를 로드하고, defer 속성을 추가하였습니다.

 

 

defer 속성의 작동 방식

 

defer 속성을 사용하면 자바스크립트 파일은 HTML 파싱을 차단하지 않고 로드됩니다. 웹 브라우저는 HTML 파싱을 진행하면서 스크립트 파일을 다운로드하고, 다운로드가 완료되면 스크립트를 실행합니다. 스크립트 실행은 일반적으로 HTML 문서가 완전히 파싱된 후에 발생합니다.

 

이로써, 웹 페이지의 렌더링은 차단되지 않으면서 스크립트는 적절한 순서로 실행됩니다. 이것은 중요한 이점을 제공합니다. 예를 들어, 웹 페이지에서 자바스크립트를 사용하여 DOM 요소에 접근하려면 해당 요소가 파싱되어야 합니다. defer를 사용하면 스크립트가 DOM 요소에 안전하게 접근할 수 있게 됩니다.

 

 

async와 defer의 차이

 

 

async 속성과 defer 속성은 비슷한 목표를 가지고 있지만 동작 방식에 차이가 있습니다. async 속성은 스크립트를 비동기적으로 로드하며, 스크립트 다운로드가 완료되면 즉시 실행됩니다. 이에 비해 defer 속성은 스크립트를 비동기적으로 로드하지만 HTML 파싱이 완료된 후에 실행됩니다.

 

따라서, async를 사용하면 스크립트가 더 빨리 실행되지만 실행 순서가 보장되지 않습니다. 반면 defer를 사용하면 스크립트 실행 순서가 보장되므로 스크립트 간의 종속성이 있는 경우에 유용합니다.

 

defer의 장점

• defer를 사용하면 웹 페이지의 성능을 향상시킬 수 있습니다. 페이지가 더 빨리 렌더링되며, 스크립트는 적절한 순서로 실행됩니다.
• 다양한 스크립트 파일을 로드하고 유지 관리하기가 더 쉬워집니다.
• 스크립트가 DOM 요소에 안전하게 접근할 수 있게 되므로 오류 가능성이 줄어듭니다.

 

defer 속성은 웹 개발에서 중요한 도구로, 웹 페이지의 성능을 최적화하고 사용자 경험을 향상시키는 데 도움이 됩니다.

 

 

끝으로

 

defer 속성은 자바스크립트 코드를 효율적으로 관리하고 웹 페이지의 성능을 향상시키는 강력한 도구입니다. 이를 통해 웹 페이지는 빠르게 로드되며 스크립트는 안전하게 실행됩니다. 이러한 장점으로 웹 개발자는 사용자에게 뛰어난 웹 경험을 제공할 수 있으며, 다양한 스크립트 파일을 효과적으로 관리할 수 있습니다. defer를 적절히 활용하면 웹 애플리케이션의 성능과 유지 보수성을 향상시킬 수 있으며, 사용자가 웹 페이지를 원활하게 이용할 수 있도록 도와줍니다.

 

▼ 아래 글도 읽어보세요! ▼

 

JavaScript 모듈, import와 export 모듈화하기, 개념, 이점, 예시코드

 

JavaScript Array.From() 메소드 쉽게 사용하기, 예제 소스 코드 제공