인프런 커뮤니티 질문&답변

shut up and squat님의 프로필 이미지
shut up and squat

작성한 질문수

프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 1

2-7) 이미지 Preloading

이미지 preload 컴포넌트 preload 차이 질문드립니다.

해결된 질문

작성

·

451

1

컴포넌트 preload 는 원하는 시점에 import만 해오면 preload 되지만
 
이미지 preload는 image객체의 src프로퍼티를 통해 네트워크로 이미지를 불러와서 브라우저에 캐싱되는 단계까지 이루어져야 이미지 preload라고 할 수 있는건가요...?? 
 
 

답변 1

1

유동균님의 프로필 이미지
유동균
지식공유자

안녕하세요,
개인적인 일이 있어서 답변이 너무 늦었습니다.. ㅠ

컴포넌트와 이미지의 프리로딩에 대해서 질문을 주셨는데요,

어렵게 생각하실 필요없고 프리로딩이라는 개념만 이해하시면 됩니다.

뭐 이미 아시겠지만, 미래에 사용할(사용할 거라고 생각하는) 컨텐츠를 미리 불러와서 나중에 지연없이 컨텐츠를 로딩하는 것을 말합니다.

즉, 어떤 방법이 되었든, 어떤 컨텐츠가 되었든 미리 로드해둘 수 있다면 되는 거죠.

그 방법으로 컴포넌트의 경우 import 구문을 사용하여 코드분할된 컴포넌트를 불러오는거고,
이미지는 객체를 생성하여 캐시에 담아두는 방식으로 프리로딩하는 겁니다.

여기서 꼭 이미지를 불러올 때 이미지 객체가 아니여도 됩니다. 이미지 요소를 돔에 몰래 생성해두고 사용할 수도 있습니다.

중요한건 미리 컨텐츠를 다운로드 받고, 담아두고 있다 사용한다는 겁니다.
여기서 보통 다운로드를 하면 캐시에 의해서 저장되기 때문에 담아두는 부분은 크게 신경 안쓰셔도 됩니다.

 

답번이 되셨길바라며, 강의에 관심을 가져주셔서 감사합니다. :)

shut up and squat님의 프로필 이미지
shut up and squat

작성한 질문수

질문하기