重温学习之script标签

重温学习之script标签

概括: script标签用在于HTML文档中包含或引用客户端脚本

• 属性:

  • async: 声明一个异步脚本（布尔属性）。

  • defer: 如果出现该属性，表示脚本在执行时不会影响页面的构造，且会在文档解析完成后执行（布尔属性）。

  • src: 表示包含要执行的代码的外部文件位置。

  • type: 定义脚本的 MIME 类型。一般为 “text/javascript” 或 “module”。

  • charset: 表示从外部文件加载脚本时使用的字符集。

  • crossorigin: 用于指示请求是否应该设置为跨域请求。

  • nonce: 用于指定用于脚本内容的加密安全随机数。

  • integrity: 用于指定脚本的 Subresource Integrity (SRI) 校验值。

  • referrerpolicy: 用于控制请求的引用策略。

  • nomodule: 用于指定不支持模块的浏览器不执行该脚本。

• 用法:

  • async 属性是script标签的一个布尔属性, 用于声明一个异步脚本.

    • 当浏览器遇到带有async属性的script标签时, 他会开始下载脚本,但不会等待脚本下载和执行完成后再继续解析页面, 而是会立即开始解析和渲染后续的文档内容

    • 使用asnyc属性的情况通常是当脚本不依赖于页面的其他内容,且不需要按照特定顺序执行时, 例如 一些分析代码或广告代码可以使用async属性 , 以免影响页面加载性能

      <script  asnyc  src="example.js"></script>
      

      在这个实例中, 浏览器会异步下载并执行example.js, 而不是阻塞页面的其他操作. 需要注意的是, 使用asnyc属性加载脚本的执行顺序不能被保证,因此如果有多个异步脚本之间有依赖关系,可能需要额外的处理来确保他们按正确的顺序执行.

  • defer属性是script标签的一个布尔属性,用于延迟脚本的执行

    • 当浏览器遇到带有defer属性的script标签时, 他会开始下载脚本, 但不会立即执行. 而是会等待整个文档解析完成后,按照在文档中出现的顺序依次执行带有defer属性的脚本

    • 使用defer属性的情况通常是当脚本需要等待整个文档解析完成后再执行, 且脚本之间的执行顺序很重要时. 这样可以确保脚本在文档完全加载后再执行, 避免阻塞文档的解析和渲染

      <script defer src="example.js"></script>
      

    • 在这个示例中，浏览器会异步地下载 example.js，但脚本的执行会被推迟到文档解析完成后。如果有多个带有 defer 属性的脚本，它们将按照它们在文档中出现的顺序依次执行。

  • src属性是script标签的一个属性, 用于指定包含要执行的代码的外部文件的位置. 通过设置src属性, 可以将JavaScript代码从HTML文档中分离出来,使得代码可以存储在独立的JavaScript文件中, 并开通src属性引用

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

    • 在这个示例中，浏览器会根据 src 属性的值（“example.js”）下载该文件，并将其作为外部

  • type 属性是 <script> 标签的一个可选属性，用于指定脚本内容的 MIME 类型。

    • 虽然在 HTML5 中 type 属性变得可选，但为了确保向后兼容性，仍然建议在使用 <script> 标签时包含 type 属性。

    • 常见的 type 属性取值包括:

      text/javascript"：JavaScript 脚本
      "text/css"：CSS 样式表
      "text/html"：HTML 内嵌代码
      "application/json"：JSON 数据
      

      <script type="text/javascript"></script>
      

  • charset 属性是 <script> 标签的一个可选属性，用于指定外部脚本文件的字符集编码。如果省略 charset 属性，则默认使用浏览器的默认字符集。

    <script src="example.js" charset="UTF-8"></script>
    

    • 在这个示例中，charset 属性指定了外部脚本文件 “example.js” 的字符集编码为 UTF-8。这样可以确保浏览器正确解析包含在该文件中的 Unicode 字符。

  • nonce 属性是 <script> 标签的一个可选属性，用于指定外部脚本文件的随机值。这个随机值被称为“nonce”，可以用于在内容安全策略（CSP）中防止跨站点脚本攻击（XSS）。如果省略 nonce 属性，则默认不使用随机值。

    <script src="example.js" nonce="somerandomvalue"></script>
    

    • 在这个示例中，nonce 属性指定了外部脚本文件 “example.js” 的随机值为 “somerandomvalue”。在使用内容安全策略时，可以通过比较 <script> 标签的 nonce 属性值和服务器端返回的随机值，来确保外部脚本文件是从受信任的源加载的。
    • 需要注意的是，nonce 属性应该只包含随机值，而不应该包含其他任何信息，因为这可能会导致安全问题。

  • integrity 属性是 <script> 标签的一个可选属性，用于指定外部脚本文件的完整性校验值。这个校验值可以用于验证外部脚本文件是否被篡改或损坏。如果省略 integrity 属性，则默认不进行完整性校验

    <script src="example.js" integrity="sha384-abcdefg"></script>
    

    • 在这个示例中，integrity 属性指定了外部脚本文件 “example.js” 的 SHA-384 完整性校验值为 “abcdefg”。当浏览器加载这个脚本文件时，会计算该文件的 SHA-384 值，并将其与 integrity 属性指定的值进行比较。如果两者不一致，则说明文件已经被篡改或损坏，浏览器会拒绝加载该文件
    • 需要注意的是，integrity 属性的值应该是一个字符串，包含了使用特定算法（如 SHA-256、SHA-384 等）计算出的完整性校验值。在实际使用时，可以通过在线工具或命令行工具来计算完整性校验值。

  • referrerpolicy 是 HTML 中用于指定如何发送 HTTP Referer 头的属性，它可以用在 <a>、<area> 和 <iframe> 标签上。HTTP Referer 头是在用户点击链接或加载资源时发送的一个 HTTP 头部，用于标识引荐来源页面的 URL。

    <a href="https://example.com" referrerpolicy="no-referrer">Visit Example</a>
    

    • 在这个例子中，referrerpolicy 属性被设置为 “no-referrer”，表示在用户点击链接时不发送 Referer 头。

    • 常见的 referrerpolicy 值包括：

      "no-referrer"：不发送 Referer 头。
      "no-referrer-when-downgrade"：如果从 HTTPS 页面点击到 HTTP 页面，则不发送 Referer 头；否则发送完整的 Referer 头。
      "same-origin"：仅在当前页面和目标页面属于同源时发送完整的 Referer 头。
      "strict-origin"：仅在同源情况下发送完整的 Referer 头。
      "origin"：仅发送当前页面的源信息作为 Referer 头。
      

      这些值可以帮助网站开发者控制 Referer 头的发送行为，从而保护用户隐私并降低安全风险

  • nomodule 是 <script> 标签的一个可选属性，用于指定某个脚本文件只在不支持 ES6 模块的浏览器中执行。这可以帮助开发者避免在旧版浏览器中出现语法错误或执行错误。

    <script src="example.js" nomodule></script>
    

    • 在这个示例中，nomodule 属性指定了外部脚本文件 “example.js” 只在不支持 ES6 模块的浏览器中执行。
    • 需要注意的是，如果浏览器支持 ES6 模块，则会忽略 nomodule 属性。因此，开发者应该同时提供一个不包含 type="module" 和 nomodule 属性的版本，以确保在所有浏览器中都能正确地加载和执行脚本文件。