preload and prefetch

2024-01-14 · 5min
AI 生成的摘要

preload（预加载）是用于预加载当前页面所需资源的，它在浏览器解析HTML文档之前加载。 prefetch（预取）是用于预取将来页面所需资源的，它在浏览器解析HTML文档之后加载。 preload用于加载当前页面所需资源，它的优先级高于prefetch。

preload

<link rel="preload"> is used to preload resources that are needed for the current page, and it is loaded before the browser parses the HTML document.

html
<link rel="preload" href="https://example.com/image.png" as="image" />

prefetch

<link rel="prefetch"> is used to prefetch resources that will be needed for the future pages, and it is loaded after the browser parses the HTML document.

html
<link rel="prefetch" href="https://example.com/image.png" as="image" />

preload vs prefetch

  • preload is used to load resources that are needed for the current page, and it is loaded before the browser parses the HTML document.
  • prefetch is used to load resources that will be needed for future pages, and it is loaded after the browser parses the HTML document.
  • preload priority is higher than prefetch

reference