HTML5 Webworkers - All One File

HTML5 Webworkers - All One File

本文关键字：One File All Webworkers HTML5      更新时间：2024-06-13

目前我有以下代码：

这在我的HTML文档中。

<script language="JavaScript" type="text/javascript" src="workerTest.js"></script>

现在，根据我的理解和研究，一个工作者必须来自外部文件。

所以在我的workerTest.js中我有

var iWorker = new Worker('workerTest.js');

我更愿意在workerTest.js中声明我的所有作品和代码，并能够从外部文件中创建它们。

所以类似的东西

var iWorker2 = new Worker('scripttagid');

显然，上面的代码是错误的，但我希望它能说明我的观点。

这可能吗？如果是的话，有人能为我指明正确的方向吗？可能是一些示例代码？

如果这是不可能的，最好的方法是避免大量的工作文件。因为会有很多作品。

嗯，有点像：

<!-- won't be executed by browser because of the invalid type -->
<script type="text/worker" id="worker-code">
while(true) {
}
</script>

Javascript：

var workerCode = document.getElementById("worker-code").innerHTML;
//Could also just be var workerCode = 'while(true){}';
var BlobBuilder = window.WebKitBlobBuilder || window.MozBlobBuilder || window.OBlobBuilder || window.BlobBuilder,
    blobBuilder = new BlobBuilder(),
    URL = window.webkitURL || window.URL,
    blob, workerURL;
blobBuilder.append(workerCode);
blob = blobBuilder.getBlob("text/javascript");
workerURL = URL.createObjectURL( blob );
var iWorker = new Worker(workerURL);

请注意，您也不需要该元素，只是将代码存储在像'while(true){}'这样的字符串中很难维护。

演示：http://jsfiddle.net/pmSSf/（处理器使用率会飙升，但您可以使用该页面，因为它不在UI线程中运行）

此外，从这些文档中，我发现您可以加载外部脚本，或者实现子worker或内联worker。

内联工作者使用Esailija描述的Blob构建器技术。

报价：

加载外部脚本

可以使用importScripts（）函数将外部脚本文件或库加载到辅助程序中。该方法采用零个或多个字符串来表示要导入的资源的文件名。

此示例将script1.js和script2.js加载到worker:

worker.js:

importScripts('script1.js');
importScripts('script2.js');

也可以写成单个导入语句：

importScripts('script1.js', 'script2.js');

子工人

工人有能力生育童工。这对于在运行时进一步分解大型任务非常有用。然而，subworker有一些注意事项：

子工作程序必须与父页面位于同一原点。子工作程序中的URI是相对于其父工作程序的位置（与主页面相反）进行解析的。请记住，大多数浏览器为每个工作进程生成单独的进程。在生成工人农场之前，要小心占用过多用户的系统资源。其中一个原因是在主页和工作程序之间传递的消息是复制的，而不是共享的。请参阅通过消息传递与工作人员通信。

有关如何生成子工作程序的示例，请参阅规范中的示例。

内联工人

如果您想动态创建辅助脚本，或者创建一个独立的页面而不必创建单独的辅助文件，该怎么办？使用新的BlobBuilder接口，您可以通过创建一个BlobBuilder并将工作程序代码附加为字符串，在与主逻辑相同的HTML文件中"内联"您的工作程序：

您可以使用我的小插件https://github.com/zevero/worker-create

var worker_url = Worker.create(function(e){
  self.postMessage('Example post from Worker'); //your code here
});
var worker = new Worker(worker_url);
相关文章：