link rel=#39;preload'로 리소스 우선순위 지정

Jeff Posnick

브라우저에 중요한 글꼴, 스크립트 또는 페이지에서 필요로 하는 다른 리소스가 이벤트 onload개를 삭제하시겠습니까? <link rel="preload">를 사용하면 웹 개발자가 몇 가지 주요 속성과 익숙한 HTML 요소 구문을 사용하여 정확한 동작을 결정할 수 있습니다. 이것은 표준 초안 Chrome 50 출시

<link rel="preload">를 통해 로드된 리소스는 브라우저에 로컬로 저장됩니다. DOM, JavaScript 또는 CSS 예를 들어 다음은 스크립트 파일이 실행되기는 했지만 즉시 실행되지는 않습니다. DOM의 <script> 태그를 통해 포함됩니다.

<link rel="preload" href="used-later.js" as="script">
<!-- ...other HTML... -->
<script>
    // Later on, after some condition has been met, we run the preloaded
    // JavaScript by inserting a <script> tag into the DOM.
    var usedLaterScript = document.createElement('script');
    usedLaterScript.src = 'used-later.js';  
    document.body.appendChild(usedLaterScript)
</script>

그럼, 여기서 무슨 일이 일어날까요? 이 예에서 사용된 href 속성은 이는 웹 개발자에게 친숙한 연결된 리소스의 URL입니다.

as 속성: 하지만 생소할 수 있으며 <link> 요소의 컨텍스트에서 사용됩니다. 브라우저에 광고 소재에 관한 더 많은 컨텍스트를 제공하기 위해 대상 사전 로드 요청이 생성되고 있습니다. 이러한 추가 정보를 통해 브라우저에서 적절한 요청 헤더, 요청 우선순위를 설정하고, 모든 관련 콘텐츠 보안 정책 지시어가 있는지 확인해야 합니다.

자세히 알아보기

요아브 바이스가 최종 가이드 <link rel="preload">를 사용하는 것이 좋습니다. 관심이 있으며 사용해 보고 싶다면 이 기사를 읽고 창의적인 사용 사례를 살펴보겠습니다

<link rel="preload">이(가) <link rel="subresource">을 대체하며, 중대한 버그 및 단점 및 Chrome 이외의 브라우저에서는 구현되지 않았습니다. 따라서 Chrome 50은 지원 삭제 <link rel="subresource">입니다.