loyalvi
script标签
loyalvi Lv7
  2026-03-13 16:44:14   2026-03-16 10:42:02    

script标签

script标签

<script> 标签用于在 HTML 文档中嵌入或引用 JavaScript 代码。它支持多种属性，用于控制脚本的加载和执行行为。以下是 <script> 标签的常见属性及其作用：

1. src

  • 作用：指定外部 JavaScript 文件的 URL。
  • 示例：
    1
    <script src="script.js"></script>
  • 注意：
    • 如果使用了 src，则 <script> 标签内的内容会被忽略。
    • 可以指向本地文件或远程文件（如 CDN）。

2. type

  • 作用：定义脚本的 MIME 类型。
  • 默认值：text/javascript（现代浏览器中可省略）。
  • 示例：
    1
    <script type="text/javascript" src="script.js"></script>
  • 其他值：
    • module：表示脚本是一个 ES 模块，支持模块化语法（如 import 和 export）。
      1
      <script type="module" src="module.js"></script>

3. async

  • 作用：使脚本异步加载，下载完成后立即执行，不阻塞 HTML 解析。
  • 示例：
    1
    <script src="script.js" async></script>
  • 特点：
    • 脚本的下载和执行不会阻塞页面渲染。
    • 多个 async 脚本的执行顺序不确定。
  • 适用场景：适合独立且不依赖其他脚本或 DOM 的脚本。

4. defer

  • 作用：使脚本异步加载，但延迟到 HTML 解析完成后执行。
  • 示例：
    1
    <script src="script.js" defer></script>
  • 特点：
    • 脚本的下载不会阻塞 HTML 解析。
    • 多个 defer 脚本会按顺序执行。
  • 适用场景：适合依赖 DOM 或需要按顺序执行的脚本。

5. crossorigin

  • 作用：控制跨域请求的 CORS 行为。
  • 可选值：
    • anonymous：跨域请求不发送用户凭据（如 Cookies）。
    • use-credentials：跨域请求发送用户凭据。
  • 示例：
    1
    <script src="https://example.com/script.js" crossorigin="anonymous"></script>

6. integrity

  • 作用：用于验证脚本文件的完整性，防止资源被篡改。
  • 值：一个基于文件内容生成的哈希值（如 SHA-256）。
  • 示例：
    1
    <script src="script.js" integrity="sha256-abc123..."></script>
  • 注意：通常与 crossorigin 一起使用。

7. nomodule

  • 作用：指定脚本仅在非模块化浏览器中执行。
  • 示例：
    1
    <script nomodule src="fallback.js"></script>
  • 适用场景：为不支持 ES 模块的旧浏览器提供备用脚本。

8. nonce

  • 作用：用于内容安全策略（CSP），允许特定脚本执行。
  • 值：一个随机生成的字符串。
  • 示例：
    1
    <script nonce="abc123" src="script.js"></script>

9. referrerpolicy

  • 作用：控制脚本加载时的 Referer 请求头。
  • 可选值：
    • no-referrer：不发送 Referer。
    • origin：只发送源地址（如 https://example.com）。
    • 其他值如 strict-origin、unsafe-url 等。
  • 示例：
    1
    <script src="script.js" referrerpolicy="no-referrer"></script>

10. charset

  • 作用：指定脚本文件的字符编码。
  • 示例：
    1
    <script src="script.js" charset="UTF-8"></script>
  • 注意：现代浏览器通常会自动检测字符编码，此属性较少使用。

11. language（已废弃）

  • 作用：早期用于指定脚本语言（如 JavaScript 或 VBScript）。
  • 状态：已废弃，不建议使用。

12. text（内联脚本）

  • 作用：直接在 <script> 标签内编写 JavaScript 代码。
  • 示例：
    1
    2
    3
    <script>
        console.log("Hello, World!");
    </script>
  • 注意：内联脚本会阻塞 HTML 解析，除非使用 async 或 defer。

总结

<script> 标签的属性可以控制脚本的加载和执行行为，常用的属性包括：

  • src：引用外部脚本。
  • async 和 defer：优化脚本加载和执行。
  • type="module"：支持 ES 模块。
  • crossorigin 和 integrity：增强安全性。
    根据具体需求选择合适的属性，可以显著提升页面性能和安全性。

defer

defer 是 <script> 标签的一个属性，用于优化 JavaScript 的加载和执行行为，避免阻塞 HTML 解析和页面渲染。以下是对 defer 的详细分析：

1. defer 的作用

  • 延迟执行：带有 defer 属性的脚本会在 HTML 文档解析完成后（即 DOMContentLoaded 事件触发前）按顺序执行。
  • 异步加载：脚本的下载是异步的，不会阻塞 HTML 解析和页面渲染。

2. defer 的工作流程

  1. 解析 HTML：浏览器解析 HTML 文档时，遇到带有 defer 的 <script> 标签，会异步下载脚本文件，同时继续解析 HTML。
  2. 下载脚本：脚本在后台下载，不会阻塞 HTML 解析和页面渲染。
  3. 执行脚本：当 HTML 解析完成后（DOMContentLoaded 事件触发前），浏览器会按照脚本在文档中出现的顺序依次执行。

3. defer 的特点

  • 顺序执行：多个带有 defer 的脚本会按照它们在 HTML 中出现的顺序执行。
  • 不阻塞渲染：脚本的下载和执行都不会阻塞 HTML 解析和页面渲染。
  • 适用于依赖 DOM 的脚本：由于脚本在 DOM 解析完成后执行，适合操作 DOM 或依赖 DOM 结构的代码。

4. defer 的使用场景

  • 依赖 DOM 的脚本：如果脚本需要操作 DOM 或依赖 DOM 结构，使用 defer 可以确保 DOM 已解析完成。
  • 多个脚本按顺序执行：如果有多个脚本需要按顺序执行，且不阻塞页面渲染，defer 是一个理想的选择。
  • 优化页面加载性能：通过异步加载和延迟执行，减少页面加载时间，提升用户体验。

5. defer 与 async 的区别

  • 执行时机：
    • defer：脚本在 HTML 解析完成后执行，且按顺序执行。
    • async：脚本在下载完成后立即执行，执行顺序不确定。
  • 适用场景：
    • defer：适合依赖 DOM 或需要按顺序执行的脚本。
    • async：适合独立且不依赖其他脚本或 DOM 的脚本。

6. defer 的兼容性

  • defer 在现代浏览器中得到了广泛支持，包括 Chrome、Firefox、Edge、Safari 等。
  • 对于不支持 defer 的老旧浏览器，脚本会以默认的同步方式加载和执行。

7. 代码示例

1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Defer Example</title>
    <script src="script1.js" defer></script>
    <script src="script2.js" defer></script>
</head>
<body>
    <h1>Hello, World!</h1>
</body>
</html>
  • 行为分析：
    • script1.js 和 script2.js 会异步下载，不阻塞 HTML 解析。
    • 当 HTML 解析完成后，script1.js 和 script2.js 会按顺序执行。

8. 注意事项

  • 不要依赖脚本执行顺序：虽然 defer 会按顺序执行脚本，但如果脚本之间有复杂的依赖关系，建议使用模块化工具（如 ES Modules）来管理依赖。
  • 避免操作未加载的资源：虽然 defer 会延迟脚本执行，但仍需确保脚本操作的元素或资源已加载完成。

总结

defer 是一种优化 JavaScript 加载和执行的有效方式，特别适合依赖 DOM 或需要按顺序执行的脚本。通过异步加载和延迟执行，defer 可以减少页面加载时间，提升用户体验。

js加载和执行会阻塞浏览器的渲染

JavaScript的加载和执行会阻塞浏览器的渲染。具体影响取决于JS的加载和执行方式：

1. 阻塞渲染

  • 同步加载：默认情况下，浏览器在解析HTML时遇到<script>标签会暂停HTML解析，下载并执行JS，完成后才继续渲染页面。这会阻塞渲染，导致页面加载变慢。
  • 内联脚本：直接在HTML中嵌入的JS代码也会阻塞渲染。

2. 优化方式

  • async属性：让JS异步加载，下载时不阻塞HTML解析，下载完成后立即执行，可能仍会阻塞渲染。
  • defer属性：让JS异步加载，且延迟到HTML解析完成后执行，不会阻塞渲染。
  • 动态加载：通过document.createElement('script')动态插入JS，异步加载且不阻塞渲染。

3. 最佳实践

  • 将JS放在<body>底部，减少对渲染的阻塞。
  • 使用async或defer优化加载。
  • 尽量减少JS文件大小，加快下载和执行速度。

总结

JS的加载和执行会阻塞渲染，但通过async、defer或动态加载等技术可以有效减少阻塞，提升页面加载性能。

script标签
posts/c551121/
作者
loyalvi
发布于
2026-03-13 16:44
许可
  1. script标签
    1. script标签
      1. 1. src
      2. 2. type
      3. 3. async
      4. 4. defer
      5. 5. crossorigin
      6. 6. integrity
      7. 7. nomodule
      8. 8. nonce
      9. 9. referrerpolicy
      10. 10. charset
      11. 11. language（已废弃）
      12. 12. text（内联脚本）
      13. 总结
    2. defer
      1. 1. defer 的作用
      2. 2. defer 的工作流程
      3. 3. defer 的特点
      4. 4. defer 的使用场景
      5. 5. defer 与 async 的区别
      6. 6. defer 的兼容性
      7. 7. 代码示例
      8. 8. 注意事项
      9. 总结
    3. js加载和执行会阻塞浏览器的渲染
      1. 1. 阻塞渲染
      2. 2. 优化方式
      3. 3. 最佳实践
      4. 总结
© 2020 - 2026    loyalvi
由 Hexo 驱动 & 主题 Keep
访客数 访问量
  1. script标签
    1. script标签
      1. 1. src
      2. 2. type
      3. 3. async
      4. 4. defer
      5. 5. crossorigin
      6. 6. integrity
      7. 7. nomodule
      8. 8. nonce
      9. 9. referrerpolicy
      10. 10. charset
      11. 11. language（已废弃）
      12. 12. text（内联脚本）
      13. 总结
    2. defer
      1. 1. defer 的作用
      2. 2. defer 的工作流程
      3. 3. defer 的特点
      4. 4. defer 的使用场景
      5. 5. defer 与 async 的区别
      6. 6. defer 的兼容性
      7. 7. 代码示例
      8. 8. 注意事项
      9. 总结
    3. js加载和执行会阻塞浏览器的渲染
      1. 1. 阻塞渲染
      2. 2. 优化方式
      3. 3. 最佳实践
      4. 总结