html中script如何使用

发布时间：2021-12-17 17:05:46 来源：亿速云阅读：312 作者：iii 栏目：web开发

# 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字版本需扩展每个章节的说明和示例代码，此处因篇幅限制有所压缩）

向AI问一下细节