대부분의 웹사이트는 window.onload 이벤트를 사용하여 JavaScript 파일을 로드하는데, 이는 전체 페이지가 다운로드되고 렌더링된 후에 실행됩니다.

지연 로딩은 웹페이지가 로드될 때 필요하지 않은 JavaScript 파일을 지연하여 로딩함으로써 초기 로딩 시간을 최적화합니다. 이것은 웹페이지의 기본 기능에만 집중하고, 사용자가 필요로 할 때에만 모듈을 동적으로 로드함으로써 페이지의 성능을 향상시킵니다.

자바스크립트를 지연 로딩할 때 defer나 async 속성을 사용할 수 있습니다.

• defer 속성은 HTML 파싱이 끝난 후 스크립트를 실행합니다.
• async 속성은 자바스크립트를 동시에 다운로드하고 실행합니다.

또한, 콜백 또는 promise를 사용하여 모듈을 로드하는 방법도 있습니다. 이를 통해 필요한 파일만 로드하고 페이지의 초기 로딩 시간을 최소화할 수 있습니다.

지연 로딩을 통해 웹페이지의 성능을 향상시키는 동시에 사용자 경험을 향상시킬 수 있습니다.

더 많은 정보를 원하시면, 다음 링크를 참조해 주세요:

• MDN Web Docs - Loading and Execution
• Google Developers - Reduce JavaScript Payloads with code-splitting and lazy-loading