performance.getEntriesByType("navigation")

performance.getEntriesByType("navigation")는 페이지의 로딩 방식(예: 새로고침, 히스토리 탐색, 최초 로드 등) 을

확인하기 위해 사용되는 Web Performance API의 메서드입니다.

이를 통해 브라우저가 페이지를 어떤 방식으로 불러왔는지를 알 수 있습니다.

 

 

📌 문법

javascript

const entries = performance.getEntriesByType("navigation");

• 반환값: PerformanceNavigationTiming 객체 배열 (보통 하나의 항목만 존재)
• 이 객체에는 type, startTime, duration 등 다양한 로딩 관련 정보가 포함되어 있습니다.

---

📘 주요 속성 (PerformanceNavigationTiming)

javascript

const entry = performance.getEntriesByType("navigation")[0]; 
console.log(entry.type);

 

entry.type 값 종류

값	의미
"navigate"	일반적인 링크 클릭이나 URL 직접 입력 등으로 페이지를 처음 연 경우
"reload"	사용자가 F5, location.reload() 등을 통해 새로고침한 경우
"back_forward"	브라우저의 뒤로가기/앞으로가기 버튼으로 로딩된 경우
"prerender"	사전 렌더링된 페이지가 보여진 경우 (실험적)

 

---

✅ 예시

javascript

 

const entries = performance.getEntriesByType("navigation");

if (entries.length > 0) {
	const navType = entries[0].type;

	switch (navType) {
		case "reload":
			console.log("🚀 새로고침으로 페이지가 로드됨");
			break;
		case "navigate":
			console.log("🔗 일반 탐색으로 페이지 로드");
			break;
		case "back_forward":
			console.log("↩️ 히스토리 탐색(뒤로/앞으로)로 로드");
			break;
		default:
			console.log("기타 로딩 방식:", navType);
	}
}

---

🎯 이 API를 사용하는 이유

• 새로고침 감지 (예: 리프레시 시에만 특정 로직 실행)
• 뒤로가기/앞으로가기 구분
• 최적화 분석: 페이지 로딩 성능 분석, 퍼포먼스 측정

---

⚠️ 브라우저 지원

• 대부분의 모던 브라우저(Chrome, Firefox, Edge, Safari) 에서 지원
• 구형 브라우저(예: IE11)에서는 미지원 → performance.navigation으로 대체

---

🔁 구버전 대안 (deprecated)

javascript

if (performance.navigation.type === 1) {
	console.log("페이지가 새로고침으로 로드됨");
}

 

• performance.navigation.type은 더 이상 권장되지 않으며 향후 제거될 수 있습니다.
• 가능하면 getEntriesByType("navigation") 사용을 권장합니다.