在 javascript web worker 中加载外部脚本，最标准且推荐的做法是使用 importscripts() 函数。该函数会同步阻塞当前 worker 线程，直到所有指定的脚本文件下载并执行完毕，随后代码才能继续向下运行。你可以传入一个或多个脚本的 url，它们会在当前作用域内按顺序执行，从而共享全局变量和函数。
importScripts() 如何处理多个脚本依赖
当需要加载多个脚本时，importScripts() 支持接收多个参数，它会按照参数传入的顺序依次下载和执行这些脚本。这意味着如果脚本 A 定义了脚本 B 所依赖的全局函数，你必须确保 A 排在 B 之前。这种机制保证了依赖关系的正确性，同时也意味着在执行完所有脚本前，Worker 的主逻辑会被挂起，因此不适合用于加载大量或体积巨大的资源，以免阻塞消息处理。
importScripts('utils.js', 'core.js');
// 此时 utils.js 和 core.js 中的全局函数已可用
console.log(utils.formatDate(new Date()));
worker.onmessage = function(e) {
console.log(core.process(e.data));
};
使用动态导入 import() 实现非阻塞加载
如果你不希望阻塞 Worker 的执行流程，或者需要在运行时根据条件动态加载脚本，可以使用 ES Module 风格的 import() 函数。这在较新的浏览器环境中是可行的，它返回一个 Promise，允许你在脚本加载完成后异步访问其导出的成员。这种方式不会阻塞 Worker 的消息循环，适合处理大型库或按需加载的场景，但需要注意模块导出的是命名导出而非直接污染全局作用域。
立即学习“Java免费学习笔记（深入）”；
// 假设 worker.js 中使用 import()
import('./module.js').then(module => {
// 访问模块导出的函数
const result = module.helper();
postMessage(result);
}).catch(err => {
console.error('Failed to load module:', err);
});
// 同时 Worker 可以继续处理其他消息
self.onmessage = function(e) {
if (e.data === 'ping') {
postMessage('pong');
}
};
如何验证脚本是否成功加载并执行
在使用 importScripts() 时，如果指定的脚本文件不存在或发生网络错误，浏览器会抛出 NETWORK_ERROR 异常，导致后续代码无法执行。为了验证加载状态，可以将调用包裹在 try...catch 块中，捕获异常并进行日志记录或降级处理。对于 import() 方式，则通过 Promise 的 catch 方法来处理加载失败的情况。此外，可以通过在全局作用域定义一个标记变量，在脚本加载后设置该变量，主逻辑中检查该变量是否存在来确认加载完成。
