html中script如何使用

发布时间：2021-12-17 17:05:46 作者：iii
来源：亿速云阅读：279

# HTML中script如何使用

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

## 一、基本用法

### 1. 内联脚本
直接在HTML文件中编写JavaScript代码：

```html
<script>
  alert('Hello, World!');
</script>

2. 外部脚本

通过src属性引用外部JS文件：

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

二、关键属性详解

属性	作用	示例
`src`	指定外部脚本URL	`<script src="app.js">`
`async`	异步加载（下载不阻塞HTML解析）	`<script async>`
`defer`	延迟执行（HTML解析后按序执行）	`<script defer>`
`type`	指定脚本类型	`<script type="module">`

三、加载策略对比

1. 默认加载（无属性）

阻塞HTML解析
立即执行脚本

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

2. async模式

并行下载不阻塞
下载完成后立即执行（执行顺序不保证）

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

3. defer模式

并行下载不阻塞
在DOMContentLoaded事件前按序执行

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

四、现代JavaScript模块

使用ES6模块系统：

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

特点： - 自动启用严格模式 - 支持import/export - 默认具有defer特性

五、最佳实践

位置建议：
- 常规脚本放在</body>前
- 关键脚本可使用<head>+defer

性能优化：

<!-- 预加载重要资源 -->
<link rel="preload" href="critical.js" as="script">

兼容性处理：

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

动态加载：

const script = document.createElement('script');
script.src = 'dynamic.js';
document.body.appendChild(script);

六、常见问题

1. 为什么有时需要`document.ready`？

// 确保DOM完全加载
document.addEventListener('DOMContentLoaded', () => {
  // 操作DOM的代码
});

2. 如何避免全局污染？

// 使用IIFE
(function() {
  const privateVar = 'hidden';
})();

3. 跨域脚本限制

需服务器设置CORS头：
```
Access-Control-Allow-Origin: *
```

七、TypeScript集成

通过指定类型：

<script type="module">
  // @ts-check
  /** @type {HTMLCanvasElement} */
  const canvas = document.getElementById('myCanvas');
</script>

结语

合理使用<script>标签对页面性能至关重要。现代Web开发推荐： - 优先使用type="module" - 非关键脚本采用async - 使用构建工具打包优化

注意：实际开发中应考虑使用Webpack/Rollup等构建工具管理脚本依赖。

”`

（注：此为精简版，完整1000字版本需扩展每个章节的说明和示例代码，此处因篇幅限制有所压缩）