*prefetch
와 preload
는 HTML의 <link> 요소의 rel 속성 값으로 사용되는 두 가지 프로세스로, 브라우저가 웹 페이지를 로드하는 방식을 최적화하는 데 사용됩니다. 그러나 두 가지 속성은 사용 목적과 타이밍에서 차이가 있습니다.*
*prefetch
는 브라우저가 현재 페이지를 로드하는 동안 다운로드 및 처리해야 할 리소스를 미리 가져오 기술입니다.*
이렇게 하면 사용자가 다른 페이지로 이동할 때 해당 리소스가 미리 준비되어 있어 로딩 시간을 단축할 수 있습니다.
*prefetch
는 현재 페이지와 관련없는 리소스를 미리 가져올 때 사용되며, 브라우저에게 미리 가져와서 캐시해 놓을 것을 요청합니다.*
<link rel="prefetch" href="path/to/resource">
preload는 현재 페이지에서 사용할 리소스를 미리 가져와 로딩할 준비를 하는 기술입니다.
이는 다음과 같은 경우에 우용합니다.
<link rel="preload" href="path/to/resource" as="type">
<!--
여기서 as 속성은 해당 리소스의 유형을 나타내며,
예를 들어 type에는 image, script, style 등이 올 수 있습니다.
이렇게 하면 브라우저가 어떤 종류의 리소스를 미리 가져와야 하는지
명시적으로 지정할 수 있습니다.
-->
로딩 시기
*preload
는 현재 페이지의 리소스 로딩에 사용되며, 현재 페이지의 로딩이 완료되기 전에 필요한 리소스를 미리 로딩하여 현재 페이지의 로딩 속도를 향상시키는데 사용됩니다.*
*prefetch
는 다음 페이지나 현재 페이지에서 필요한 리소스를 미리 로딩하여 다음 페이지의 로딩 속도를 개선하는 데 사용됩니다.*
우선 순위
*preload
는 현재 페이지의 리소스를 높은 우선순위로 로딩하여, 다른 리소스보다 먼저 로딩될 수 있도록 지정합니다.*
*prefetch
는 높은 우선순위로 로딩되지 않으며, 단지 브라우저가 리소스를 미리 로딩하여 캐싱합니다.*