私の知る限り、Webワーカーは別のJavaScriptファイルに記述し、次のように呼び出す必要があります。
new Worker('longrunning.js')
私はクロージャーコンパイラーを使用してすべてのJavaScriptソースコードを結合および縮小しているので、配布のためにワーカーを別々のファイルに入れる必要はありません。これを行う方法はありますか？
new Worker(function() {
//Long-running work here
});
ファーストクラスの関数がJavaScriptにとって非常に重要であることを考えると、バックグラウンド作業を行う標準的な方法で、Webサーバーから他のJavaScriptファイル全体をロードする必要があるのはなぜですか？
http://www.html5rocks.com/en/tutorials/workers/basics/#toc-inlineworkers
ワーカースクリプトをその場で作成したい場合、または個別のワーカーファイルを作成せずに自己完結型のページを作成したい場合はどうなりますか？Blob（）を使用すると、ワーカーコードへのURLハンドルを文字列として作成することにより、メインロジックと同じHTMLファイルにワーカーを「インライン化」できます。
<!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>WebワーカーコードをHTMLに埋め込むhtml5rocksソリューションはかなり恐ろしいものです。
そして、エスケープされたJavaScript-as-a-stringのブロブは、特にワークフローを複雑にするため、良くありません（Closureコンパイラーは文字列を操作できません）。
個人的には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 );
サポートは、これら3つのテーブルの共通部分です。
ただし、オプションの「name」パラメーターが一致する場合でも、URLは完全に一致する必要があるため、これはSharedWorkerでは機能しません。SharedWorkerの場合は、別のJavaScriptファイルが必要です。
今、この問題を解決するさらに強力な方法があります。ここでも、ワーカーコードを（静的文字列ではなく）関数として保存し、.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'}})
);
});
2つの可能なフォールバックがあります。上記のObjectURL、またはよりシームレスに、実際のJavaScriptファイルを/my_workers/worker1.jsに配置します
このアプローチの利点は次のとおりです。
実行コンテキストを認識し、親スクリプトとワーカーの両方として機能できる単一の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ます。
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：
上記のリンクは、私が作成した要点へのリンクです。他の誰かが後でそれを実際のリポジトリに変えました。
Webワーカーは、個々のプログラムとして完全に別個のコンテキストで動作します。
つまり、コードをオブジェクト形式で1つのコンテキストから別のコンテキストに移動することはできません。これは、他のコンテキストに属するクロージャを介してオブジェクトを参照できるためです。
ECMAScriptはシングルスレッド言語として設計されているため、これは特に重要です。Webワーカーは別々のスレッドで動作するため、スレッドセーフでない操作が実行されるリスクがあります。
これもまた、Webワーカーをソース形式のコードで初期化する必要があることを意味します。
WHATWGの仕様によると
結果の絶対URLの起点がエントリスクリプトの起点と同じでない場合は、SECURITY_ERR例外をスローします。
したがって、スクリプトは元のページと同じスキームの外部ファイルである必要があります。データ：URLまたはjavascript：URLからスクリプトを読み込むことはできず、https：ページはhttp：URLのスクリプトを使用してワーカーを起動できませんでした。
しかし残念ながら、ソースコードを含む文字列をコンストラクターに渡すことができなかった理由は実際には説明されていません。
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'))
インラインワーカーの読み方を改善します。
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");
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/
ユースケースに応じて、次のようなものを使用できます
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
});
Function#callAsWorkerthisArgと引数（のようにcall）を取り、promiseを返す単純な約束されたバージョン。
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);
});vkThreadプラグインを見てください。htisプラグインを使用すると、メインコード内の任意の関数を取得して、スレッド（Webワーカー）で実行できます。したがって、特別な「web-workerファイル」を作成する必要はありません。
http://www.eslinstructor.net/vkthread/
--Vadim
したがって、ES6のテンプレートリテラルのおかげで、これにはもう1つの優れたオプションがあると思います。これにより、余分なワーカー関数（およびその奇妙なスコープ）を省き、テキストの保存に使用していた場合と同じように、ワーカー向けのコードを複数行のテキストとして記述することができますが、実際にはドキュメントや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を実行して文字列に縮小するだけで、ワーカーに取り込むことができることに注意してください（関数宣言である限り機能するはずです）。次に、それをスクリプト文字列の前に追加します。そうすれば、作成しているコードのスコープにすでにバンドルされている可能性のあるスクリプトをインポートする必要がありません。
この特定のバージョンの唯一の本当の欠点は、リンターがサービスワーカーコードをリントできないことです（これは単なる文字列であるため）。これは、「個別のワーカー関数アプローチ」の利点です。
インラインWebworkerを使用して、同じjavascriptファイルでWebワーカーを使用できます。
以下の記事では、Webworkerとその制限、およびWebWorkerのデバッグを簡単に理解する方法について説明します。
これを行うためのより良い方法は、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");
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
ここコンソール：
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);
});
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
});
};
})();
私の小さなプラグインを使用してください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);
これは上記への単なる追加です-jsFiddleでWebワーカーをテストするための優れたテンプレートがあります。Blobではなく、jsFiddlesapiを使用します?js。
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);
}
})
私は、CodePenが現在構文を使用していないことを発見しました-そうでない（またはtype属性を持たない）インライン<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>私はこのようなコードを使用しています。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;
}はい、可能です。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 1000worker.jsファイルの内容をbackticks（複数行の文字列定数を許可）内に配置し、次のように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" })));
これは、何らかの理由でワーカー用に個別のスクリプトタグを設定したくない場合に便利です。
もう1つの解決策は、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.
ワーカーで関数を実行するためのワンライナー：
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);
};
いくつかの答えがありますが、ここに別のインラインバージョンがあります。
注：「self」引数はリンティングの目的で純粋に表面的なものであり、実際のワーカーコードは最初の中括弧の後に始まり、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>これは少し話題から外れた答えですが...ブラウザで長い仕事を処理するためにWebワーカーを使用する必要がない場合があります。
重いコンピューティングを数回実行したいとします（配列に対して実行する場合のように）：
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();
これで、コンピューターをフリーズさせることなく、重いコンピューティングを実行できます。