据我所知，web worker需要写在一个单独的JavaScript文件中，并像这样调用:
new Worker('longrunning.js')
我正在使用闭包编译器来合并和缩小我所有的JavaScript源代码，我不希望将我的worker放在单独的文件中进行分发。有什么办法可以做到吗?
new Worker(function() {
//Long-running work here
});
既然一级函数对JavaScript如此重要，为什么标准的后台工作方式必须从web服务器加载整个其他JavaScript文件呢?
当前回答
@Trincot's似乎是目前为止最好的。然而，也许我们可以进一步发展它。所以我的想法是，
我们不要修改Function.prototype。 为线程操作获取函数的承诺/线程化版本。 如果需要，请确保仍然可以同步调用该函数。
因此，我们用spawn方法定义了Threadable类。一旦我们将函数设为该类的成员，那么它就是可线程的:)
class Threadable extends Function { constructor(f){ super("...as",`return ${f.toString()}.apply(this,as)`); } spawn(...as){ var code = `self.onmessage = m => self.postMessage((${this.toString()}).apply(self,m.data));`, blob = new Blob([code], {type: "text/javascript"}), wrkr = new Worker(window.URL.createObjectURL(blob)); return new Promise( (v,x) => ( wrkr.onmessage = m => (v(m.data), wrkr.terminate()) , wrkr.onerror = e => (x(e.message), wrkr.terminate()) , wrkr.postMessage(as) ) ); } } function add(...nums) { return nums.reduce((a,b) => a+b); } var addT = new Threadable(add); addT.spawn(1,2,3,4) .then(m => console.log(`Promisified thread returned ${m}`)); console.log(`Synchronous invocation of addT returned ${addT(1,2,3,4)}`);
其他回答
您可以创建一个JavaScript文件，该文件可以感知其执行上下文，并且可以充当父脚本和工作脚本。让我们从这样一个文件的基本结构开始:
(function(global) {
var is_worker = !this.document;
var script_path = is_worker ? null : (function() {
// append random number and time to ID
var id = (Math.random()+''+(+new Date)).substring(2);
document.write('<script id="wts' + id + '"></script>');
return document.getElementById('wts' + id).
previousSibling.src;
})();
function msg_parent(e) {
// event handler for parent -> worker messages
}
function msg_worker(e) {
// event handler for worker -> parent messages
}
function new_worker() {
var w = new Worker(script_path);
w.addEventListener('message', msg_worker, false);
return w;
}
if (is_worker)
global.addEventListener('message', msg_parent, false);
// put the rest of your library here
// to spawn a worker, use new_worker()
})(this);
如您所见，脚本包含父进程和工作者进程的所有代码，检查它自己的实例是否是一个具有!document的工作者进程。有点笨拙的script_path计算用于精确计算相对于父页的脚本路径，因为提供给新Worker的路径是相对于父页的，而不是相对于脚本的。
这是一个有点离题的答案，但是……您可能不需要使用网络工作者来处理浏览器上的长时间工作。
让我们假设你想要运行几次繁重的计算(就像你对数组做的那样):
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();
现在，您可以在不冻结计算机的情况下运行繁重的计算
网络工作者在完全独立的上下文中操作，就像单个程序一样。
这意味着代码不能以对象的形式从一个上下文中移动到另一个上下文中，因为它们可以通过属于另一个上下文中的闭包引用对象。 这一点尤其重要，因为ECMAScript被设计成一种单线程语言，并且由于web worker在单独的线程中操作，那么您将有执行非线程安全操作的风险。
这再次意味着web工作者需要用源代码形式的代码进行初始化。
WHATWG的规格说明说
如果原点的结果 绝对URL是不一样的 输入脚本的起源，然后抛出 SECURITY_ERR异常。 因此，脚本必须是外部文件 和原来一样的方案 页面:您无法从 data: URL或javascript: URL，和一个 页面无法启动工作 使用http: url脚本。
但不幸的是，它并没有真正解释为什么不允许将带有源代码的字符串传递给构造函数。
我喜欢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>
近期答案(2018)
你可以使用Greenlet:
移动一个异步函数到它自己的线程中。Workerize的简化单功能版本。
例子:
import greenlet from 'greenlet'
const getName = greenlet(async username => {
const url = `https://api.github.com/users/${username}`
const res = await fetch(url)
const profile = await res.json()
return profile.name
})
console.log(await getName('developit'))
