javascript - 没有单独的 Javascript 文件的网络工作者？

Question

据我所知，网络工作者需要写在一个单独的 JavaScript 文件中，并像这样调用：

new Worker('longrunning.js')

我正在使用闭包编译器来组合和缩小我所有的 JavaScript 源代码，我宁愿不必将我的工作人员放在单独的文件中进行分发。有没有办法做到这一点？

new Worker(function() {
    //Long-running work here
});

鉴于一流的函数对 JavaScript 至关重要，为什么执行后台工作的标准方法必须从 Web 服务器加载整个其他 JavaScript 文件？

score 268 · Accepted Answer

http://www.html5rocks.com/en/tutorials/workers/basics/#toc-inlineworkers

如果您想即时创建工作脚本，或者创建一个独立的页面而不需要创建单独的工作文件，该怎么办？使用 Blob()，您可以通过将工作程序代码的 URL 句柄创建为字符串，将工作程序“内联”到与主逻辑相同的 HTML 文件中

BLOB 内联工作者的完整示例：

<!DOCTYPE html>
<script id="worker1" type="javascript/worker">
  // This script won't be parsed by JS engines because its type is javascript/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>

score 184 · Accepted Answer

在 HTML 中嵌入 web worker 代码的 html5rocks 解决方案相当糟糕。
并且一团转义的 JavaScript-as-a-string 也好不到哪里去，尤其是因为它使工作流程复杂化（闭包编译器不能对字符串进行操作）。

就我个人而言，我真的很喜欢 toString 方法，但是@dan-man那个正则表达式！

我的首选方法：

// Build a worker from an anonymous function body
var blobURL = URL.createObjectURL( new Blob([ '(',

function(){
    //Long-running work here
}.toString(),

')()' ], { type: 'application/javascript' } ) ),

worker = new Worker( blobURL );

// Won't be needing this anymore
URL.revokeObjectURL( blobURL );

支持是这三个表的交集：

但是，这不适用于SharedWorker，因为 URL 必须完全匹配，即使可选的“名称”参数匹配。对于 SharedWorker，您需要一个单独的 JavaScript 文件。

2015 年更新 - ServiceWorker 奇点到来

现在有一种更强大的方法可以解决这个问题。同样，将工作代码存储为函数（而不是静态字符串）并使用 .toString() 进行转换，然后将代码插入到您选择的静态 URL 下的 CacheStorage 中。

// Post code from window to ServiceWorker...
navigator.serviceWorker.controller.postMessage(
 [ '/my_workers/worker1.js', '(' + workerFunction1.toString() + ')()' ]
);

// Insert via ServiceWorker.onmessage. Or directly once window.caches is exposed
caches.open( 'myCache' ).then( function( cache )
{
 cache.put( '/my_workers/worker1.js',
  new Response( workerScript, { headers: {'content-type':'application/javascript'}})
 );
});

有两种可能的退路。如上所述的 ObjectURL，或者更无缝地，将真正的JavaScript 文件放在 /my_workers/worker1.js

这种方法的优点是：

也可以支持 SharedWorkers。
选项卡可以在固定地址共享单个缓存副本。blob 方法为每个选项卡增加随机的 objectURL。

score 38 · Accepted Answer

您可以创建一个知道其执行上下文的 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计算用于准确计算脚本相对于父页面的路径，因为提供给的路径new Worker是相对于父页面，而不是脚本。

score 29 · Accepted Answer

使用该Blob方法，对于工人工厂来说如何：

var BuildWorker = function(foo){
   var str = foo.toString()
             .match(/^\s*function\s*\(\s*\)\s*\{(([\s\S](?!\}$))*[\s\S])/)[1];
   return  new Worker(window.URL.createObjectURL(
                      new Blob([str],{type:'text/javascript'})));
}

所以你可以像这样使用它......

var myWorker = BuildWorker(function(){
   //first line of worker
   self.onmessage(){....};
   //last line of worker
});

编辑：

我刚刚进一步扩展了这个想法，使跨线程通信更容易：bridged-worker.js。

编辑2：

上面的链接是我创建的一个要点。后来有人把它变成了一个真正的回购。

score 12 · Accepted Answer

Web 工作者作为单独的程序在完全独立的上下文中运行。

这意味着代码不能以对象形式从一个上下文移动到另一个上下文，因为它们将能够通过属于另一个上下文的闭包来引用对象。
这一点尤其重要，因为 ECMAScript 被设计为单线程语言，并且由于 Web Worker 在单独的线程中运行，因此您将面临执行非线程安全操作的风险。

这再次意味着网络工作者需要使用源代码形式的代码进行初始化。

WHATWG的规范说

如果生成的绝对 URL 的来源与入口脚本的来源不同，则抛出 SECURITY_ERR 异常。

因此，脚本必须是与原始页面具有相同方案的外部文件：您无法从 data: URL 或 javascript: URL 加载脚本，并且 https: 页面无法使用带有 http: URL 的脚本启动工作人员。

但不幸的是，它并没有真正解释为什么不能允许将带有源代码的字符串传递给构造函数。

score 9 · Accepted Answer

最近的答案（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'))

score 7 · Accepted Answer

对于内联工作人员来说是一种更好的阅读方式..

    var worker_fn = function(e) 
    {
        self.postMessage('msg from worker');            
    };

    var blob = new Blob(["onmessage ="+worker_fn.toString()], { type: "text/javascript" });

    var worker = new Worker(window.URL.createObjectURL(blob));
    worker.onmessage = function(e) 
    {
       alert(e.data);
    };
    worker.postMessage("start");

score 5 · Accepted Answer

将 Adria 的响应放入一个可复制粘贴的函数中，该函数适用于当前的 Chrome 和 FF，但不适用于 IE10（来自 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/

score 3 · Accepted Answer

根据您的用例，您可以使用类似的东西

task.js用于让 CPU 密集型代码在所有内核（node.js 和 web）上运行的简化接口

一个例子是

function blocking (exampleArgument) {
    // block thread
}

// turn blocking pure function into a worker task
const blockingAsync = task.wrap(blocking);

// run task on a autoscaling worker pool
blockingAsync('exampleArgumentValue').then(result => {
    // do something with result
});

score 3 · Accepted Answer

一个简单的承诺版本，Function#callAsWorker接受 thisArg 和参数（就像call），并返回一个承诺：

Function.prototype.callAsWorker = function (...args) {
    return new Promise( (resolve, reject) => {
        const code = `self.onmessage = e => self.postMessage((${this.toString()}).call(...e.data));`,
            blob = new Blob([code], { type: "text/javascript" }),
            worker = new Worker(window.URL.createObjectURL(blob));
        worker.onmessage = e => (resolve(e.data), worker.terminate());
        worker.onerror = e => (reject(e.message), worker.terminate());
        worker.postMessage(args);
    });
}

// Demo
function add(...nums) {
    return nums.reduce( (a,b) => a+b );
}
// Let the worker execute the above function, with the specified arguments
add.callAsWorker(null, 1, 2, 3).then(function (result) {
    console.log('result: ', result);
});

score 2 · Accepted Answer

看看 vkThread 插件。使用 htis 插件，您可以在主代码中使用任何函数并在线程（网络工作者）中执行它。因此，您无需创建特殊的“网络工作者文件”。

http://www.eslinstructor.net/vkthread/

——瓦迪姆

score 2 · Accepted Answer

所以我认为我们现在有了另一个很酷的选择，这要归功于 ES6 中的模板文字。这让我们可以省去额外的 worker 函数（及其奇怪的作用域），只需将用于 worker 的代码编写为多行文本，就像我们用来存储文本的情况一样，但实际上不需要文档或 DOM做到这一点。例如：

const workerScript = `
self.addEventListener('message', function(e) {
  var data = e.data;
  console.log('worker recieved: ',data);
  self.postMessage('worker added! :'+ addOne(data.value));
  self.close();//kills the worker
}, false);
`;

以下是该方法其余部分的要点。

请注意，我们可以将我们想要的任何额外函数依赖项拉入工作程序，只需将它们收集到一个数组中并在每个数组上运行 .toString 以将它们也减少为字符串（只要它们是函数声明就应该工作）和然后只需将其添加到脚本字符串中。这样我们就不必导入我们可能已经捆绑到我们正在编写的代码范围内的脚本。

这个特定版本唯一真正的缺点是 linters 无法对 service worker 代码进行 lint（因为它只是一个字符串），这对于“单独的 worker 函数方法”来说是一个优势。

score 1 · Accepted Answer

您可以使用内联网络工作人员在相同的 javascript 文件中使用网络工作人员。

下面的文章将帮助您轻松了解 webworkers 及其限制和 webworkers 的调试。

掌握网络工作者

score 1 · Accepted Answer

我认为更好的方法是使用 Blob 对象，您可以在下面看到一个简单的示例。

// create a Blob object with a worker code
var blob = new Blob(["onmessage = function(e) { postMessage('msg from worker'); }"]);

// Obtain a blob URL reference to our worker 'file'.
var blobURL = window.URL.createObjectURL(blob);

// create a Worker
var worker = new Worker(blobURL);
worker.onmessage = function(e) {
  console.log(e.data);
};
worker.postMessage("Send some Data");

score 1 · Accepted Answer

这里控制台：

var worker=new Worker(window.URL.createObjectURL(new Blob([function(){
  //Long-running work here
  postMessage('done');
}.toString().split('\n').slice(1,-1).join('\n')],{type:'text/javascript'})));

worker.addEventListener('message',function(event){
  console.log(event.data);
});

score 1 · Accepted Answer

尝试使用 jThread。https://github.com/cheprasov/jThread

// You can use simple calling like this
jThread(
    function(arr){
        //... some code for Worker
        return arr;
    }
    ,function(arr){
        //... done code
    }
)( [1,2,3,4,5,6,7] ); // some params

score 1 · Accepted Answer

https://developer.mozilla.org/es/docs/Web/Guide/Performance/Using_web_workers

    // Syntax: asyncEval(code[, listener])

var asyncEval = (function () {

  var aListeners = [], oParser = new Worker("data:text/javascript;charset=US-ASCII,onmessage%20%3D%20function%20%28oEvent%29%20%7B%0A%09postMessage%28%7B%0A%09%09%22id%22%3A%20oEvent.data.id%2C%0A%09%09%22evaluated%22%3A%20eval%28oEvent.data.code%29%0A%09%7D%29%3B%0A%7D");

  oParser.onmessage = function (oEvent) {
    if (aListeners[oEvent.data.id]) { aListeners[oEvent.data.id](oEvent.data.evaluated); }
    delete aListeners[oEvent.data.id];
  };


  return function (sCode, fListener) {
    aListeners.push(fListener || null);
    oParser.postMessage({
      "id": aListeners.length - 1,
      "code": sCode
    });
  };

})();

score 1 · Accepted Answer

这只是上面的补充——我有一个很好的模板，用于在 jsFiddle 中测试网络工作者。它使用 jsFiddles ?jsapi 而不是 Blob：

function workerFN() {
  self.onmessage = function(e) {
    switch(e.data.name) {
      case "" : 
      break;
      default:
        console.error("Unknown message:", e.data.name);
    }
  }
}
// This is a trick to generate real worker script that is loaded from server
var url = "/echo/js/?js="+encodeURIComponent("("+workerFN.toString()+")()");
var worker = new Worker(url);
worker.addEventListener("message", function(e) {
  switch(e.data.name) {
    case "" : 
    break;
    default:
      console.error("Unknown message:", e.data.name);
  }
})

普通网络工作者和共享工作者模板可用。

score 1 · Accepted Answer

我发现 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>

score 1 · Accepted Answer

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

var worker_url = Worker.createURL(function(e){
  self.postMessage('Example post from Worker'); //your code here
});
var worker = new Worker(worker_url);

score 0 · Accepted Answer

您可以将 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" })));

如果出于某种原因您不想为工作人员使用单独的脚本标签，这将很方便。

score 0 · Accepted Answer

是的，有可能，我使用 Blob 文件并传递回调

我将向您展示我编写的类的作用以及它如何在后台管理回调的执行。

GenericWebWorker首先，您使用要传递给将在中执行的回调的任何数据实例化Web Worker，其中包括您要使用的函数，在本例中为数字、日期和一个名为blocker

var worker = new GenericWebWorker(100, new Date(), blocker)

此阻塞函数将无限执行 n 毫秒

function blocker (ms) {
    var now = new Date().getTime();
    while(true) {
        if (new Date().getTime() > now +ms)
            return;
    }   
}

然后你像这样使用它

worker.exec((num, date, fnBlocker) => {
    /*Everithing here does not block the main thread
      and this callback has access to the number, date and the blocker */
    fnBlocker(10000) //All of this run in backgrownd
    return num*10

}).then(d => console.log(d)) //Print 1000

现在，是时候看看下面示例中的魔力了

/*https://github.com/fercarvo/GenericWebWorker*/
class GenericWebWorker {
    constructor(...ags) {
        this.args = ags.map(a => (typeof a == 'function') ? {type:'fn', fn:a.toString()} : a)
    }

    async exec(cb) {
        var wk_string = this.worker.toString();
        wk_string = wk_string.substring(wk_string.indexOf('{') + 1, wk_string.lastIndexOf('}'));            
        var wk_link = window.URL.createObjectURL( new Blob([ wk_string ]) );
        var wk = new Worker(wk_link);

        wk.postMessage({ callback: cb.toString(), args: this.args });
 
        var resultado = await new Promise((next, error) => {
            wk.onmessage = e => (e.data && e.data.error) ? error(e.data.error) : next(e.data);
            wk.onerror = e => error(e.message);
        })

        wk.terminate(); window.URL.revokeObjectURL(wk_link);
        return resultado
    }

    async parallel(arr, cb) {
        var res = [...arr].map(it => new GenericWebWorker(it, ...this.args).exec(cb))
        var all = await Promise.all(res)
        return all
    }

    worker() {
        onmessage = async function (e) {
            try {                
                var cb = new Function(`return ${e.data.callback}`)();
                var args = e.data.args.map(p => (p.type == 'fn') ? new Function(`return ${p.fn}`)() : p);

                try {
                    var result = await cb.apply(this, args); //If it is a promise or async function
                    return postMessage(result)

                } catch (e) { throw new Error(`CallbackError: ${e}`) }
            } catch (e) { postMessage({error: e.message}) }
        }
    }
}


function blocker (ms) {
    var now = new Date().getTime();
    while(true) {
        if (new Date().getTime() > now +ms)
            return;
    }   
}

setInterval(()=> console.log("Not blocked " + Math.random()), 1000)

console.log("\n\nstarting blocking code in Worker\n\n")

var worker = new GenericWebWorker(100, new Date(), blocker)

worker.exec((num, date, fnBlocker) => {
    fnBlocker(7000) //All of this run in backgrownd
    return num*10    
})
.then(d => console.log(`\n\nEnd of blocking code: result ${d}\n\n`)) //Print 1000

score 0 · Accepted Answer

在工人中运行功能的单线：

const FunctionalWorker = fn => new Worker(window.URL.createObjectURL(new Blob(["(" + fn.toString() + ")()"], {type: "text/javascript"})));

示例用法：

let fn = FunctionalWorker(() => {
    self.postMessage("hi");
});
fn.onmessage = msg => {
    console.log(msg);
};

score 0 · Accepted Answer

有一些答案，但这是另一个内联版本。

注意：“self”参数纯粹是为了 linting 的目的，实际的 worker 代码在第一个大括号之后开始，self 是正常的

inlineWorker (
   "hello world",// initial message to send to worker
   function(self){
// inline worker code.
  self.onmessage = function (e) {
  
    self.postMessage("thinking...");
     for (var i=0;i<100000000;i++) {
         var r = Math.random();
     }
     self.postMessage(e.data.toUpperCase());
  }

},function(e){
  // optional message handler
  document.getElementById("log").innerHTML= "from worker:"+e.data;
});



function inlineWorker (msg,fn,onMsg) {
    var 
    w=window,
    U=!!w.webkitURL?w.webkitURL:w.URL,
    src=fn.toString(),
    s=src.indexOf('{'),
    e=src.lastIndexOf('}'),
    worker = new Worker(U.createObjectURL(
        new Blob([ src.substring(s+1,e-1) ], { type: "text/javascript" })
    ));
    if (typeof onMsg==="function") {
        worker.addEventListener("message",onMsg);
    }
    if (msg) {
       worker.postMessage(msg); 
    }
    return worker;
}

<div id="log"></div>

score 0 · Accepted Answer

我使用这样的代码，您可以将 onmessage 定义为纯文本以外的函数，因此编辑器可以突出显示您的代码和 jshint 工作。

const worker = createWorker();

createWorker() {
    const scriptContent = getWorkerScript();
    const blob = new Blob([
        scriptContent,
    ], {
        type: "text/javascipt"
    });
    const worker = new Worker(window.URL.createObjectURL(blob));
    return worker;
}

getWorkerScript() {
    const script = {
        onmessage: function (e) {
            console.log(e);
            let result = "Hello " + e.data
            postMessage(result);
        }
    };
    let content = "";
    for (let prop in script){
        content += `${prop}=${script[prop].toString()}`;
    }
    return content;
}

score 0 · Accepted Answer

另一种解决方案是将 Worker 包装在一个函数中，然后创建一个调用该函数的 blob，如下所示：

     function workerCode() {
        self.onmessage = function (e) {
          console.log("Got message from parent", e.data);
        };
        setTimeout(() => {
          self.postMessage("Message From Worker");
        }, 2000);
      }

      let blob = new Blob([
        "(" + workerCode.toString() + ")()"
      ], {type: "text/javascript"});

      // Note: window.webkitURL.createObjectURL() in Chrome 10+.
      let worker = new Worker(window.URL.createObjectURL(blob));
      worker.onmessage = function (e) {
        console.log("Received: " + e.data);
      };
      worker.postMessage("hello"); // Start the worker.

score -2 · Accepted Answer

这是一个有点离题的答案，但是......您可能不需要使用网络工作者来处理浏览器上的长时间工作。

假设您想运行几次繁重的计算（就像您在数组上做的那样）：

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();

现在您可以在不冻结计算机的情况下运行繁重的计算

javascript - 没有单独的 Javascript 文件的网络工作者？

27 回答 27

BLOB 内联工作者的完整示例：

2015 年更新 - ServiceWorker 奇点到来

最近的答案（2018）

Related

Reference