용어 사전 coding 용어 페이지

지연 로딩

뷰포트에 들어올 때만 네트워크 요청을 보내는 로딩 방식

lazy-loading #performance#javascript

English version

다른 이름

레이지 로딩지연 불러오기

관련 개념

IntersectionObserver 부분 갱신 DocumentFragment Fetch API

핵심 아이디어

지연 로딩은 사용자가 실제로 볼 때만 이미지, 컴포넌트, 데이터를 가져옵니다. loading="lazy" 속성이나 관찰자 API로 요소가 뷰포트에 들어오는 순간 요청을 보내 초기 자원을 절약합니다.

이 블로그에서의 역할

Mathbong의 성능 챕터에서는 지연 로딩을 통해 렌더 함수와 네트워크 전략을 연결합니다. IntersectionObserver 예제와 페인트 측정을 묶어 페이지가 클수록 더 큰 효과를 얻는다는 점을 보여 줍니다.

이 개념을 다루는 글

[Svelte 시리즈 18편] 성능, 코드 스플리팅, 로딩 전략 SvelteKit에서 번들 크기를 줄이고, route-level code splitting과 지연 로딩 전략으로 초기 로딩을 최적화합니다.[JavaScript 시리즈 17편] 퍼포먼스 기초: 페인트·리플로와 지연 로딩 렌더링 단계, layout thrashing 방지, 이미지 지연 로딩, 관찰자 API로 성능을 지키는 방법을 다룹니다.[JavaScript Series 17] Performance Basics: Paint, Reflow, and Lazy Loading Understand how the browser draws web pages, learn how to prevent common layout slowdowns, and apply lazy loading with easy-to-follow code.