如何区分 preload 和 prefetch 在前端中的作用？

preload 与 prefetch 的区别在于加载时机、优先级和应用场景。前者用于关键资源，后者用于预加载未来需要的内容。

性能优化 中等 资源加载 加载 HTML

preload和prefetch是HTML中的资源加载优化技术，主要用于加快页面资源加载速度。它们的关键区别在于加载时机、优先级和使用场景。

主要区别如下：

  1. 加载时机：
    • preload：在当前页面的渲染过程中立即以高优先级加载资源，不拖延主线程执行，但仅下载资源不执行代码。
    • prefetch：在当前页面的空闲阶段以低优先级加载资源，只有在浏览器空闲时才请求，避免占用高带宽或优先任务资源。
  2. 优先级：
    • preload：具有较高浏览器优先级（通常在Top或High级别），适合确保关键资源的加载。
    • prefetch：优先级较低（Idle或Low级别），仅用于加载非核心资源以减少页面干扰。
  3. 执行资源：
    • 两者均只将资源下载到缓存中，不会自动执行脚本或渲染内容。需资源真正使用时（如script标签加载或引用），浏览器从缓存中取用资源执行。 
      <link rel="preload" href="app.js" as="script">
<link rel="prefetch" href="optional-script.js" as="script">
  4. 适用场景：
    • preload：适用于当前页面首屏所需的资源，如首屏CSS、关键JS或首屏图片，提升LCP（最大内容绘制）速度。例如首屏大图的快速渲染。
    • prefetch：用于加载未来导航才用的资源，如后续页面入口的JS或CSS内容，改善子页面访问感知速度而非当前页面首屏。

在面试中，可强调实际应用原则：use preload for crucial visible page elements first, prefetch for optional later-used content.