AI Model in Browser
在浏览器中添加一个AI模型很有趣，因为它可以在无需安装的情况下使用。然而，众所周知，浏览器不擅长处理高性能任务。换句话说，我们无法像处理其他普通的JavaScript任务一样处理AI模型。在本文中，我将分享一些嵌入浏览器中的AI模型的经验。
在主线程中运行AI模型可能会阻塞UI渲染，因为通常需要很长时间才能完成。因此，需要在另一个线程中运行它们。然而，在浏览器中运行多线程不像在其他运行时中（如JVM或Golang）那么容易。为了实现这一点，我们需要使用Web Workers并遵循某些规则。
在阅读以下内容之前，建议先熟悉Worker。
使用Worker时需要解决几个问题：
-
调用
-
导入依赖
-
内存性能
调用
调用worker与调用函数不同。首先，您需要编写一个worker脚本，因为您需要使用相对路径实例化一个新的worker。然而，这可能很具有挑战性，特别是当导入前端框架如Vue或React时，因为这些框架需要在部署之前进行捆绑。Worker构造函数隐式地要求整个worker脚本在捆绑中保留。此外，它建议您不能直接在worker脚本中使用TypeScript，因为它需要一个JS文件。
导入依赖项
工作脚本有一个导入依赖项的规则。使用importscriptsAPI来实现。
WorkerGlobalScope: importScripts() method - Web APIs | MDN
换句话说，ES6模块或CommonJS在这里不起作用。打包存在困难，因为我们只能使用相对路径导入依赖项，在开发和生产环境中都不稳定，因为这是打包的结果。幸运的是，importScripts没有CORS限制，这意味着可以通过CDN在工作者脚本中导入依赖项。
内存性能
Worker中的任务通常需要大量资源才能运行，否则就不需要Worker。关闭或终止工作进程在不再需要时非常重要。建议在开发工具中使用内存快照功能来检查运行时的内存状态并避免内存泄漏。
