*prefetch 와 preload는 HTML의 <link> 요소의 rel 속성 값으로 사용되는 두 가지 프로세스로, 브라우저가 웹 페이지를 로드하는 방식을 최적화하는 데 사용됩니다. 그러나 두 가지 속성은 사용 목적과 타이밍에서 차이가 있습니다.*

prefetch

*prefetch는 브라우저가 현재 페이지를 로드하는 동안 다운로드 및 처리해야 할 리소스를 미리 가져오 기술입니다.*

이렇게 하면 사용자가 다른 페이지로 이동할 때 해당 리소스가 미리 준비되어 있어 로딩 시간을 단축할 수 있습니다.

*prefetch는 현재 페이지와 관련없는 리소스를 미리 가져올 때 사용되며, 브라우저에게 미리 가져와서 캐시해 놓을 것을 요청합니다.*

<link rel="prefetch" href="path/to/resource">

preload

preload는 현재 페이지에서 사용할 리소스를 미리 가져와 로딩할 준비를 하는 기술입니다.

이는 다음과 같은 경우에 우용합니다.

• 현재 페이지에서 필요한 리소스를 미리 가져와 더 빠른 로딩을 도와줍니다.
• 필수적인 리소스(CSS파일이나 중요한 JS파일)를 미리 다운로드해 크리티컬 렌더링 경로(Critical Rendering Path)를 최적화합니다.
• 사용자 인터렉션이 발생할 때 빠른 반응을 위해 사전로드할 수 있습니다.

<link rel="preload" href="path/to/resource" as="type">
<!-- 
     여기서 as 속성은 해당 리소스의 유형을 나타내며, 
     예를 들어 type에는 image, script, style 등이 올 수 있습니다.
     이렇게 하면 브라우저가 어떤 종류의 리소스를 미리 가져와야 하는지 
     명시적으로 지정할 수 있습니다.
-->

중요한 차이점

• 로딩 시기

  *preload는 현재 페이지의 리소스 로딩에 사용되며, 현재 페이지의 로딩이 완료되기 전에 필요한 리소스를 미리 로딩하여 현재 페이지의 로딩 속도를 향상시키는데 사용됩니다.*

  *prefetch는 다음 페이지나 현재 페이지에서 필요한 리소스를 미리 로딩하여 다음 페이지의 로딩 속도를 개선하는 데 사용됩니다.*

• 우선 순위

  *preload는 현재 페이지의 리소스를 높은 우선순위로 로딩하여, 다른 리소스보다 먼저 로딩될 수 있도록 지정합니다.*

  *prefetch는 높은 우선순위로 로딩되지 않으며, 단지 브라우저가 리소스를 미리 로딩하여 캐싱합니다.*