Різний спосіб зробити багатопотокове та асинхронне в JavaScript
До HTML5 JavaScript дозволяв виконувати лише один потік на сторінці.
Був деякий Hacky спосіб імітації асинхронного виконання з Вихід , setTimeout(), setInterval(), XMLHttpRequestабо обробники подій (див в кінці цього поста для прикладу з виходом і setTimeout()).
Але за допомогою HTML5 ми тепер можемо використовувати Worker Threads для паралельного виконання функцій. Ось приклад використання.
Справжня мультиварка
Багатопотокові: Робочі нитки JavaScript
HTML5 представив нитки веб-робочих (див. Сумісність браузерів )
Примітка: IE9 та більш ранні версії не підтримують його.
Ці робочі потоки - це потоки JavaScript, які працюють у фоновому режимі, не впливаючи на продуктивність сторінки. Для отримання додаткової інформації про веб-працівника прочитайте документацію або цей підручник .
Ось простий приклад з 3-ма потоками Web Worker, які нараховуються до MAX_VALUE і показують поточне обчислене значення на нашій сторінці:
//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>
Ми бачимо, що три потоки виконуються паралельно і друкують їх поточне значення на сторінці. Вони не заморожують сторінку, оскільки вони виконані у фоновому режимі з окремими потоками.
Багатопотоковість: з декількома рамками
Ще один спосіб досягти цього - використовувати кілька кадрів iframes , кожен з яких виконує потік. Ми можемо надати iframe деякі параметри за URL-адресою, і iframe може спілкуватися з його батьків, щоб отримати результат і надрукувати його назад ( iframe має бути в одному домені).
Цей приклад працює не у всіх браузерах! iframes зазвичай виконуються в тому ж потоці / процесі, що і на головній сторінці (але, здається, Firefox та Chromium по-різному обробляють це).
Оскільки фрагмент коду не підтримує декілька файлів HTML, я просто надаю тут різні коди:
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);
}
})();
Моделюйте багатопотоковість
Один потік: емуляція паралельності JavaScript з setTimeout ()
"Наївним" способом було б виконання функції setTimeout()одна за одною так:
setTimeout(function(){ /* Some tasks */ }, 0);
setTimeout(function(){ /* Some tasks */ }, 0);
[...]
Але цей метод не працює, оскільки кожне завдання буде виконуватися одна за одною.
Ми можемо імітувати асинхронне виконання, викликаючи функцію рекурсивно так:
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>
Як ви бачите, цей другий метод дуже повільний і заморожує браузер, оскільки він використовує основний потік для виконання функцій.
Один потік: імітуйте паралельність JavaScript з дохідністю
Вихід - це нова функція в ECMAScript 6 , вона працює лише в найстарішій версії Firefox та Chrome (у Chrome потрібно включити Експериментальний JavaScript, який відображається в хромі: // прапори / # enable-javascript-гармонія ).
Ключове слово урожай викликає призупинення виконання функції генератора, а значення виразу після ключового слова дохідності повертається на виклик генератора. Це можна розглядати як генератор версії ключового слова на основі генератора.
Генератор дозволяє призупинити виконання функції та відновити її пізніше. Генератор може бути використаний для планування ваших функцій за допомогою техніки, званої батут .
Ось приклад:
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>