inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

이미지 preloading 관련 질문

309

아아중독자

작성한 질문수 2

2

안녕하세요~! 강의 잘 듣고있습니다 ㅎㅎㅎ
 
다름이 아니라 Image preloading 강의 내용 중 이미지는 자바스크립트의 Image 객체를 사용하여 preloading 할 수 있고
 
img.src = '이미지 주소'; 를 호출할 때 마다 매번 네트워크 요청을 한다고 하셨는데 크롬에서 테스트 해봤을 땐 여러번 호출해도 네트워크 요청을 한 번 하더라구요,
 
그래서 크롬이 업데이트 됨에 따라 해당 부분을 자동으로 최적화 시켜서 그럴수도 있겠다 라고 추측을 해봤는데 이런 이유가 맞을까요?!
 
제가 사용하고 있는 크롬의 버전은 다음과 같습니다~! 버전 96.0.4664.110(공식 빌드) (64비트)
 

이미지 react preloading devtools

답변 1

1

유동균

안녕하세요, 에이비님,

이미지 src 변경에 대한 리소스 로드 방식 관련해서 질문을 주셨는데요,

확인해보니 말씀하신대로 동일한 리소스에 대해서는 추가 로드를 하지 않는 것 같습니다.
아마 브라우저 자체에서 캐시를 해주는 것 같습니다. (보통 캐시도 네트워크 탭에 표시가 되는데 다른 방식으로 캐시가 되는 것 같네요)
그래서 네트워크 탭에서 "캐시 사용 중지(disable cache)" 옵션을 체크하면 src를 같은 값으로 변경해도 이미지를 로드하는 것을 볼 수 있습니다.

답변이 도움되었기를 바라며, 강의에 관심을 가져주셔서 감사합니다. :) 

0

아아중독자

아하 브라우저 캐시 때문이군요! 답변 감사합니다 :)

bundle analyzer 에 대한 질문이 있습니다.

0

108

2

Cannot find module serve 에러

1

107

1

성능 탭에서 소요시간이 안보입니다

0

208

2

이미지 CDN 만드는 방법

0

460

1

Performance FPS 탭이 안보여요.

1

801

1

CPU throttling이 뭔가요?

0

1121

1

default export가 아닌 named export일 때 lazy사용법

1

1071

1

lazy적용하였는데 네트워크탭에 분리하여 보이지 않습니다

1

588

1

network 캐싱에 대해서 질문 있습니다!

1

428

1

vue project에서 chrome performance tab 확인하기

1

460

1

node version으로 인한 오류

4

1234

1

강의 자막

1

957

2

번들파일과 병목현상 질문

2

398

1

webpack-bundle-analyzer 질문

1

787

1

이미지 프리로딩 질문

1

386

1

이미지 최적화 활용

1

582

1

강력 새로고침

1

324

1

Suspense 관련해서 질문드립니다

2

360

1

config-overrides cant resolve path

1

366

1

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

1

612

1

custom react 환경에서 node_modules chunk 분리

1

384

1

removeSpeical 함수를 줄여야겠다고 하는 이유!

1

287

1

Factory pattern에 대해서 궁금한 점이 있습니다

2

375

2

텍스트 압축 방식에 대해 질문이 있습니다

2

955

1