JavaScript'te çoklu iş parçacığı ve Eşzamansız yapmanın farklı yolu
HTML5'ten önce JavaScript, sayfa başına yalnızca bir iş parçacığının yürütülmesine izin verdi.
Asenkron yürütme taklit etmek için bir hacky şekilde oldu Verim , setTimeout(), setInterval(), XMLHttpRequestveya olay işleyicileri ile (bir örnek için bu yazının sonuna bakınız verim vesetTimeout() ).
Ancak HTML5 ile artık çalışanların iş parçacıklarını işlevlerin yürütülmesini paralelleştirmek için kullanabiliriz. İşte bir kullanım örneği.
Gerçek çoklu iş parçacığı
Çoklu iş parçacığı oluşturma: JavaScript Çalışan Konuları
HTML5 Web Çalışan Konularını tanıttı (bkz: tarayıcı uyumlulukları )
Not: IE9 ve önceki sürümleri bunu desteklemez.
Bu çalışan iş parçacıkları, sayfanın performansını etkilemeden arka planda çalışan JavaScript iş parçacıklarıdır. Web Çalışanı hakkında daha fazla bilgi için belgeleri veya bu eğitimi okuyun .
MAX_VALUE değerine sayılan ve sayfamızdaki geçerli hesaplanan değeri gösteren 3 Web Çalışanı iş parçacığına ilişkin basit bir örnek:
//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>
Üç iş parçacığının eşzamanlı olarak yürütüldüğünü görebilir ve geçerli değerlerini sayfada yazdırabiliriz. Ayrılmış iş parçacıkları ile arka planda yürütüldükleri için sayfayı dondurmazlar.
Çoklu iş parçacığı: birden çok iframe ile
Bunu başarmanın başka bir yolu, birden fazla iframe kullanmaktır , her biri bir iş parçacığı yürütür. İframe'e URL ile bazı parametreler verebiliriz ve iframe sonucu almak ve geri yazdırmak için üst öğesiyle iletişim kurabilir ( iframe aynı etki alanında olmalıdır).
Bu örnek tüm tarayıcılarda çalışmaz! iframe'ler genellikle ana sayfa ile aynı iş parçacığında / işlemde çalışır (ancak Firefox ve Chromium farklı şekilde işliyor gibi görünüyor).
Kod pasajı birden fazla HTML dosyasını desteklemediğinden, burada sadece farklı kodlar sunacağım:
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);
}
})();
Çoklu iş parçacığını taklit et
Tek iş parçacığı: setTimeout () ile JavaScript eşzamanlılığını taklit edin
'Saf' yol, işlevi setTimeout()birbiri ardına şu şekilde yürütmek olacaktır :
setTimeout(function(){ /* Some tasks */ }, 0);
setTimeout(function(){ /* Some tasks */ }, 0);
[...]
Ancak bu yöntem çalışmaz, çünkü her görev birbiri ardına yürütülecektir.
İşlevi şu şekilde bu şekilde çağırarak eşzamansız yürütmeyi simüle edebiliriz:
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>
Gördüğünüz gibi, bu ikinci yöntem çok yavaş ve işlevleri yürütmek için ana iş parçacığı kullandığından tarayıcıyı donduruyor.
Tek iş parçacığı: JavaScript eşzamanlılığını getiri ile taklit etme
Verim , ECMAScript 6'daki yeni bir özelliktir, yalnızca Firefox ve Chrome'un en eski sürümünde çalışır (Chrome'da chrome: // flags / # enable-javascript-harmony'de görünen Deneysel JavaScript'i etkinleştirmeniz gerekir).
Verim anahtar sözcüğü, jeneratör işlevi yürütmesinin duraklamasına neden olur ve verim anahtar sözcüğünü izleyen ifadenin değeri, üretecin arayanına döndürülür. Dönüş anahtar kelimesinin jeneratör tabanlı bir sürümü olarak düşünülebilir.
Bir jeneratör, bir fonksiyonun yürütülmesini askıya almanıza ve daha sonra devam etmenize izin verir. Bir jeneratör, trambolin adı verilen bir teknikle işlevlerinizi programlamak için kullanılabilir .
İşte örnek:
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>