在 Webworker 中使用 AJAX 加载 javascript 资源答案

【问题标题】：Load javascript resources using AJAX in Webworker在 Webworker 中使用 AJAX 加载 javascript 资源
【发布时间】：2016-01-04 04:18:30
【问题描述】：

我正在为自己创建一个单页应用程序，这是一个小框架。我使用的是原生 Javascript，没有外部依赖，没有 jQuery，什么都没有。

这是我想做的：

在第一次访问页面后，我的框架只同步加载渲染当前页面所需的资源。之后，当当前页面的所有内容都加载完毕后，我创建了新的 Webworker。我希望他加载其他 .js 文件，代表网站上的其他页面。这些文件中的每一个都包含一个代表页面的对象——我希望这个对象在主线程中全局可用。在我的脑海中，webworker 应该开始通过 ajax 调用一个接一个地加载依赖项，并且每次他加载一些东西时，他应该通过 postmessage 通知主线程，并将文件发送到主线程（不确定是否将整个 ajax responseText 发送回主线程，或将其写入 sessionStorage - 即使在这个主题上，我也会欣赏建议）。

但是。这是一个问题。我需要执行这个文件——我希望我的对象对我的主线程全局可用。我知道我不能这样做：

function loadScript(url, callback)
{
    // Adding the script tag
    var head = document.getElementsByTagName('head')[0];
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = url;

    // Then bind the event to the callback function.
    // There are several events for cross browser compatibility.
    script.onreadystatechange = callback;
    script.onload = callback;

    // Fire the loading
    head.appendChild(script);
}

因为我无法从 webworker 线程访问 DOM。

所以问题是。有没有更好的解决方案，然后将 responseText 字符串发送回主线程，然后对其调用 eval() ？我听说 eval 是邪恶的、缓慢的和错误的。但我还有其他选择吗？

每一个建议，即使是那些会撕裂我的框架概念的建议都非常感谢。

这是我的 github 个人资料，但不要检查太多，它还远未完成，并且可能存在非常愚蠢的错误，并且文档是用我的母语编写的。 https://github.com/congrady/Bakalarka

【问题讨论】：

嗨。我认为你想做的事情根本没有用。您应该在主线程中异步加载所有依赖项。下载文件时，UI 线程不会被阻塞 - 仅在执行时。而且由于您无论如何都想执行它们，因此使用 web worker 不会有任何区别。

标签： javascript ajax resources load web-worker

【解决方案1】：

你的想法似乎完全可行——你可以从工作线程返回任何（嗯，几乎任何）数据到主线程，所以我会避免只返回字符串和eval-ing 的东西。当从工作线程接收数据时，主线程可以让它随心所欲地访问（包括向window 对象添加内容以使其全局可用）。

在 Web Worker 中进行 Ajax 调用有一些优势。例如，如果您希望返回较大的响应（即多 MB 的 JSON 或二进制图像数据），则主线程可能会在解释和解析响应时挂起。 Web Worker 可以异步处理此问题...我为 a BackboneJS plugin I developed 做过类似的事情，用于管理浏览器中的大规模数据集。

在 web worker 中，我建议找一个小的 Ajax 库来简化 Ajax 请求的管理。我最终使用了Nanoajax，并且对此非常满意。

请注意，如果从您的服务器返回的数据将包含函数以及数据，您将需要使用 eval'ed String 方法或类似方法。

【讨论】：