怎么引入JavaScript脚本文件

发布时间：2021-11-03 12:51:45 作者：柒染
来源：亿速云阅读：382

# 怎么引入JavaScript脚本文件

JavaScript作为现代Web开发的三大核心技术之一，其引入方式直接影响页面性能、代码维护性和执行效率。本文将详细介绍6种主流的JavaScript脚本引入方法，并分析其适用场景与最佳实践。

## 一、基础引入方式

### 1. 内联脚本（Inline Script）

直接在HTML文件中使用`<script>`标签嵌入代码：

```html
<script>
  console.log('内联脚本执行');
  function showAlert() {
    alert('Hello World!');
  }
</script>

特点： - 适合小型代码片段或快速测试 - 会阻塞HTML解析（同步执行） - 不利于代码复用和维护

2. 外部脚本（External Script）

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

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

文件结构建议：

project/
├── index.html
└── scripts/
    ├── main.js
    └── utils/
        └── helper.js

优势： - 实现代码分离和复用 - 浏览器可缓存脚本文件 - 便于团队协作开发

二、加载位置优化

1. 头部引入（Head Tag）

<head>
  <script src="header-script.js"></script>
</head>

问题：会阻塞页面渲染，导致白屏时间延长

2. 底部引入（Before Body Close）

<body>
  <!-- 页面内容 -->
  <script src="footer-script.js"></script>
</body>

最佳实践： - 将非关键脚本放在</body>前 - 关键功能脚本可使用async/defer

三、现代加载策略

1. Async 异步加载

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

执行特点： - 下载与HTML解析并行 - 下载完成后立即执行（可能中断HTML解析） - 适合独立第三方脚本（如Google Analytics）

2. Defer 延迟执行

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

执行流程： 1. 异步下载不阻塞HTML解析 2. 在DOMContentLoaded事件前按序执行 3. 适合有依赖关系的脚本

四、模块化方案

1. ES Modules（现代浏览器支持）

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

模块文件示例：

// module.js
import { utils } from './utils.js';
export default function() {...}

特性： - 支持import/export语法 - 自动启用严格模式 - 默认defer加载

2. 动态导入（Dynamic Import）

button.addEventListener('click', async () => {
  const module = await import('./dialog.js');
  module.open();
});

应用场景： - 按需加载 - 路由级代码分割

五、特殊场景处理

1. 文档写入（document.write）

document.write('<script src="legacy.js"><\/script>');

注意： - 已过时方法，会清空现有文档 - 仅限特殊遗留系统使用

2. 动态插入脚本

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

适用场景： - 条件加载 - A/B测试脚本注入

六、性能优化建议

预加载关键资源：

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

资源提示：

<link rel="preconnect" href="https://cdn.example.com">

代码分割：

// webpack配置
optimization: {
  splitChunks: {
    chunks: 'all'
  }
}

七、兼容性处理

1. 传统浏览器回退

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

2. 特性检测加载

if ('IntersectionObserver' in window) {
  import('./lazy-load.js');
} else {
  loadPolyfill();
}

总结对比表

方式	执行顺序	是否阻塞	适用场景
内联脚本	立即	是	小型代码片段
外部脚本	按序	是	常规脚本
async	无序	部分	独立第三方脚本
defer	DOM后顺序	否	有依赖的脚本
ES Module	默认defer	否	现代模块化开发

正确选择脚本引入方式可使页面加载速度提升30%以上。建议结合Web Vitals指标持续优化脚本加载策略。 “`

（全文约1050字）