据我所知，web worker需要写在一个单独的JavaScript文件中，并像这样调用:
new Worker('longrunning.js')
我正在使用闭包编译器来合并和缩小我所有的JavaScript源代码，我不希望将我的worker放在单独的文件中进行分发。有什么办法可以做到吗?
new Worker(function() {
//Long-running work here
});
既然一级函数对JavaScript如此重要，为什么标准的后台工作方式必须从web服务器加载整个其他JavaScript文件呢?
当前回答
我喜欢ifbamoq给出的答案，但由于堆栈溢出的积分政策，我无法评论。因此，我将给出一个示例，展示一些正在进行的密集工作——以及它如何不锁定主线程。
如果你像我一样双击html文件，把它们当成小程序，就不会遇到空原点的CORS问题。: -)
<!DOCTYPE html> <html> <head> <title>Worker example: One-core computation</title> </head> <body> <p>The highest prime number discovered so far is: <div id="result"></div></p> </body> <script> // let worker = new Worker('WebWorker.js'); // lets skip this to avoid null origin issues let WorkerFn = (event) => { let isPrime = false; for (let n = 2; n <= 1_000_000; n++) { isPrime = true; for(let i = 2; i <= Math.sqrt(n); i++) if (n % i == 0) isPrime = false; // If you can get thru all this shit and survive, ur prime! if (isPrime) postMessage(n); } } let worker = new Worker(window.URL.createObjectURL(new Blob(["(" + WorkerFn.toString() + ")()"], {type: "text/javascript"}))); worker.onmessage = (event) => { result.innerHTML = event.data; } </script> </html>
其他回答
这是一个有点离题的答案，但是……您可能不需要使用网络工作者来处理浏览器上的长时间工作。
让我们假设你想要运行几次繁重的计算(就像你对数组做的那样):
const heavyFct = () => {let i = 0; while(i<1e8) {++i}}
for (let i = 0; i < 100; ++i) {
heavyFct();
}
这将冻结您的浏览器。
为了避免这种情况，我们可以这样依赖setTimeout:
const desync = (i = 0) => {
if (i >= 100) {return}
heavyFct();
setTimeout(() => desync(i + 1), 0);
}
desync();
现在，您可以在不冻结计算机的情况下运行繁重的计算
将Adria的响应放在一个可复制粘贴的函数中，该函数适用于当前的Chrome和FF，但不适用于IE10 (worker from blob会导致安全错误)。
var newWorker = function (funcObj) {
// Build a worker from an anonymous function body
var blobURL = URL.createObjectURL(new Blob(
['(', funcObj.toString(), ')()'],
{type: 'application/javascript'}
));
var worker = new Worker(blobURL);
// Won't be needing this anymore
URL.revokeObjectURL(blobURL);
return worker;
}
下面是一个工作示例http://jsfiddle.net/ubershmekel/YYzvr/
网络工作者在完全独立的上下文中操作，就像单个程序一样。
这意味着代码不能以对象的形式从一个上下文中移动到另一个上下文中，因为它们可以通过属于另一个上下文中的闭包引用对象。 这一点尤其重要，因为ECMAScript被设计成一种单线程语言，并且由于web worker在单独的线程中操作，那么您将有执行非线程安全操作的风险。
这再次意味着web工作者需要用源代码形式的代码进行初始化。
WHATWG的规格说明说
如果原点的结果 绝对URL是不一样的 输入脚本的起源，然后抛出 SECURITY_ERR异常。 因此，脚本必须是外部文件 和原来一样的方案 页面:您无法从 data: URL或javascript: URL，和一个 页面无法启动工作 使用http: url脚本。
但不幸的是，它并没有真正解释为什么不允许将带有源代码的字符串传递给构造函数。
你可以把worker.js文件的内容放在反勾号(允许多行字符串常量)中，然后像这样创建一个blob:
var workerScript = `
self.onmessage = function(e) {
self.postMessage('message from worker');
};
// rest of worker code goes here
`;
var worker =
new Worker(createObjectURL(new Blob([workerScript], { type: "text/javascript" })));
如果出于某种原因，您不想为worker使用单独的脚本标记，那么这是非常方便的。
我发现CodePen目前不语法高亮内联<script>标签，不是type="text/javascript"(或没有类型属性)。
因此，我设计了一个类似但略有不同的解决方案，使用带break的标记块，这是摆脱<script>标记而不创建包装器函数(这是不必要的)的唯一方法。
<!DOCTYPE html> <script id="worker1"> worker: { // Labeled block wrapper if (typeof window === 'object') break worker; // Bail if we're not a Worker self.onmessage = function(e) { self.postMessage('msg from worker'); }; // Rest of your worker code goes here. } </script> <script> var blob = new Blob([ document.querySelector('#worker1').textContent ], { type: "text/javascript" }) // Note: window.webkitURL.createObjectURL() in Chrome 10+. var worker = new Worker(window.URL.createObjectURL(blob)); worker.onmessage = function(e) { console.log("Received: " + e.data); } worker.postMessage("hello"); // Start the worker. </script>
