rel=modulepreload

基线 2023

新可用

自从 2023 年 9 月，此功能适用于最新设备和浏览器版本。此功能可能不适用于旧设备或浏览器。

modulepreload 关键字用于 rel 属性，该属性属于 <link> 元素，它提供了一种声明式方法来预先获取 模块脚本，解析和编译它，并将它存储在文档的模块映射中，以便以后执行。

预加载允许模块及其依赖项提前下载，并且还可以显着减少总体下载和处理时间。这是因为它允许页面并行获取模块，而不是按顺序获取，因为每个模块都在处理和发现其依赖项。但是请注意，您不能只预加载所有内容！您选择预加载的内容必须与其他操作保持平衡，否则这些操作可能会被饿死，从而对用户体验产生负面影响。

带有rel="modulepreload"的链接类似于带有rel="preload"的链接。主要区别在于，preload只是下载文件并将其存储在缓存中，而modulepreload会获取模块、解析和编译它，并将结果放入模块映射中，以便可以执行它。

使用modulepreload时，获取请求模式始终为cors，并且crossorigin属性用于确定请求凭据模式。如果crossorigin设置为anonymous或""（默认值），则凭据模式为same-origin，用户凭据（如 Cookie 和身份验证）仅在具有same-origin的请求中发送。如果crossorigin设置为use-credentials，则凭据模式为include，并且用户凭据适用于单一来源和跨来源请求。

对于带有rel="modulepreload"的链接，as属性是可选的，默认值为"script"。它可以设置为"script"或任何类似脚本的目标，例如"audioworklet"、"paintworklet"、"serviceworker"、"sharedworker"或"worker"。如果使用其他目标，则会对元素触发名为“error”的Event。

浏览器可能还会选择自动获取模块资源的任何依赖项。但是请注意，这是一个浏览器特定的优化 - 确保所有浏览器都尝试预加载模块的依赖项的唯一方法是单独指定它们！此外，名为load或error的事件在成功或失败加载指定资源后立即触发。如果自动获取依赖项，则不会在主线程中触发其他事件（尽管您可以在服务工作者或服务器中监控其他请求）。

示例

考虑basic-modules示例（实时版本），在JavaScript 模块指南中介绍。

这具有如下所示的文件结构，包括顶层模块main.js，它使用import语句静态导入两个依赖模块modules/canvas.js和modules/square.js。

index.html
main.js
modules/
    canvas.js
    square.js

下面示例的 HTML 显示了如何在<script>元素中获取main.js。只有在main.js加载后，浏览器才会发现并获取这两个依赖模块。

html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Basic JavaScript module example</title>
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>
    <script type="module" src="main.js"></script>
  </head>
  <body></body>
</html>

下面的 HTML 更新了示例，以便对主文件和每个依赖模块使用带有rel="modulepreload"的<link>元素。这快得多，因为三个模块都在它们需要之前异步并行开始下载。当main.js解析完并且它的依赖项已知时，它们已经获取并下载完毕。

html
<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>Basic JavaScript module example</title>
    <link rel="modulepreload" href="main.js" />
    <link rel="modulepreload" href="modules/canvas.js" />
    <link rel="modulepreload" href="modules/square.js" />
    <style>
      canvas {
        border: 1px solid black;
      }
    </style>

    <script type="module" src="main.js"></script>
  </head>
  <body></body>
</html>

规范

规范
HTML 标准
# link-type-modulepreload

浏览器兼容性

BCD 表只在浏览器中加载

另请参阅