자바스크립트 Lazy Loading과 웹 폰트의 로딩 순서 설정 방법

10 Nov 2023

javascript

자바스크립트로 개발된 웹 애플리케이션에서 성능을 최적화하기 위해 “Lazy Loading” 기법을 사용할 수 있습니다. Lazy Loading은 페이지 로드 시에 필요한 자원들을 즉시 로드하지 않고, 필요한 시점에 동적으로 로드하는 방식입니다. 이를 통해 초기 로딩 시간을 줄이고 사용자 경험을 개선할 수 있습니다.

Lazy Loading을 구현하는 방법은 다양하지만, 가장 일반적인 방법 중 하나는 Intersection Observer API를 사용하는 것입니다. 이 API는 뷰포트 내에 요소가 나타나는지 감시하고, 요소가 보이는 순간 자원을 로드할 수 있게 해줍니다.

아래는 Intersection Observer를 사용한 예제 코드입니다.

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      // Lazy 로딩할 자원 로드
      const lazyImage = entry.target;
      lazyImage.src = lazyImage.dataset.src;

      // 로드가 완료되면 감시 해제
      observer.unobserve(lazyImage);
    }
  });
});

// Lazy 로딩할 요소들을 선택
const lazyImages = document.querySelectorAll('.lazy');

// 각 요소를 Observer에 추가
lazyImages.forEach(image => {
  observer.observe(image);
});

위 코드에서는 .lazy 클래스를 가진 이미지 요소들을 감시하고, 요소가 화면에 나타나는 순간에 실제 이미지를 로드합니다. 이를 통해 초기 로딩 시간을 최적화할 수 있습니다.

웹 폰트의 로딩 순서 설정 방법

웹 애플리케이션에서 웹 폰트를 사용할 때, 웹 폰트가 로드되기 전에 페이지가 렌더링될 수 있어 폰트가 깨져 보일 수 있습니다. 이를 방지하기 위해 올바른 로딩 순서를 설정해야 합니다.

아래는 웹 폰트의 로딩 순서를 설정하는 방법입니다.

<!DOCTYPE html>
<html>
<head>
  <style>
    /* 폰트 로딩 전에 임시 폰트를 사용 */
    body {
      font-family: sans-serif;
    }

    /* 웹 폰트 로딩 후 원하는 폰트를 사용 */
    @font-face {
      font-family: 'CustomFont';
      src: url('path/to/CustomFont.woff') format('woff');
      /* 필요한 웹 폰트 형식 포맷을 추가로 지정할 수 있음 */
    }

    /* 원하는 요소에 웹 폰트 적용 */
    h1 {
      font-family: 'CustomFont', sans-serif;
    }
  </style>
</head>
<body>
  <h1>Hello, Web Fonts!</h1>
</body>
</html>

위 코드에서는 폰트가 로딩되기 전에 sans-serif 폰트를 임시로 사용한 후, 웹 폰트가 로드된 후에 CustomFont를 적용합니다. 이를 통해 폰트가 깨지지 않고 정상적으로 표시됩니다.

웹 폰트의 로딩 순서를 설정하는 것은 중요한 요소입니다. 폰트가 로드되기 전에 콘텐츠가 표시되면 사용자가 깨진 폰트로 인해 혼란스러워할 수 있으므로, 올바른 로딩 순서를 유지하는 것이 좋습니다.

참고 자료: