link 태그의 리소스 우선순위 제어

<link> 태그를 통해 리소스 우선순위를 제어할 수 있는 속성들이 존재한다. 이를 정리해보자.

 

1. rel 속성

- preload : 리소스를 사전로드하여 페이지 로딩 성능을 개선한다. 

- prefetch : 리소스를 사전로드하지만 현재 페이지 로딩에 직접적으로 필요하지 않을 때 사용. 지정된 리소스의 다운로드를 백그라운드에서 진행. 저장된 리소스를 캐시에 저장하며, 페이지 전환 시에 사용된다.

- stylesheet : 스타일시트 파일을 지정

- icon : 페이지 아이콘을 지정. favicon 지정

- dns-prefetch : 도메인의 DNS를 사전 로드

- preconnect : 서버와의 연결을 사전 설정

 

2. as 속성

- script : 스크립트 파일로 처리

- style : 스타일시트로 처리

- image : 이미지로 처리

- font : 폰트파일로 처리

- document : 문서로 처리

- manifest : 웹 앱 매니페스트 처리

- audio : 오디오 파일 처리

- video : 비디오 파일로 처리

- fetch : 리소스를 fetch하는데 사용

 

3. crossorigin

<link>, <script>, <img> 등의 리소스 요소에서 사용되는 송석으로 CORS정책을 제어하는데 사용한다.

- anonymouse : 익명으로 리소스를 요청. 리소스 요청에 대해 인증정보가 전송되지 않음을 나타낸다. 따라서 브라우저는 요청에 대해 인증 정보를 보내지 않는다. 따라서 응답하는 서버에도 이 익명요청을 받아들일 수 있도록 설정되어 있어야한다. credentials flag : same-origin

- user-credentials : 인증된 요청을 사용하여 리소스를 요청. 브라우저는 요청에 대해 인증정보를 보낼 수 있음. 따라서 응답 서버는 허용된 요청에만 응답할 수 있도록 설정 되어있어야한다. credentials flag : include

 

4. media 

미디어 유형을 지정하여 미디어 쿼리와 일치할 때만 리소스를 로드.

https://www.tcpschool.com/html-tag-attrs/link-media

코딩교육 티씨피스쿨

 

5. nonce

Content Security Policy(CSP)에서 사용될 무작이 값

 

6. href

로드할 리소스의 경로