이 블로그는 크로뮴, Gecko 환경에서 제일 잘 작동됩니다.
profile

글루미스토어

프론트엔드 개발 블로그입니다. Nextjs 14로 개발되었습니다.

HTML 페이지가 두 번 로딩되면서 로딩 속도가 느려질때 (Network waterfall twice times download)

my Blog!

HTML 페이지가 두 번 로딩되면서 로딩 속도가 느려질때 (Network waterfall twice times download)

조회수1170<b>[운영자]</b>영이













제목 없d음.webp


현재 포트폴리오용 웹사이트 개발을 하던 나는 

내 웹사이트가 뭔가 이상하다는 것을 발견했다.


크롬의 개발자도구(F12)에서 Network 탭을 보면 

내 웹사이트에서 무슨 자원을 다운로드했으며, 얼마나 오래걸렸는지 볼 수 있는데


다운로드가 2차례씩 일어나는 것이었다.


심지어 SEO 벤치마크 점수도 최악으로 떨어져 

도저히 어디 내놓지도 못할 포트폴리오였다.












제목 없d음 - 복사본.webp


정말로 모든 자원이 두 번씩 다운로드 되고 있었고,

인터넷에서 아무리 정보를 뒤져도 나오지가 않았다.


아니, 도대체 왜?

DOM을 두 번 로딩할만한 코드는 전혀 넣지 않았는데...?












<div class="mainPopups" id="mainPopup9">
	<a href="#!" class="btnClose"><img src="/images/icon_close.webp" alt="icon"> </a>
	<div>
		<iframe id="webpagesIframe" src=""></iframe>
	</div>
</div>


2~3시간을 삽질한 끝에 원인을 찾았다.

iframe이나 img 태그에 src값을 빈 값을 넣으면 

DOM이 처음부터 다시 로딩된다.


정확한 메커니즘은 구글링으로도 찾을 수 없었으나, 

아마도 src에 적혀있는 자원을 한 번 더 찾는게 아닌가 하는 생각이 들었다.


아파치 서버에 httpRequest를 한 번 더 보내서 

한 번 더 모든 자원을 다운로드 받아보는 것이 그 목적이 아닌가 한다.
















댓글: 1

2024-06-18 07:34

123123

이전/다음글