Verschiedene Möglichkeiten, Multithreading und Asynchron in JavaScript durchzuführen
Vor HTML5 erlaubte JavaScript nur die Ausführung eines Threads pro Seite.
Es gab einig hacky Weg , um eine asynchrone Ausführung mit simulieren Yield , setTimeout(), setInterval(), XMLHttpRequestoder Event - Handler (siehe Ende dieses Beitrags für ein Beispiel mit Ertrag und setTimeout()).
Mit HTML5 können wir jetzt Worker-Threads verwenden, um die Ausführung von Funktionen zu parallelisieren. Hier ist ein Anwendungsbeispiel.
Echtes Multithreading
Multithreading: JavaScript Worker-Threads
HTML5 führte Web Worker-Threads ein (siehe: Browserkompatibilität )
Hinweis: IE9 und frühere Versionen unterstützen dies nicht.
Diese Arbeitsthreads sind JavaScript-Threads, die im Hintergrund ausgeführt werden, ohne die Leistung der Seite zu beeinträchtigen. Weitere Informationen zu Web Worker finden Sie in der Dokumentation oder in diesem Lernprogramm .
Hier ist ein einfaches Beispiel mit 3 Web Worker-Threads, die bis MAX_VALUE zählen und den aktuell berechneten Wert auf unserer Seite anzeigen:
//As a worker normally take another JavaScript file to execute we convert the function in an URL: http://stackoverflow.com/a/16799132/2576706
function getScriptPath(foo){ return window.URL.createObjectURL(new Blob([foo.toString().match(/^\s*function\s*\(\s*\)\s*\{(([\s\S](?!\}$))*[\s\S])/)[1]],{type:'text/javascript'})); }
var MAX_VALUE = 10000;
/*
* Here are the workers
*/
//Worker 1
var worker1 = new Worker(getScriptPath(function(){
self.addEventListener('message', function(e) {
var value = 0;
while(value <= e.data){
self.postMessage(value);
value++;
}
}, false);
}));
//We add a listener to the worker to get the response and show it in the page
worker1.addEventListener('message', function(e) {
document.getElementById("result1").innerHTML = e.data;
}, false);
//Worker 2
var worker2 = new Worker(getScriptPath(function(){
self.addEventListener('message', function(e) {
var value = 0;
while(value <= e.data){
self.postMessage(value);
value++;
}
}, false);
}));
worker2.addEventListener('message', function(e) {
document.getElementById("result2").innerHTML = e.data;
}, false);
//Worker 3
var worker3 = new Worker(getScriptPath(function(){
self.addEventListener('message', function(e) {
var value = 0;
while(value <= e.data){
self.postMessage(value);
value++;
}
}, false);
}));
worker3.addEventListener('message', function(e) {
document.getElementById("result3").innerHTML = e.data;
}, false);
// Start and send data to our worker.
worker1.postMessage(MAX_VALUE);
worker2.postMessage(MAX_VALUE);
worker3.postMessage(MAX_VALUE);
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
Wir können sehen, dass die drei Threads gleichzeitig ausgeführt werden und ihren aktuellen Wert auf der Seite drucken. Sie frieren die Seite nicht ein, da sie im Hintergrund mit getrennten Threads ausgeführt werden.
Multithreading: mit mehreren Iframes
Eine andere Möglichkeit, dies zu erreichen, besteht darin, mehrere Iframes zu verwenden , von denen jeder einen Thread ausführt. Wir können dem Iframe einige Parameter über die URL geben und der Iframe kann mit seinem Elternteil kommunizieren, um das Ergebnis zu erhalten und es zurückzudrucken (der Iframe muss sich in derselben Domäne befinden).
Dieses Beispiel funktioniert nicht in allen Browsern! iframes werden normalerweise im selben Thread / Prozess wie die Hauptseite ausgeführt (Firefox und Chromium scheinen jedoch unterschiedlich damit umzugehen ).
Da das Code-Snippet nicht mehrere HTML-Dateien unterstützt, werde ich hier nur die verschiedenen Codes bereitstellen:
index.html:
//The 3 iframes containing the code (take the thread id in param)
<iframe id="threadFrame1" src="thread.html?id=1"></iframe>
<iframe id="threadFrame2" src="thread.html?id=2"></iframe>
<iframe id="threadFrame3" src="thread.html?id=3"></iframe>
//Divs that shows the result
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
<script>
//This function is called by each iframe
function threadResult(threadId, result) {
document.getElementById("result" + threadId).innerHTML = result;
}
</script>
thread.html:
//Get the parameters in the URL: http://stackoverflow.com/a/1099670/2576706
function getQueryParams(paramName) {
var qs = document.location.search.split('+').join(' ');
var params = {}, tokens, re = /[?&]?([^=]+)=([^&]*)/g;
while (tokens = re.exec(qs)) {
params[decodeURIComponent(tokens[1])] = decodeURIComponent(tokens[2]);
}
return params[paramName];
}
//The thread code (get the id from the URL, we can pass other parameters as needed)
var MAX_VALUE = 100000;
(function thread() {
var threadId = getQueryParams('id');
for(var i=0; i<MAX_VALUE; i++){
parent.threadResult(threadId, i);
}
})();
Multithreading simulieren
Single-Thread: Emulieren Sie die JavaScript-Parallelität mit setTimeout ()
Der "naive" Weg wäre, die Funktion setTimeout()nacheinander wie folgt auszuführen :
setTimeout(function(){ /* Some tasks */ }, 0);
setTimeout(function(){ /* Some tasks */ }, 0);
[...]
Diese Methode funktioniert jedoch nicht, da jede Aufgabe nacheinander ausgeführt wird.
Wir können die asynchrone Ausführung simulieren, indem wir die Funktion rekursiv wie folgt aufrufen:
var MAX_VALUE = 10000;
function thread1(value, maxValue){
var me = this;
document.getElementById("result1").innerHTML = value;
value++;
//Continue execution
if(value<=maxValue)
setTimeout(function () { me.thread1(value, maxValue); }, 0);
}
function thread2(value, maxValue){
var me = this;
document.getElementById("result2").innerHTML = value;
value++;
if(value<=maxValue)
setTimeout(function () { me.thread2(value, maxValue); }, 0);
}
function thread3(value, maxValue){
var me = this;
document.getElementById("result3").innerHTML = value;
value++;
if(value<=maxValue)
setTimeout(function () { me.thread3(value, maxValue); }, 0);
}
thread1(0, MAX_VALUE);
thread2(0, MAX_VALUE);
thread3(0, MAX_VALUE);
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>
Wie Sie sehen können, ist diese zweite Methode sehr langsam und friert den Browser ein, da der Hauptthread zum Ausführen der Funktionen verwendet wird.
Single-Thread: Emulieren Sie die JavaScript-Parallelität mit Yield
Die Ausbeute ist ein neues Feature in ECMAScript 6 , es funktioniert nur auf der ältesten Version von Firefox und Chrome (in Chrome müssen Sie aktivieren Experimental JavaScript erscheint in chrome: // flags / # enable-Javascript-Harmonie ).
Das Yield-Schlüsselwort bewirkt, dass die Ausführung der Generatorfunktion angehalten wird und der Wert des Ausdrucks nach dem Yield-Schlüsselwort an den Aufrufer des Generators zurückgegeben wird. Es kann als generatorbasierte Version des Schlüsselworts return betrachtet werden.
Mit einem Generator können Sie die Ausführung einer Funktion unterbrechen und später fortsetzen. Ein Generator kann verwendet werden, um Ihre Funktionen mit einer Technik namens Trampolin zu planen .
Hier ist das Beispiel:
var MAX_VALUE = 10000;
Scheduler = {
_tasks: [],
add: function(func){
this._tasks.push(func);
},
start: function(){
var tasks = this._tasks;
var length = tasks.length;
while(length>0){
for(var i=0; i<length; i++){
var res = tasks[i].next();
if(res.done){
tasks.splice(i, 1);
length--;
i--;
}
}
}
}
}
function* updateUI(threadID, maxValue) {
var value = 0;
while(value<=maxValue){
yield document.getElementById("result" + threadID).innerHTML = value;
value++;
}
}
Scheduler.add(updateUI(1, MAX_VALUE));
Scheduler.add(updateUI(2, MAX_VALUE));
Scheduler.add(updateUI(3, MAX_VALUE));
Scheduler.start()
<div id="result1"></div>
<div id="result2"></div>
<div id="result3"></div>