JavaScript作为前端开发的核心语言，脚本的加载与调用是构建交互式网页的基础，无论是引入第三方库、执行业务逻辑，还是实现动态功能，掌握脚本调用的多种方法至关重要，本文将系统介绍JavaScript调用脚本的常见方式，从静态加载到动态执行，从模块化方案到性能优化,帮助开发者根据实际场景选择合适的方法。
静态脚本加载：HTML中的直接引入
静态加载是最基础的脚本调用方式，通过HTML的<script>标签直接引入外部脚本文件或内联脚本，这种方式简单直观，适合加载核心依赖库或初始化脚本。
<script>标签有两个核心属性控制加载行为：async和defer，默认情况下，脚本会同步加载（无async或defer），浏览器会暂停HTML解析，立即下载并执行脚本，这可能导致页面渲染阻塞，因此建议将<script>标签放在</body>前，减少对页面加载的影响。
若使用async属性，脚本会异步下载，但下载完成后会暂停HTML解析立即执行，多个async脚本的执行顺序与下载顺序无关，适合独立、不依赖其他脚本的模块（如广告、统计代码），而defer属性则让脚本异步下载，且在HTML解析完成后、DOMContentLoaded事件前按顺序执行，适合需要按依赖关系加载的脚本（如jQuery、React等框架）。
示例：
<!-- 同步加载，放在body底部 --> <script src="core.js"></script> <!-- 异步加载，执行顺序不确定 --> <script async src="analytics.js"></script> <!-- 延迟异步加载，按顺序执行 --> <script defer src="library1.js"></script> <script defer src="library2.js"></script>
动态脚本加载：运行时按需加载
静态加载会在页面初始加载时就引入所有脚本，而动态加载允许在JavaScript运行时根据需求创建并加载脚本，适合按需加载功能模块、减少初始加载体积。
动态加载的核心是通过document.createElement('script')创建脚本节点，设置src属性后添加到DOM中，可以通过监听onload（加载成功）和onerror（加载失败）事件处理执行结果。
示例：
function loadScript(src, callback) {
const script = document.createElement('script');
script.src = src;
script.onload = () => callback(null, script);
script.onerror = () => callback(new Error(`Script load failed: ${src}`));
document.head.appendChild(script);
}
// 使用：点击按钮后加载工具脚本
document.getElementById('loadTool').addEventListener('click', () => {
loadScript('tool.js', (error) => {
if (error) console.error(error);
else console.log('Tool script loaded');
});
});
动态加载的典型场景包括懒加载非首屏功能、按需加载第三方组件（如地图库、图表库）等，能有效提升页面初始加载性能，需要注意的是，动态加载的脚本默认不会阻塞HTML解析，但执行时机取决于添加到DOM的时间。
模块化脚本调用：现代开发的标准方案
随着前端项目复杂度提升，模块化开发成为主流，JavaScript原生支持ES Modules（ESM），通过import和export语法实现模块间的依赖管理，解决了全局变量污染和脚本执行顺序混乱的问题。
ES Modules的import语句是静态的，必须在顶层作用域使用，编译阶段就会确定依赖关系，浏览器会自动处理模块加载，确保依赖模块先于当前模块执行，且模块作用域隔离，避免变量冲突。
示例：
// math.js（导出模块）
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;
// app.js（导入模块）
import { add, subtract } from './math.js';
console.log(add(1, 2)); // 3
console.log(subtract(3, 1)); // 2
对于需要动态加载模块的场景（如按需加载路由组件），可以使用import()函数，它返回一个Promise，支持在运行时动态导入模块：
button.addEventListener('click', async () => {
try {
const module = await import('./heavyModule.js');
module.doSomething();
} catch (error) {
console.error('Module load failed:', error);
}
});
在Node.js环境中，CommonJS模块系统（require/module.exports）仍被广泛使用，但ES Modules已成为未来趋势，浏览器和Node.js均逐步完善对ESM的支持。
错误处理与性能优化
脚本调用过程中，错误处理和性能优化不可忽视，静态加载可通过<script>标签的onerror事件捕获加载失败：
<script src="error-prone.js" onerror="console.error('Script failed to load')"></script>
动态加载和模块化加载则更适合结合Promise或async/await处理错误，如前文动态加载示例中的try-catch块。
性能优化方面，可采取以下策略：
- 预加载关键资源：使用
<link rel="preload">预加载关键脚本，减少下载等待时间：<link rel="preload" href="critical.js" as="script">
- 合并非关键脚本：通过构建工具（如Webpack、Vite）将多个小脚本合并，减少HTTP请求次数。
- CDN加速：将脚本托管到CDN，利用边缘节点缓存提升加载速度。
- 避免阻塞渲染：非关键脚本尽量使用
async或defer，或通过动态加载在页面空闲时执行（如requestIdleCallback）。
实际应用场景
不同的脚本调用方式适用于不同场景：静态加载适合首屏核心脚本（如框架入口文件），动态加载适合按需加载的功能模块（如弹窗组件、工具库），模块化调用则适合大型项目，通过依赖管理提升代码可维护性，电商网站可在用户点击“购物车”时动态加载购物车模块，而不是在初始加载时就引入；而SPA（单页应用）则通常通过ES Modules管理组件和路由，实现按需加载和代码分割。
JavaScript调用脚本的方法多样，从静态加载的简单直接，到动态加载的灵活按需，再到模块化系统的规范管理，开发者需根据项目需求、性能要求和团队协作模式选择合适的方式，理解各种加载机制的特点、执行顺序及错误处理方法，是构建高性能、可维护前端应用的基础，随着前端技术的发展，模块化和按需加载已成为主流，合理运用脚本调用策略,能显著优化用户体验和开发效率。