Inny sposób wykonywania wielowątkowości i asynchroniczności w JavaScript
Przed HTML5 JavaScript umożliwiał wykonanie tylko jednego wątku na stronę.
Było kilka hacky sposobem symulowania asynchronicznego wykonania z Wydajność , setTimeout(), setInterval(), XMLHttpRequestlub obsługi zdarzeń (patrz końca tego słupka na przykład z wydajnością i setTimeout()).
Ale dzięki HTML5 możemy teraz używać wątków roboczych do równoległego wykonywania funkcji. Oto przykład użycia.
Prawdziwa wielowątkowość
Wielowątkowość: wątki robocze JavaScript
HTML5 wprowadził wątki Web Worker (patrz: kompatybilność przeglądarek )
Uwaga: IE9 i wcześniejsze wersje go nie obsługują.
Te wątki robocze to wątki JavaScript, które działają w tle bez wpływu na wydajność strony. Aby uzyskać więcej informacji o programie Web Worker, przeczytaj dokumentację lub ten samouczek .
Oto prosty przykład z 3 wątkami Web Worker, które liczą się do MAX_VALUE i pokazują bieżącą obliczoną wartość na naszej stronie:
//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>
Widzimy, że trzy wątki są wykonywane współbieżnie i wypisują ich aktualną wartość na stronie. Nie zamrażają strony, ponieważ są wykonywane w tle z oddzielnymi wątkami.
Wielowątkowość: z wieloma ramkami iframe
Innym sposobem osiągnięcia tego jest użycie wielu ramek iframe , z których każdy wykona wątek. Możemy podać elementowi iframe kilka parametrów poprzez adres URL, a element iframe może komunikować się z jego rodzicem w celu uzyskania wyniku i wydrukowania go z powrotem (element iframe musi znajdować się w tej samej domenie).
Ten przykład nie działa we wszystkich przeglądarkach! iframe zwykle działają w tym samym wątku / procesie co strona główna (ale Firefox i Chromium wydają się traktować to inaczej).
Ponieważ fragment kodu nie obsługuje wielu plików HTML, podam tutaj tylko różne kody:
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);
}
})();
Symuluj wielowątkowość
Jednowątkowy: emuluj współbieżność JavaScript z setTimeout ()
Naiwnym sposobem byłoby wykonywanie funkcji setTimeout()jedna po drugiej w ten sposób:
setTimeout(function(){ /* Some tasks */ }, 0);
setTimeout(function(){ /* Some tasks */ }, 0);
[...]
Ale ta metoda nie działa, ponieważ każde zadanie będzie wykonywane jedno po drugim.
Możemy zasymulować wykonanie asynchroniczne, wywołując funkcję rekurencyjnie w następujący sposób:
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>
Jak widać ta druga metoda jest bardzo powolna i zawiesza przeglądarkę, ponieważ wykorzystuje główny wątek do wykonywania funkcji.
Jednowątkowy: emuluj współbieżność JavaScript z wydajnością
Yield to nowa funkcja w ECMAScript 6 , działa tylko na najstarszej wersji Firefoksa i Chrome (w Chrome musisz włączyć Eksperymentalny JavaScript pojawiający się w chrome: // flags / # enable-javascript-harmony ).
Słowo kluczowe yield powoduje wstrzymanie wykonywania funkcji generatora, a wartość wyrażenia następującego po słowie kluczowym yield jest zwracana do obiektu wywołującego generator. Można to traktować jako wersję słowa kluczowego return opartą na generatorze.
Generator umożliwia wstrzymanie wykonywania funkcji i wznowienie jej później. Generator może służyć do planowania funkcji za pomocą techniki zwanej trampolinem .
Oto przykład:
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>