JavaScript的引入方式有哪些

# JavaScript的引入方式有哪些

JavaScript作为现代Web开发的三大核心技术之一，其引入方式直接影响代码的加载时机、执行顺序以及性能优化。以下是JavaScript常见的引入方式及其特点：

---

## 1. 内联方式（Inline Script）
直接在HTML文件中使用`<script>`标签嵌入代码：
```html
<script>
  console.log("内联脚本执行");
</script>

特点： - 代码与HTML混合，适合小型脚本或快速测试 - 执行时机取决于标签在文档中的位置 - 不利于代码复用和维护

2. 外部文件引入（External Script）

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

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

特点： - 实现代码分离，便于维护和缓存 - 支持跨域引入（如CDN资源） - 默认会阻塞HTML解析（除非使用异步加载）

3. 动态加载（Dynamic Script Loading）

通过DOM API动态创建脚本：

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

特点： - 完全控制加载时机 - 常用于按需加载或性能优化 - 需要手动处理依赖关系

4. 模块化引入（ES Modules）

使用ES6模块化语法：

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

或内联模块：

<script type="module">
  import { func } from './module.js';
</script>

特点： - 支持import/export语法 - 自动遵循严格模式 - 默认启用CORS检查

5. 异步加载（Async/Defer）

控制脚本加载行为：

<!-- 异步加载（下载不阻塞，执行时阻塞） -->
<script async src="async.js"></script>

<!-- 延迟执行（下载不阻塞，在DOMContentLoaded前执行） -->
<script defer src="defer.js"></script>

特点： - async适用于独立无依赖的脚本（如统计代码） - defer保持执行顺序，适合多个依赖脚本 - 仅对外部脚本有效

6. Web Worker

在后台线程运行脚本：

const worker = new Worker('worker.js');

特点： - 不阻塞主线程 - 无法直接操作DOM - 通过postMessage通信

最佳实践建议

1. 生产环境优先使用外部文件+模块化引入
2. 关键脚本使用defer，非关键脚本用async
3. 大型项目建议采用打包工具（如Webpack、Vite）
4. 动态加载适合SPA应用的代码分割

合理选择引入方式能显著提升页面加载性能和可维护性。 “`

注：本文约550字，涵盖主流引入方式及实践建议，采用Markdown格式，代码块和列表清晰呈现技术细节。