[javascript] 자바스크립트 지연 로딩을 구현하는 방법은 무엇인가요?

18 Dec 2023

javascript

defer와 async는 <script> 태그의 속성으로, 스크립트의 로드와 실행을 제어하는 데 사용됩니다. defer 속성을 사용하면 스크립트가 페이지의 파싱이 끝난 후 순서대로 실행되며, async 속성을 사용하면 스크립트가 독립적으로 로드되고 가능한 빨리 실행됩니다.

예를 들어, 다음은 defer를 사용하여 스크립트를 지연 로딩하는 예제입니다.

<!DOCTYPE html>
<html>
<head>
  <title>지연 로딩 예제</title>
  <script src="example.js" defer></script>
</head>
<body>
  <!-- 페이지 내용 -->
</body>
</html>

example.js 스크립트는 페이지 파싱이 끝난 후에 실행됩니다.

또 다른 방법은 스크립트를 동적으로 추가하여 지연 로딩을 구현하는 것입니다. 이 방법은 필요한 스크립트를 나중에 로드하여 초기 페이지 로딩을 빠르게 만들 수 있습니다.

지연 로딩을 구현함으로써 웹 페이지의 초기 로딩 시간을 줄이고 성능을 향상시킬 수 있습니다.

더 자세한 내용은 MDN 웹 문서(https://developer.mozilla.org/ko/docs/Web/HTML/Element/script)를 참조할 수 있습니다.