fetchpriority 속성은 브라우저의 리소스 스케줄러에 중요도 힌트를 줍니다. 핵심 이미지가 다른 이미지보다 먼저 필요한 경우 우선순위를 높일 수 있습니다.
데모에서는 공유 대역폭을 차지하는 두 다운로드의 진행률이 바뀝니다. 이 값은 힌트이므로 정확한 전송 순서를 보장하지 않으며 네트워크 트레이스로 효과를 확인해야 합니다.
언제 쓰나
중요 리소스가 발견됐는데도 낮은 우선순위로 다운로드될 때 검토합니다.
가져오기 우선순위
Fetch priority
리소스의 상대적 중요도를 브라우저에 알려 다운로드 순서에 영향을 줍니다.
···
<div class="atlas"><div class="head"><b>FETCH PRIORITY · shared bandwidth</b><span class="pulse"></span></div><div class="stage"><div class="fp-row"><span>hero image</span><div class="fp-track"><i id="fp-hero"></i></div></div><div class="fp-row"><span>below fold</span><div class="fp-track"><i id="fp-other"></i></div></div><div class="fp-tag" id="fp-tag">hero: high priority</div></div></div>.atlas{width:min(94vw,720px);height:min(88vh,320px);border:1px solid var(--line);border-radius:14px;background:var(--surface);padding:clamp(10px,2.5vmin,18px);display:flex;flex-direction:column;gap:clamp(7px,2vmin,12px);font:500 clamp(12px,3.2vmin,16px)/1.25 var(--font-sans),sans-serif;color:var(--fg);box-shadow:0 8px 28px rgba(0,0,0,.06)}.head{display:flex;align-items:center;justify-content:space-between;color:var(--accent);letter-spacing:.03em}.pulse{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:blink 1.3s infinite}@keyframes blink{50%{opacity:.2}}.stage{flex:1;min-height:0;position:relative;overflow:hidden}.mono{font-family:ui-monospace,SFMono-Regular,Consolas,monospace}.muted{color:var(--muted)}.accent{color:var(--accent)}.box{border:1px solid var(--line);border-radius:8px;background:var(--bg)}.fp-row{height:34%;display:flex;align-items:center;gap:8px}.fp-row span{width:75px;font-size:12px}.fp-track{flex:1;height:22px;border:1px solid var(--line);border-radius:5px;background:var(--bg);overflow:hidden}.fp-track i{display:block;height:100%;background:var(--accent);transition:width .6s}.fp-row+ .fp-row i{background:var(--accent-2)}.fp-tag{text-align:right;color:var(--accent);font-size:12px;padding-top:8px}let high=true;function tick(){high=!high;document.getElementById('fp-hero').style.width=high?'85%':'42%';document.getElementById('fp-other').style.width=high?'24%':'67%';document.getElementById('fp-tag').textContent=high?'hero: high priority':'equal priority'}tick();setInterval(tick,2200)