[javascript] 자바스크립트 지연 로딩을 사용하여 웹페이지의 스타일시트 로딩을 어떻게 지연시킬 수 있나요?

18 Dec 2023

javascript

첫 번째 방법은 자바스크립트를 사용하여 스타일시트를 동적으로 추가하는 것입니다. 이것을 통해 웹페이지의 기본 콘텐츠를 우선적으로 로드한 후 스타일시트를 추가할 수 있습니다. 아래는 간단한 예시 코드입니다.

// 페이지 로딩 후 실행되는 함수
window.onload = function() {
  // 지연 로딩할 스타일시트 URL
  var stylesheetUrl = 'path/to/your/stylesheet.css';

  // 새로운 <link> 엘리먼트를 생성하여 스타일시트를 추가
  var stylesheet = document.createElement('link');
  stylesheet.rel = 'stylesheet';
  stylesheet.href = stylesheetUrl;

  // <head> 엘리먼트에 추가
  document.head.appendChild(stylesheet);
};

두 번째 방법은 defer나 async 속성을 이용하여 <link> 태그에 스타일시트를 지연 로딩하는 것입니다. 이를 통해 페이지 로딩과 스타일시트 로딩이 병렬로 처리될 수 있습니다. 예시 코드는 다음과 같습니다.

<link rel="stylesheet" href="path/to/your/stylesheet.css" defer>

또는

<link rel="stylesheet" href="path/to/your/stylesheet.css" async>

이 방법을 사용하면 스타일시트가 페이지 로딩 중에 백그라운드에서 로드되며, 페이지 컨텐츠와 병렬로 다운로드됩니다.

이러한 방법을 사용하면 웹페이지의 초기 렌더링을 빠르게 하고, 더 좋은 사용자 경험을 제공할 수 있습니다.