Question

目前我有以下代码：

这是在我的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');

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

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

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

Answer 1

嗯，有点：

<!-- 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线程中运行）

Answer 2

此外，从these docs开始，我发现您可以加载外部脚本，或实现子工作者或内联工作者。

内联工作者使用Esailija描述的BlobBuilder技术。

引用：

加载外部脚本

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

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

worker.js：

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

也可以将其写为单个导入语句：

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

子Worker

工人有能力产生童工。这非常适合在运行时进一步分解大型任务。然而，子工作者有一些警告：

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

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

在线工人

如果要动态创建工作脚本，或创建自包含页面而不必创建单独的工作文件，该怎么办？使用新的BlobBuilder接口，您可以通过创建BlobBuilder并将工作程序代码附加为字符串，将您的工作人员“内联”在与主逻辑相同的HTML文件中：

Answer 3

您可以使用我的小插件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);

HTML5 Webworkers - 所有文件

3 个答案: