BEFORE

07. DNS Prefetch

별도 origin(assets.<IP>.nip.io:4001, nip.io는 와일드카드 서브도메인을 해당 IP로 풀어주는 퍼블릭 DNS라 로컬 설정 없이도 "진짜 cross-origin"을 재현합니다)에서 스크립트를 힌트 없이 불러옵니다. DevTools Network의 Timing 탭에서 DNS Lookup 구간을 확인해 보세요.
⚠️ http(3000번 포트)로 접속한 상태에서 테스트하세요 (https에서는 mixed-content로 차단됩니다).
📍 이 측정은 당신이 지금 쓰는 브라우저에서 실행됩니다.

Before (힌트 없음) After (dns-prefetch)

⏳ 외부 asset 로드 대기 중... (origin: )

🔧 실제 구현 코드

var s = document.createElement("script");
s.src = "http://" + assetHost + ":4001/asset.js"; // 힌트 없이 바로 요청
document.body.appendChild(s);

별도 origin에 대한 사전 힌트 없이 스크립트를 요청하면, 브라우저는 이 리소스를 실제로 파싱하는 시점에야 비로소 DNS 조회 → TCP 연결(→ TLS 핸드셰이크)을 시작합니다.

← 실습 목록으로 돌아가기