<script>: The Script element

¥Attributes

该元素包括 全局属性。

¥This element includes the global attributes.

async

对于经典脚本，如果存在 async 属性，则经典脚本将在解析的同时并行获取，并在可用时立即进行评估。

对于 模块脚本，如果存在 async 属性，则脚本及其所有依赖将在解析时并行获取，并在可用时立即进行评估。

警告：如果传统脚本中没有 src 属性（即内联脚本），则不得使用此属性，在这种情况下它不会产生任何效果。

¥Warning: This attribute must not be used if the src attribute is absent (i.e. for inline scripts) for classic scripts, in this case it would have no effect.

此属性允许消除解析器阻塞 JavaScript，浏览器在继续解析之前必须加载和评估脚本。defer 在这种情况下也有类似的效果。

如果使用 defer 属性指定属性，则元素将表现得好像只指定了 async 属性一样。

这是一个布尔属性：元素上存在布尔属性表示真值，不存在该属性表示假值。

有关浏览器支持的说明，请参阅 浏览器兼容性。另见 asm.js 的异步脚本。

attributionsrc Experimental

指定你希望浏览器随脚本资源请求一起发送 Attribution-Reporting-Eligible 标头。在服务器端，这用于触发在响应中发送 Attribution-Reporting-Register-Source 或 Attribution-Reporting-Register-Trigger 标头，以分别注册基于 JavaScript 的 归因来源 或 归因触发器。应该发回哪个响应标头取决于触发注册的 Attribution-Reporting-Eligible 标头的值。

注意：或者，可以通过发送包含 attributionReporting 选项的 fetch() 请求（直接在 fetch() 调用上设置，或在传递到 fetch() 调用的 Request 对象上设置）或发送在请求对象上调用 setAttributionReporting() 的 XMLHttpRequest 来注册基于 JavaScript 的归因源或触发器。

¥Note: Alternatively, JavaScript-based attribution sources or triggers can be registered by sending a fetch() request containing the attributionReporting option (either set directly on the fetch() call or on a Request object passed into the fetch() call), or by sending an XMLHttpRequest with setAttributionReporting() invoked on the request object.

你可以设置此属性的两个版本：

• 布尔值，即仅 attributionsrc 名称。这指定你希望将 Attribution-Reporting-Eligible 标头发送到与 src 属性指向相同的服务器。当你在同一台服务器上处理归因源或触发器注册时，这样做是可以的。注册归因触发器时，此属性是可选的，如果省略，将使用空字符串值。
• 包含一个或多个 URL 的值，例如：
  html

  <script src="myscript.js"
          attributionsrc="https://a.example/register-source https://b.example/register-source"
  >
  

  这在请求的资源不在你控制的服务器上，或者你只想处理在其他服务器上注册归因源的情况下很有用。在这种情况下，你可以指定一个或多个 URL 作为 attributionsrc 的值。发生资源请求时，除了资源来源外，Attribution-Reporting-Eligible 标头还将发送到 attributionSrc 中指定的 URL。然后，这些 URL 可以根据需要使用 Attribution-Reporting-Register-Source 或 Attribution-Reporting-Register-Trigger 标头进行响应以完成注册。

  注意：指定多个 URL 意味着可以在同一功能上注册多个归因源。例如，你可能有不同的活动要衡量其成功率，这涉及针对不同的数据生成不同的报告。

  ¥Note: Specifying multiple URLs means that multiple attribution sources can be registered on the same feature. You might for example have different campaigns that you are trying to measure the success of, which involve generating different reports on different data.

有关详细信息，请参阅 归因报告 API。

blocking Experimental

此属性明确指示在获取脚本时应阻止某些操作。要阻止的操作必须是下面列出的以空格分隔的阻止标记列表。

• render：屏幕上内容的呈现被阻止。

crossorigin

对于未通过标准 CORS 检查的脚本，普通 script 元素将最少的信息传递给 window.onerror。要允许对静态媒体使用单独域的站点进行错误日志记录，请使用此属性。有关其有效参数的更多描述性解释，请参阅 CORS 设置属性。

defer

此布尔属性设置为向浏览器指示该脚本将在解析文档之后但在触发 DOMContentLoaded 事件之前执行。

具有 defer 属性的脚本将阻止 DOMContentLoaded 事件触发，直到脚本加载并完成评估。

警告：如果 src 属性不存在（即对于内联脚本），则不得使用此属性，在这种情况下它将不起作用。

¥Warning: This attribute must not be used if the src attribute is absent (i.e. for inline scripts), in this case it would have no effect.

defer 属性对 模块脚本 没有影响 - 它们默认延迟。

¥The defer attribute has no effect on module scripts — they defer by default.

具有 defer 属性的脚本将按照它们在文档中出现的顺序执行。

此属性允许消除解析器阻塞 JavaScript，浏览器在继续解析之前必须加载和评估脚本。async 在这种情况下也有类似的效果。

如果使用 async 属性指定属性，则元素将表现得好像只指定了 async 属性一样。

fetchpriority

提供获取外部脚本时要使用的相对优先级的提示。允许值：

high

表示相对于其他外部脚本的高优先级提取。

low

表示相对于其他外部脚本的低优先级提取。

auto

默认：表示自动确定相对于其他外部脚本的获取优先级。

integrity

此属性包含内联元数据，用户代理可以使用它来验证所获取的资源是否已交付而没有意外操作。未指定 src 属性时，不得指定该属性。参见 子资源完整性。

nomodule

此布尔属性设置为指示脚本不应在支持 ES 模块 的浏览器中执行 - 实际上，这可用于为不支持模块化 JavaScript 代码的旧浏览器提供后备脚本。

nonce

允许 script-src 内容安全策略 中的脚本的加密随机数（使用一次的数字）。服务器每次传输策略时都必须生成唯一的随机数值。提供一个无法猜测的随机数至关重要，否则绕过资源的策略是微不足道的。

referrerpolicy

指示获取脚本时发送哪个 referrer，或者脚本获取的资源：

• no-referrer：Referer 标头将不会被发送。
• no-referrer-when-downgrade：如果没有 TLS (HTTPS)，Referer 标头将不会发送到 origin。
• origin：发送的引荐来源网址将仅限于引荐页面的来源：它是 scheme、host 和 port。
• origin-when-cross-origin：发送到其他来源的引用将受到方案、主机和端口的限制。同一原点的导航仍将包含该路径。
• same-origin：将发送 same origin 的引荐来源网址，但跨源请求将不包含引荐来源网址信息。
• strict-origin：仅当协议安全级别保持不变 (HTTPS→HTTPS) 时才将文档的来源作为引用站点发送，但不要将其发送到安全性较低的目的地 (HTTPS→HTTP)。
• strict-origin-when-cross-origin（默认）：执行同源请求时发送完整 URL，仅在协议安全级别保持相同时发送源（HTTPS→HTTPS），并且不向安全性较低的目的地发送标头（HTTPS→HTTP）。
• unsafe-url：引荐来源网址将包括来源和路径（但不包括 fragment、password 或 username）。此值不安全，因为它会将受 TLS 保护的资源的来源和路径泄漏到不安全的来源。

注意：空字符串值 ("") 既是默认值，又是备用值（如果不支持 referrerpolicy）。如果 referrerpolicy 没有在 <script> 元素上明确指定，它将采用更高级别的引用策略，即在整个文档或域上设置一个策略。如果更高级别的策略不可用，则空字符串将被视为等同于 strict-origin-when-cross-origin。

¥Note: An empty string value ("") is both the default value, and a fallback value if referrerpolicy is not supported. If referrerpolicy is not explicitly specified on the <script> element, it will adopt a higher-level referrer policy, i.e. one set on the whole document or domain. If a higher-level policy is not available, the empty string is treated as being equivalent to strict-origin-when-cross-origin.

src

该属性指定外部脚本的 URI；这可以用作直接在文档中嵌入脚本的替代方法。

type

该属性指示所表示的脚本的类型。该属性的值将为以下之一：

属性未设置（默认）、空字符串或 JavaScript MIME 类型

指示该脚本是 "经典脚本"，包含 JavaScript 代码。如果脚本引用 JavaScript 代码而不是指定 MIME 类型，则鼓励作者省略该属性。JavaScript MIME 类型是 IANA 媒体类型规范中列出。

importmap

该值指示元素的主体包含导入映射。导入映射是一个 JSON 对象，开发者可以使用它来控制浏览器在导入 JavaScript 模块 时如何解析模块说明符。

module

该值导致代码被视为 JavaScript 模块。脚本内容的处理被推迟。charset 和 defer 属性无效。有关使用 module 的信息，请参阅我们的 JavaScript 模块 指南。与经典脚本不同，模块脚本需要使用 CORS 协议进行跨源获取。

speculationrules Experimental

该值表明元素的主体包含推测规则。推测规则采用 JSON 对象的形式，确定浏览器应预取或预渲染哪些资源。这是 Speculation Rules API 的一部分。

任何其他值

嵌入的内容被视为数据块，并且不会被浏览器处理。开发者必须使用非 JavaScript MIME 类型的有效 MIME 类型来表示数据块。所有其他属性都将被忽略，包括 src 属性。

¥Deprecated attributes

charset Deprecated

如果存在，其值必须是 ASCII 与“utf-8”的不区分大小写的匹配。没有必要指定 charset 属性，因为文档必须使用 UTF-8，并且 script 元素从文档继承其字符编码。

language Deprecated Non-standard

与 type 属性一样，此属性标识正在使用的脚本语言。然而，与 type 属性不同的是，该属性的可能值从未标准化。应改用 type 属性。

¥Notes

不带 async、defer 或 type="module" 属性的脚本以及不带 type="module" 属性的内联脚本会在浏览器继续解析页面之前立即获取并执行。

¥Scripts without async, defer or type="module" attributes, as well as inline scripts without the type="module" attribute, are fetched and executed immediately before the browser continues to parse the page.

脚本应使用 text/javascript MIME 类型，但浏览器很宽松，仅当脚本使用图片类型 (image/*)、视频类型 (video/*)、音频类型 (audio/*) 或 text/csv 时才阻止它们。如果脚本被阻止，则会向元素发送 error 事件；否则，发送 load 事件。

¥The script should be served with the text/javascript MIME type, but browsers are lenient and only block them if the script is served with an image type (image/*), a video type (video/*), an audio type (audio/*), or text/csv. If the script is blocked, an error event is sent to the element; otherwise, a load event is sent.

¥Examples

¥Basic usage

这些示例展示了如何使用 <script> 元素导入（外部）脚本。

¥These examples show how to import (an external) script using the <script> element.

<script src="javascript.js"></script>

以下示例展示了如何将（内联）脚本放入 <script> 元素内。

¥And the following examples show how to put (an inline) script inside the <script> element.

<script>
  alert("Hello World!");
</script>

¥Module fallback

支持 type 属性的 module 值的浏览器会忽略任何具有 nomodule 属性的脚本。这使你能够使用模块脚本，同时为不支持的浏览器提供 nomodule 标记的后备脚本。

¥Browsers that support the module value for the type attribute ignore any script with a nomodule attribute. That enables you to use module scripts while providing nomodule-marked fallback scripts for non-supporting browsers.

<script type="module" src="main.js"></script>
<script nomodule src="fallback.js"></script>

¥Importing modules with importmap

在脚本中导入模块时，如果不使用 type=importmap 功能，则必须使用绝对 URL 或相对 URL 的模块说明符导入每个模块。在下面的示例中，第一个模块说明符 ("./shapes/square.js") 相对于文档的基本 URL 进行解析，而第二个模块说明符是绝对 URL。

¥When importing modules in scripts, if you don't use the type=importmap feature, then each module must be imported using a module specifier that is either an absolute or relative URL. In the example below, the first module specifier ("./shapes/square.js") resolves relative to the base URL of the document, while the second is an absolute URL.

import { name as squareName, draw } from "./shapes/square.js";
import { name as circleName } from "https://example.com/shapes/circle.js";

导入映射允许你提供映射，如果匹配，可以替换模块说明符中的文本。下面的导入映射定义了键 square 和 circle，它们可以用作上面显示的模块说明符的别名。

¥An import map allows you to provide a mapping that, if matched, can replace the text in the module specifier. The import map below defines keys square and circle that can be used as aliases for the module specifiers shown above.

<script type="importmap">
  {
    "imports": {
      "square": "./shapes/square.js",
      "circle": "https://example.com/shapes/circle.js"
    }
  }
</script>

这允许我们使用模块说明符中的名称（而不是绝对或相对 URL）来导入模块。

¥This allows us to import modules using names in the module specifier (rather than absolute or relative URLs).

import { name as squareName, draw } from "square";
import { name as circleName } from "circle";

有关可以使用导入映射执行哪些操作的更多示例，请参阅 JavaScript 模块指南中的 使用导入映射导入模块 部分。

¥For more examples of what you can do with import maps, see the Importing modules using import maps section in the JavaScript modules guide.

¥Embedding data in HTML

你还可以通过在 type 属性中指定有效的非 JavaScript MIME 类型，使用 <script> 元素通过服务器端呈现将数据嵌入到 HTML 中。

¥You can also use the <script> element to embed data in HTML with server-side rendering by specifying a valid non-JavaScript MIME type in the type attribute.

<!-- Generated by the server -->
<script id="data" type="application/json">
  {
    "userId": 1234,
    "userName": "Maria Cruz",
    "memberSince": "2000-01-01T00:00:00.000Z"
  }
</script>

<!-- Static -->
<script>
  const userInfo = JSON.parse(document.getElementById("data").text);
  console.log("User information: %o", userInfo);
</script>

¥Blocking rendering till a script is fetched and executed

你可以在 blocking 属性中包含 render 令牌；页面的渲染将被阻止，直到脚本被获取并执行。在下面的示例中，我们阻止异步脚本上的渲染，以便脚本不会阻止解析，但保证在渲染开始之前进行评估。

¥You can include render token inside a blocking attribute; the rendering of the page will be blocked till the script is fetched and executed. In the example below, we block rendering on an async script, so that the script doesn't block parsing but is guaranteed to be evaluated before rendering starts.

<script blocking="render" async src="async-script.js"></script>

¥Technical summary

¥See also

• document.currentScript
• Flavio Copes 关于高效加载 JavaScript 并解释 async 和 defer 之间差异的文章
• JavaScript 模块 指南