HTML的<script>标签怎么使用

# HTML的`<script>`标签怎么使用

`<script>`标签是HTML中用于嵌入或引用JavaScript代码的核心元素。本文将详细介绍其基本用法、属性配置、加载机制以及最佳实践。

## 一、基本语法

### 1. 内联脚本
```html
<script>
  alert('Hello World!');
</script>

2. 外部脚本

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

二、关键属性详解

1. src 属性

指定外部脚本URL：

<script src="https://example.com/app.js"></script>

2. type 属性

现代浏览器默认值为module或text/javascript：

<script type="module" src="app.mjs"></script>

3. async 与 defer

属性	执行时机	DOMContentLoaded 事件
无	立即执行并阻塞解析	必须等待脚本执行
async	下载后立即异步执行	可能被阻塞
defer	文档解析后按顺序执行	不会阻塞

示例：

<script async src="analytics.js"></script>
<script defer src="vendor.js"></script>

4. crossorigin 属性

用于CORS请求：

<script crossorigin="anonymous" src="https://cdn.example.com/lib.js"></script>

5. integrity 属性

子资源完整性校验：

<script 
  src="https://example.com/app.js"
  integrity="sha384-oqVuAfXRKap7fdgcCY5uykM6+R9GqQ8K/ux..."
  crossorigin="anonymous">
</script>

三、加载策略对比

1. 常规加载

<!-- 阻塞型加载 -->
<script src="blocking.js"></script>

2. 异步加载模式

<!-- 可能乱序执行 -->
<script async src="async1.js"></script>
<script async src="async2.js"></script>

3. 延迟加载模式

<!-- 保持顺序执行 -->
<script defer src="defer1.js"></script>
<script defer src="defer2.js"></script>

四、动态脚本加载

通过JavaScript动态创建：

const script = document.createElement('script');
script.src = 'dynamic.js';
script.async = false; // 保持顺序
document.head.appendChild(script);

五、模块化脚本

1. ES6模块

<script type="module">
  import { util } from './utils.js';
  util();
</script>

2. 动态导入

import('/modules/my-module.js')
  .then(module => {
    module.default();
  });

六、性能优化建议

1. 关键脚本优先：核心功能脚本使用常规加载
2. 非关键脚本延迟：使用defer或动态加载
3. CDN加速：配合crossorigin使用公共CDN
4. 代码拆分：按需加载模块
5. 预加载提示：

<link rel="preload" href="critical.js" as="script">

七、兼容性处理

1. 旧浏览器降级方案

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

2. 特性检测

if('noModule' in HTMLScriptElement.prototype) {
  // 支持type=module
}

八、安全注意事项

1. 始终启用integrity校验第三方脚本
2. 避免使用document.write()
3. CSP策略配置示例：

<meta http-equiv="Content-Security-Policy" 
      content="script-src 'self' https://trusted.cdn.com">

九、调试技巧

1. 使用//# sourceURL标记内联脚本：

eval('...\n//# sourceURL=dynamicScript.js')

1. 断点调试：

<script>
  debugger; // 自动触发断点
  // ...
</script>

十、最新规范演进

1. importmap（草案）：

<script type="importmap">
{
  "imports": {
    "lodash": "/node_modules/lodash-es/lodash.js"
  }
}
</script>

1. JSON模块：

<script type="module">
  import config from './config.json' assert { type: 'json' };
</script>

通过合理使用<script>标签及其属性，可以显著提升页面性能和安全防护能力。建议根据实际场景组合使用不同加载策略，并始终关注Web标准的最新发展。 “`

（注：本文实际约1100字，此处为保留格式显示代码块，实际字数可能略有差异）