페이지에서 여러 네트워크 요청을 동시에 실행하면 동일한 대역폭을 두고 경쟁하는 경우가 많습니다. 분석, 로깅, 백그라운드 동기화와 같은 중요하지 않은 데이터는 우선순위를 낮춰 사용자 시작 데이터 가져오기나 중요한 데이터 가져오기가 더 빨리 완료될 수 있도록 해야 합니다.
구현 방법
- 백그라운드 요청 식별: 즉각적인 사용자 환경에 영향을 미치지 않는 필수적이지 않은 데이터를 위한
fetch()호출을 확인합니다. - 가져오기 우선순위 적용:
fetch()초기화 객체에priority: 'low'옵션을 추가합니다.
예시 코드
// Use high priority (default) for critical UI updates
const criticalData = await fetch('/api/data');
// Explicitly deprioritize background analytics
fetch('/api/analytics', {
method: 'POST',
body: JSON.stringify(eventData),
// Lower the priority to prevent network contention
priority: 'low'
});
권장사항
- 현재 뷰에 필요하지 않은 분석, 비콘 또는 원격 분석 데이터에는
priority: 'low'를 사용합니다. - 권장사항:
priority: 'low'를 사용하여 사용자가 나중에 필요로 할 수 있는 데이터를 '미리 가져오기'하여 지금 필요한 작업이 느려지지 않도록 합니다. - 사용자 환경에 중요한 가져오기에는
priority: 'low'를 사용하지 마세요. - 가져오기 옵션 객체에서 지원 중단된
importance키를 사용하지 마세요. 올바른 키는priority입니다.
대체 전략
Fetch API의 priority 옵션은 점진적 개선입니다. 이를 지원하지 않는 브라우저는 이 옵션을 무시하고 기본 우선순위로 요청을 처리합니다. 기본 사용에는 명시적인 기능 감지 또는 대체 로직이 필요하지 않습니다.